diff --git a/lib/Controller/OAuthController.php b/lib/Controller/OAuthController.php
index 238cb402..c1c20ec2 100644
--- a/lib/Controller/OAuthController.php
+++ b/lib/Controller/OAuthController.php
@@ -46,6 +46,7 @@ use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
@@ -60,6 +61,7 @@ class OAuthController extends Controller {
 	private ClientService $clientService;
 	private ConfigService $configService;
 	private LoggerInterface $logger;
+	private IInitialState $initialState;
 
 	public function __construct(
 		IRequest $request,
@@ -70,7 +72,8 @@ class OAuthController extends Controller {
 		CacheActorService $cacheActorService,
 		ClientService $clientService,
 		ConfigService $configService,
-		LoggerInterface $logger
+		LoggerInterface $logger,
+		IInitialState $initialState
 	) {
 		parent::__construct(Application::APP_NAME, $request);
 
@@ -82,6 +85,7 @@ class OAuthController extends Controller {
 		$this->clientService = $clientService;
 		$this->configService = $configService;
 		$this->logger = $logger;
+		$this->initialState = $initialState;
 
 		$body = file_get_contents('php://input');
 		$logger->debug('[OAuthController] input: ' . $body);
@@ -174,7 +178,6 @@ class OAuthController extends Controller {
 		string $response_type,
 		string $scope = 'read'
 	): Response {
-		try {
 			$user = $this->userSession->getUser();
 
 			// check actor exists
@@ -185,7 +188,8 @@ class OAuthController extends Controller {
 			}
 
 			// check client exists in db
-			$this->clientService->getFromClientId($client_id);
+			$client = $this->clientService->getFromClientId($client_id);
+			$this->initialState->provideInitialState('appName', $client->getAppName());
 
 			return new TemplateResponse(Application::APP_NAME, 'oauth2', [
 				'request' =>
@@ -196,16 +200,6 @@ class OAuthController extends Controller {
 						'scope' => $scope
 					]
 			]);
-
-		} catch (Exception $e) {
-			$this->logger->notice($e->getMessage() . ' ' . get_class($e));
-
-			return new TemplateResponse(
-				Application::APP_NAME,
-				'oauth2',
-				['error' => $e->getMessage()]
-			);
-		}
 	}
 
 
diff --git a/src/oauth.js b/src/oauth.js
new file mode 100644
index 00000000..7138183e
--- /dev/null
+++ b/src/oauth.js
@@ -0,0 +1,38 @@
+/**
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ * @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 OAuth2Authorize from './views/OAuth2Authorize.vue'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('social', 'js/')
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
+
+new Vue({
+	render: h => h(OAuth2Authorize),
+}).$mount('#social-oauth2')
diff --git a/src/views/OAuth2Authorize.vue b/src/views/OAuth2Authorize.vue
new file mode 100644
index 00000000..0732f1ec
--- /dev/null
+++ b/src/views/OAuth2Authorize.vue
@@ -0,0 +1,95 @@
+<!--
+ - @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ - @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>
+	<div class="wrapper">
+		<form class="guest-box" method="post">
+			<h1>{{ t('social', 'Authorization required') }}</h1>
+			<p>
+				{{ t('social', '{appDisplayName} would like permission to access your account. It is a third party application.', {appDisplayName: appName}) }}
+				<b>{{ t('social', 'If you do not trust it, then you should not authorize it.') }}</b>
+			</p>
+			<div class="button-row">
+				<NcButton type="primary" nativeType="submit">
+					{{ t('social', 'Authorize') }}
+				</NcButton>
+				<NcButton type="error" :href="homeUrl">
+					{{ t('social', 'Deny') }}
+				</NcButton>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { loadState } from '@nextcloud/initial-state'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'OAuth2Authorize',
+	components: {
+		NcButton,
+	},
+	data() {
+		return {
+			appName: loadState('social', 'appName'),
+		}
+	},
+	computed: {
+		homeUrl() {
+			generateUrl('/apps/social/')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scopped>
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+.guest-box {
+	color: var(--color-main-text);
+	background-color: var(--color-main-background);
+	padding: 1rem;
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 10px var(--color-box-shadow);
+	display: inline-block;
+	max-width: 600px;
+
+	h1 {
+		font-weight: bold;
+		text-align: center;
+		font-size: 20px;
+		margin-bottom: 12px;
+		line-height: 140%;
+	}
+
+	.button-row {
+		display: flex;
+		gap: 1rem;
+		flex-direction: row;
+		margin-top: 1rem;
+		justify-content: end;
+	}
+}
+</style>
diff --git a/templates/oauth2.php b/templates/oauth2.php
index 2b192b05..9cb80a07 100644
--- a/templates/oauth2.php
+++ b/templates/oauth2.php
@@ -22,5 +22,7 @@
  *
  */
 
+\OCP\Util::addScript('social', 'social-oauth');
+?>
 
-\OCP\Util::addScript('social', 'social-oauth2');
+<div id="social-oauth2"></div>
diff --git a/webpack.common.js b/webpack.common.js
index dcacd5d9..48fef45f 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -8,7 +8,8 @@ webpackConfig.entry = {
 	social: path.join(__dirname, 'src', 'main.js'),
 	ostatus: path.join(__dirname, 'src', 'ostatus.js'),
 	profilePage: path.join(__dirname, 'src', 'profile.js'),
-    dashboard: path.join(__dirname, 'src', 'dashboard.js'),
+	dashboard: path.join(__dirname, 'src', 'dashboard.js'),
+	oauth: path.join(__dirname, 'src', 'oauth.js'),
 }
 
 module.exports = webpackConfig