diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php
index 4c3a9992..4de53ef7 100644
--- a/lib/Settings/Admin.php
+++ b/lib/Settings/Admin.php
@@ -26,31 +26,37 @@
 namespace OCA\AnnouncementCenter\Settings;
 
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
 use OCP\Settings\ISettings;
+use OCP\Util;
 
 class Admin implements ISettings {
 
 	/** @var IConfig */
 	protected $config;
+	/** @var IInitialState */
+	protected $initialState;
 
-	public function __construct(IConfig $config) {
+	public function __construct(IConfig $config, IInitialState $initialState) {
 		$this->config = $config;
+		$this->initialState = $initialState;
 	}
 
 	/**
 	 * @return TemplateResponse
 	 */
 	public function getForm(): TemplateResponse {
-		$adminGroups = $this->config->getAppValue('announcementcenter', 'admin_groups', '["admin"]');
-		$adminGroups = implode('|', json_decode($adminGroups, true));
-		return new TemplateResponse('announcementcenter', 'admin', [
-			'adminGroups' => $adminGroups,
-			'createActivities' => $this->config->getAppValue('announcementcenter', 'create_activities', 'yes') === 'yes',
-			'createNotifications' => $this->config->getAppValue('announcementcenter', 'create_notifications', 'yes') === 'yes',
-			'sendEmails' => $this->config->getAppValue('announcementcenter', 'send_emails', 'yes') === 'yes',
-			'allowComments' => $this->config->getAppValue('announcementcenter', 'allow_comments', 'yes') === 'yes',
-		], 'blank');
+		$adminGroups = json_decode($this->config->getAppValue('announcementcenter', 'admin_groups', '["admin"]'), true);
+
+		$this->initialState->provideInitialState('admin_groups', $adminGroups);
+		$this->initialState->provideInitialState('create_activities', $this->config->getAppValue('announcementcenter', 'create_activities', 'yes') === 'yes');
+		$this->initialState->provideInitialState('create_notifications', $this->config->getAppValue('announcementcenter', 'create_notifications', 'yes') === 'yes');
+		$this->initialState->provideInitialState('send_emails', $this->config->getAppValue('announcementcenter', 'send_emails', 'yes') === 'yes');
+		$this->initialState->provideInitialState('allow_comments', $this->config->getAppValue('announcementcenter', 'allow_comments', 'yes') === 'yes');
+
+		Util::addScript('announcementcenter', 'announcementcenter-admin');
+		return new TemplateResponse('announcementcenter', 'admin', [], TemplateResponse::RENDER_AS_BLANK);
 	}
 
 	/**
diff --git a/src/AdminSettings.vue b/src/AdminSettings.vue
new file mode 100644
index 00000000..cbbb8a73
--- /dev/null
+++ b/src/AdminSettings.vue
@@ -0,0 +1,137 @@
+<!--
+  - @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.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>
+	<NcSettingsSection :title="t('announcementcenter', 'Announcements')">
+		<NcSettingsSelectGroup v-model="adminGroups"
+			:label="t('announcementcenter', 'These groups will be able to post announcements.')"
+			@input="updateGroups" />
+
+		<NcCheckboxRadioSwitch :checked="createActivities"
+			type="switch"
+			@update:checked="toggleCreateActivities">
+			{{ t('announcementcenter', 'Create activities by default') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked="createNotifications"
+			type="switch"
+			@update:checked="toggleCreateNotifications">
+			{{ t('announcementcenter', 'Create notifications by default') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked="sendEmails"
+			type="switch"
+			@update:checked="toggleSendEmails">
+			{{ t('announcementcenter', 'Send emails by default') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked="allowComments"
+			type="switch"
+			@update:checked="toggleAllowComments">
+			{{ t('announcementcenter', 'Allow comments by default') }}
+		</NcCheckboxRadioSwitch>
+	</NcSettingsSection>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcSettingsSelectGroup from '@nextcloud/vue/dist/Components/NcSettingsSelectGroup.js'
+import { loadState } from '@nextcloud/initial-state'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+export default {
+	name: 'AdminSettings',
+
+	components: {
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
+		NcSettingsSelectGroup,
+	},
+
+	data() {
+		return {
+			adminGroups: loadState('announcementcenter', 'admin_groups'),
+			createActivities: loadState('announcementcenter', 'create_activities'),
+			createNotifications: loadState('announcementcenter', 'create_notifications'),
+			sendEmails: loadState('announcementcenter', 'send_emails'),
+			allowComments: loadState('announcementcenter', 'allow_comments'),
+		}
+	},
+
+	methods: {
+		async toggleCreateActivities(config) {
+			OCP.AppConfig.setValue('announcementcenter', 'create_activities', (config ? 'yes' : 'no'), {
+				success: function() {
+					this.createActivities = config
+					showSuccess(t('announcementcenter', 'Setting changed'))
+				}.bind(this),
+				error() {
+					showError(t('announcementcenter', 'An error occurred while changing the setting'))
+				},
+			})
+		},
+		async toggleCreateNotifications(config) {
+			OCP.AppConfig.setValue('announcementcenter', 'create_notifications', (config ? 'yes' : 'no'), {
+				success: function() {
+					this.createNotifications = config
+					showSuccess(t('announcementcenter', 'Setting changed'))
+				}.bind(this),
+				error() {
+					showError(t('announcementcenter', 'An error occurred while changing the setting'))
+				},
+			})
+		},
+		async toggleSendEmails(config) {
+			OCP.AppConfig.setValue('announcementcenter', 'send_emails', (config ? 'yes' : 'no'), {
+				success: function() {
+					this.sendEmails = config
+					showSuccess(t('announcementcenter', 'Setting changed'))
+				}.bind(this),
+				error() {
+					showError(t('announcementcenter', 'An error occurred while changing the setting'))
+				},
+			})
+		},
+		async toggleAllowComments(config) {
+			OCP.AppConfig.setValue('announcementcenter', 'allow_comments', (config ? 'yes' : 'no'), {
+				success: function() {
+					this.allowComments = config
+					showSuccess(t('announcementcenter', 'Setting changed'))
+				}.bind(this),
+				error() {
+					showError(t('announcementcenter', 'An error occurred while changing the setting'))
+				},
+			})
+		},
+		async updateGroups(config) {
+			OCP.AppConfig.setValue('announcementcenter', 'admin_groups', JSON.stringify(config), {
+				success() {
+					showSuccess(t('announcementcenter', 'Setting changed'))
+				},
+				error() {
+					showError(t('announcementcenter', 'An error occurred while changing the setting'))
+				},
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/admin.js b/src/admin.js
index 413fd6b8..f5f9d8a6 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -20,18 +20,34 @@
  *
  */
 
-$(document).ready(function() {
-	const $announcementCenter = $('#announcementcenter')
-	const $adminGroup = $announcementCenter.find('.admin_groups')
+import Vue from 'vue'
+import { generateFilePath } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate, translatePlural } from '@nextcloud/l10n'
+import store from './store/index.js'
+import AdminSettings from './AdminSettings.vue'
+import Vuex from 'vuex'
 
-	OC.Settings.setupGroupsSelect($adminGroup)
-	$adminGroup.change(function(event) {
-		let groups = event.val || ['admin']
-		groups = JSON.stringify(groups)
-		OCP.AppConfig.setValue('announcementcenter', 'admin_groups', groups)
-	})
+// Styles
+import '@nextcloud/dialogs/dist/index.css'
 
-	$announcementCenter.find('.checkbox').change(function() {
-		OCP.AppConfig.setValue('announcementcenter', $(this).attr('name'), (this.checked ? 'yes' : 'no'))
-	})
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('announcementcenter', '', 'js/')
+
+Vue.use(Vuex)
+
+Vue.mixin({
+	methods: {
+		t: translate,
+		n: translatePlural,
+	},
+})
+
+export default new Vue({
+	el: '#announcementcenter',
+	store,
+	render: h => h(AdminSettings),
 })
diff --git a/templates/admin.php b/templates/admin.php
index 5138eb56..8a63b7ef 100644
--- a/templates/admin.php
+++ b/templates/admin.php
@@ -1,74 +1 @@
-<?php
-/**
- * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.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/>.
- *
- */
-
-script('announcementcenter', 'announcementcenter-admin');
-
-/** @var array $_ */
-/** @var \OCP\IL10N $l */
-?>
-<div id="announcementcenter" class="section">
-	<h2 class="inlineblock"><?php p($l->t('Announcements')); ?></h2>
-
-	<p>
-		<input type="hidden" name="admin_groups" class="admin_groups" value="<?php p($_['adminGroups']) ?>" style="width: 320px;" />
-		<br />
-		<em><?php p($l->t('These groups will be able to post announcements.')); ?></em>
-	</p>
-	<br />
-
-	<p>
-		<input id="announcementcenter_create_activities" name="create_activities"
-			   type="checkbox" class="checkbox" value="1"
-			   <?php if ($_['createActivities']) {
-			   	print_unescaped('checked="checked"');
-			   } ?> />
-		<label for="announcementcenter_create_activities"><?php p($l->t('Create activities by default'));?></label><br/>
-	</p>
-
-	<p>
-		<input id="announcementcenter_create_notifications" name="create_notifications"
-			   type="checkbox" class="checkbox" value="1"
-			   <?php if ($_['createNotifications']) {
-			   	print_unescaped('checked="checked"');
-			   } ?> />
-		<label for="announcementcenter_create_notifications"><?php p($l->t('Create notifications by default'));?></label><br/>
-	</p>
-
-	<p>
-		<input id="announcementcenter_send_emails" name="send_emails"
-			   type="checkbox" class="checkbox" value="1"
-			   <?php if ($_['sendEmails']) {
-			   	print_unescaped('checked="checked"');
-			   } ?> />
-		<label for="announcementcenter_send_emails"><?php p($l->t('Send emails by default'));?></label><br/>
-	</p>
-
-	<p>
-		<input id="announcementcenter_allow_comments" name="allow_comments"
-			   type="checkbox" class="checkbox" value="1"
-			   <?php if ($_['allowComments']) {
-			   	print_unescaped('checked="checked"');
-			   } ?> />
-		<label for="announcementcenter_allow_comments"><?php p($l->t('Allow comments by default'));?></label><br/>
-	</p>
-</div>
+<div id="announcementcenter" class="section"></div>