diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index a29b6313332ad39922515b40f46ae4e85f2c64af..6119917f226a5a16fd4103165beb5861724de6a1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,5 +1,5 @@
 variables:
-    TO_PACKAGE: 'appinfo css l10n lib templates js img'
+    TO_PACKAGE: 'appinfo l10n lib templates js img'
 include:
   - project: "e/infra/ecloud/nextcloud-apps/ci-templates"
     ref: main
diff --git a/appinfo/info.xml b/appinfo/info.xml
index a695b9fabd50f7d579fbeb089f13f6422598d363..dc5aa25c5412921ea83de92fde0732915124b494 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -10,7 +10,7 @@
     <description><![CDATA[in /e/OS cloud, nextcloud accounts are linked to mail accounts. This app ensures both are coordinated: it sets the e-mail address, quota and storage of the user upon creation.
     It also completes the account deletion by cleaning other parts of the /e/OS cloud setup to ensure no more data is retained when a user requests an account deletion.
     This app uses the UserDeletedEvent to invoke scripts in the docker-welcome container of /e/OS cloud setup]]></description>
-    <version>3.0.0</version>
+    <version>3.1.0</version>
     <licence>agpl</licence>
     <author mail="dev@murena.com" homepage="https://murena.com/">Murena SAS</author>
     <namespace>EcloudAccounts</namespace>
diff --git a/appinfo/routes.php b/appinfo/routes.php
index b4eb6822029af966b5d3137f84643d5332a14de5..24d5750238339b2056d5e83ee6beb412901dc463 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -16,11 +16,11 @@ return ['routes' => [
 	],
 	[
 		'name' => 'beta_user#remove_user_in_group',
-		'url' => '/beta/update', 'verb' => 'DELETE'
+		'url' => '/beta/remove', 'verb' => 'GET'
 	],
 	[
 		'name' => 'beta_user#add_user_in_group',
-		'url' => '/beta/update', 'verb' => 'POST'
+		'url' => '/beta/add', 'verb' => 'GET'
 	],
 	[
 		'name' => 'beta_user#submit_issue',
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 1c8504213c6e7c1e0655bd90cd00b82d895789fa..0000000000000000000000000000000000000000
--- a/css/style.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.alert {
-	position: relative;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	border: 1px solid transparent;
-	border-radius: 0.25rem;
-	width: fit-content;
-}
-
-.alert-success {
-	color: #155724;
-	background-color: #d4edda;
-	border-color: #c3e6cb;
-	padding: 0.75rem 1.25rem;
-}
-
-.alert-fail {
-	color: #721c24;
-	background-color: #f8d7da;
-	border-color: #f5c6cb;
-	padding: 0.75rem 1.25rem;
-}
-
-#issue-submit-form #title,
-#issue-submit-form textarea {
-	width: 450px;
-}
-
-#issue-submit-form textarea {
-	height: 100px;
-}
-
-#issue-submit-form textarea:hover {
-	border-color: var(--color-primary-element) !important;
-}
-
-.mt-20 {
-	margin-top: 20px !important;
-}
-
-#beta-form .btn-optout {
-	background-color: white;
-	color: var(--color-delete);
-	border-color: var(--color-delete);
-}
-
-#beta-form .width300,
-#issue-submit-form .width300 {
-	width: 300px;
-}
-
-.color-red {
-	color: red;
-}
-
-ul.beta-apps {
-	list-style: none;
-	margin-left: 0;
-	padding-left: 1em;
-}
-
-ul.beta-apps > li:before {
-	display: inline-block;
-	content: '-';
-	width: 1em;
-	margin-left: -1em;
-}
-
diff --git a/lib/Controller/BetaUserController.php b/lib/Controller/BetaUserController.php
index ac6b06c60a999a7d5d93b7429dc3683d542be2b3..be1b970f83d308170ae8b7a807a9a800b0b05b39 100644
--- a/lib/Controller/BetaUserController.php
+++ b/lib/Controller/BetaUserController.php
@@ -12,7 +12,6 @@ use OCP\IConfig;
 use OCP\IUserManager;
 use OCP\IGroupManager;
 use OCP\IUserSession;
-use OCP\ILogger;
 use OCP\Mail\IMailer;
 use OCP\Util;
 
@@ -29,7 +28,6 @@ class BetaUserController extends Controller {
 		$AppName,
 		IRequest $request,
 		IConfig $config,
-		ILogger $logger,
 		IUserManager $userManager,
 		IGroupManager $groupManager,
 		IUserSession $userSession,
@@ -39,7 +37,6 @@ class BetaUserController extends Controller {
 		$this->appName = $AppName;
 		$this->request = $request;
 		$this->config = $config;
-		$this->logger = $logger;
 		$this->userManager = $userManager;
 		$this->userSession = $userSession;
 		$this->groupManager = $groupManager;
@@ -85,7 +82,6 @@ class BetaUserController extends Controller {
 		$fromEmail = $user->getEMailAddress();
 		$fromName = $user->getDisplayName();
 
-
 		$template = $this->mailer->createEMailTemplate('betauser.SubmitGitIssue', []);
 		$template->addHeader();
 		$template->setSubject($title);
@@ -98,7 +94,6 @@ class BetaUserController extends Controller {
 		$message->useTemplate($template);
 
 		$this->mailer->send($message);
-
 		return true;
 	}
 }
diff --git a/lib/Controller/UserController.php b/lib/Controller/UserController.php
index dd87f13eea12cfec94bf54d9edf99cbce46637c7..975e7aa769cf80631fc1f3fa60f7e5f0d6988968 100644
--- a/lib/Controller/UserController.php
+++ b/lib/Controller/UserController.php
@@ -65,7 +65,7 @@ class UserController extends ApiController {
 	 * @PublicPage
 	 * @NoCSRFRequired
 	 */
-	public function setAccountData(string $token, string $uid, string $email, string $recoveryEmail, string $hmeAlias, string $quota = '1024 MB'): DataResponse {
+	public function setAccountData(string $token, string $uid, string $email, string $recoveryEmail, string $hmeAlias, string $quota = '1024 MB', bool $tosAccepted = false): DataResponse {
 		$response = new DataResponse();
 
 		if (!$this->checkAppCredentials($token)) {
@@ -87,7 +87,7 @@ class UserController extends ApiController {
 
 		$user->setEMailAddress($email);
 		$user->setQuota($quota);
-
+		$this->config->setUserValue($uid, 'terms_of_service', 'tosAccepted', intval($tosAccepted));
 		$recoveryEmailUpdated = $this->userService->setRecoveryEmail($uid, $recoveryEmail);
 		if (!$recoveryEmailUpdated) {
 			return $this->getErrorResponse($response, 'error_setting_recovery', 400);
diff --git a/lib/Service/BetaUserService.php b/lib/Service/BetaUserService.php
new file mode 100644
index 0000000000000000000000000000000000000000..3f6f84d293d31454a264ab2a84a2c8373f884761
--- /dev/null
+++ b/lib/Service/BetaUserService.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OCA\EcloudAccounts\Service;
+
+use OCP\IConfig;
+use OCP\IGroupManager;
+use OCP\IUserSession;
+use OCP\App\IAppManager;
+
+class BetaUserService {
+	private $config;
+	private $appManager;
+	protected $groupManager;
+	private $userSession;
+
+	public function __construct(
+		IConfig $config,
+		IGroupManager $groupManager,
+		IUserSession $userSession,
+		IAppManager $appManager
+	) {
+		$this->config = $config;
+		$this->groupManager = $groupManager;
+		$this->userSession = $userSession;
+		$this->appManager = $appManager;
+	}
+		
+	/**
+	 * Method getBetaUserStatus used to get beta user status
+	 *
+	 * @return void
+	 */
+	public function getBetaUserStatus() {
+		$uid = $this->userSession->getUser()->getUID();
+		$betaGroupName = $this->config->getSystemValue("beta_group_name");
+		if ($this->groupManager->isInGroup($uid, $betaGroupName)) {
+			return true;
+		}
+		return false;
+	}
+	
+	/**
+	 * Method getBetaApps used to get beta apps
+	 *
+	 * @return void
+	 */
+	public function getBetaApps() {
+		$betaGroupName = $this->config->getSystemValue("beta_group_name");
+		$group = $this->groupManager->get($betaGroupName);
+		$betaGroupApps = $this->appManager->getEnabledAppsForGroup($group);
+		$betaApps = [];
+		foreach ($betaGroupApps as $app) {
+			$appEnabledGroups = $this->config->getAppValue($app, 'enabled', 'no');
+			if (str_contains($appEnabledGroups, $betaGroupName)) {
+				$info = $this->appManager->getAppInfo($app);
+				$betaApps[] = $info['name'];
+			}
+		}
+		return $betaApps;
+	}
+}
diff --git a/lib/Settings/BetaUserSetting.php b/lib/Settings/BetaUserSetting.php
index 696d94337ea6a52d26b55ffa5bfd464233aa0465..79c6b95cc607a5391d8b326ececf8b30a8862be5 100644
--- a/lib/Settings/BetaUserSetting.php
+++ b/lib/Settings/BetaUserSetting.php
@@ -6,66 +6,42 @@ namespace OCA\EcloudAccounts\Settings;
 
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IGroupManager;
-use OCP\IUserSession;
 use OCP\Settings\ISettings;
-use OCP\Util;
 use OCP\IConfig;
-use OCP\App\IAppManager;
 use OCP\ILogger;
+use OCP\AppFramework\Services\IInitialState;
+use OCA\EcloudAccounts\Service\BetaUserService;
 
 class BetaUserSetting implements ISettings {
-	/** @var IUserSession */
-	private $userSession;
-
-	/** @var IGroupManager */
 	protected $groupManager;
-
-	/** @var Util */
-	protected $util;
-
-	private $appName;
-
-	private $appManager;
-
-	/** @var ILogger */
 	private $logger;
+	private $initialState;
+	private $config;
+	private $appName;
+	private $betaUserService;
 
 	public function __construct(
 		$appName,
-		IUserSession $userSession,
 		IGroupManager $groupManager,
-		Util $util,
 		IConfig $config,
-		IAppManager $appManager,
-		ILogger $logger
+		ILogger $logger,
+		IInitialState $initialState,
+		BetaUserService $betaUserService
 	) {
-		$this->userSession = $userSession;
 		$this->groupManager = $groupManager;
 		$this->appName = $appName;
 		$this->config = $config;
-		$this->util = $util;
-		$this->appManager = $appManager;
 		$this->logger = $logger;
+		$this->initialState = $initialState;
+		$this->betaUserService = $betaUserService;
 	}
 
 	public function getForm(): TemplateResponse {
-		$uid = $this->userSession->getUser()->getUID();
-		$betaGroupName = $this->config->getSystemValue("beta_group_name");
-		$this->util->addScript($this->appName, $this->appName . '-beta-user-setting');
-		$group = $this->groupManager->get($betaGroupName);
-		$betaGroupApps = $this->appManager->getEnabledAppsForGroup($group);
-		$betaApps = [];
-		foreach ($betaGroupApps as $app) {
-			$appEnabledGroups = $this->config->getAppValue($app, 'enabled', 'no');
-			if (str_contains($appEnabledGroups, $betaGroupName)) {
-				$info = $this->appManager->getAppInfo($app);
-				$betaApps[] = $info['name'];
-			}
-		}
-		if ($this->groupManager->isInGroup($uid, $betaGroupName)) {
-			return new TemplateResponse($this->appName, 'opt_out_beta_user', ['betaApps' => $betaApps], '');
-		}
-		return new TemplateResponse($this->appName, 'become_beta_user', ['betaApps' => $betaApps], '');
+		$betaUserStatus = $this->betaUserService->getBetaUserStatus();
+		$betaApps = $this->betaUserService->getBetaApps();
+		$this->initialState->provideInitialState('is_beta_user', $betaUserStatus);
+		$this->initialState->provideInitialState('beta_apps', $betaApps);
+		return new TemplateResponse($this->appName, 'beta', ['appName' => $this->appName], '');
 	}
 
 	public function getSection(): ?string {
diff --git a/package-lock.json b/package-lock.json
index a153f1390b0fc2a02585f0e03bccd64aca331624..5077e57f6351ca83850c3c64718d8e88400480d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "ecloud-accounts",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ecloud-accounts",
-			"version": "3.0.0",
+			"version": "3.1.0",
 			"dependencies": {
 				"@nextcloud/axios": "^2.1.0",
 				"@nextcloud/dialogs": "^3.2.0",
diff --git a/package.json b/package.json
index c3b7f0076d372cc0a2fc268169dd56cc9bd38116..83b8a14f52ca558912e46b633968d3c5a1b20a08 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ecloud-accounts",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "App for ecloud account management.",
 	"repository": {
 		"type": "git",
diff --git a/src/BecomeBetaUser.vue b/src/BecomeBetaUser.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1fbb375957e35d7ae47b9d785a8f4c5ca4a8959b
--- /dev/null
+++ b/src/BecomeBetaUser.vue
@@ -0,0 +1,239 @@
+<template>
+	<SettingsSection>
+		<div v-if="!isBetaUser" class="section padding-0">
+			<h2>
+				{{
+					t(appName, 'Do you want to become a beta user?')
+				}}
+			</h2>
+			<p class="settings-hint">
+				{{
+					t(appName, 'You want to experiment new features ahead of the others and provide feedback on them before and if they\'re released? This section is made for you!')
+				}}
+			</p>
+			<p class="settings-hint">
+				{{
+					t(appName, 'To get a preview of our new features you need to become part of our beta users.To do so, simply click on the button below.You can opt out of beta features at anytime.')
+				}}
+			</p>
+			<div id="groups" class="aliases-info">
+				<input type="button"
+					class="width300"
+					:value="t(appName, 'Become a beta user')"
+					@click="becomeBetaUser()">
+			</div>
+			<div class="margin-top-10">
+				<p class="settings-hint">
+					{{ t(appName, 'Here is the list of currently available beta features: ') }}
+				</p>
+				<ul class="beta-apps settings-hint">
+					<li v-for="app in betaApps" :key="app">
+						{{ app }}
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div v-if="isBetaUser" class="section padding-0">
+			<h2>
+				{{ t(appName,'You are part of the beta users.') }}
+			</h2>
+			<p class="settings-hint">
+				{{ t(appName,'Note : as the features are not released yet, you may encounter some bugs. Please report them or give your feedback using the form below.') }}
+			</p>
+			<div>
+				<p class="settings-hint">
+					{{ t(appName,'Here is the list of currently available beta features:') }}
+				</p>
+				<ul class="beta-apps settings-hint">
+					<li v-for="app in betaApps" :key="app">
+						{{ app }}
+					</li>
+				</ul>
+			</div>
+			<form id="issue-submit-form" class="mt-20" @submit="submitFeedback">
+				<p>
+					<label id="title_label" for="title">
+						<b>
+							{{ t(appName,'Title') }} <sup class="color-red">*</sup>
+						</b>
+					</label>
+				</p>
+				<p>
+					<input id="title"
+						v-model="title"
+						type="text"
+						:placeholder="t(appName, 'Summary of your feedback')">
+				</p>
+				<p class="mt-20">
+					<label id="description_label" for="description">
+						<b>
+							{{ t(appName,'Description') }} <sup class="color-red">*</sup>
+						</b>
+					</label>
+				</p>
+				<p>
+					<textarea id="description" v-model="description" :placeholder="t(appName, 'Please give us as many details as possible')" />
+				</p>
+				<p class="mt-20">
+					<input type="submit"
+						:value="t(appName, 'Submit')"
+						class="width300"
+						:disabled="isDisabled">
+				</p>
+			</form>
+			<p class="settings-hint mt-20">
+				{{ t(appName,'Want to take a break from beta features? Just click on the button below. You can become a beta user again anytime!') }}
+			</p>
+			<div id="beta-form">
+				<input type="submit"
+					class="width300 btn-optout"
+					:value="t(appName, 'Opt out of beta features')"
+					@click="optOutFromBetaUser()">
+			</div>
+		</div>
+	</SettingsSection>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection.js'
+import Axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showSuccess, showError } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
+const APPLICATION_NAME = 'ecloud-accounts'
+
+export default {
+	name: 'BecomeBetaUser',
+	components: {
+		SettingsSection,
+	},
+	data() {
+		return {
+			appName: APPLICATION_NAME,
+			isBetaUser: loadState(APPLICATION_NAME, 'is_beta_user'),
+			betaApps: loadState(APPLICATION_NAME, 'beta_apps'),
+			title: '',
+			description: '',
+		}
+	},
+	computed: {
+		isDisabled() {
+			return (this.description === '' || this.title === '')
+		},
+	},
+	methods: {
+		async becomeBetaUser() {
+			try {
+				const url = generateUrl(
+					`/apps/${this.appName}/beta/add`
+				)
+				await Axios.get(url)
+				this.isBetaUser = true
+				showSuccess(t(this.appName, 'Congratulations! You\'ve successfully been added to the beta users.'))
+			} catch (e) {
+				showError(t(this.appName, 'Something went wrong.'))
+			}
+		},
+		async optOutFromBetaUser() {
+			try {
+				const url = generateUrl(
+					`/apps/${this.appName}/beta/remove`
+				)
+				await Axios.get(url)
+				this.isBetaUser = false
+				showSuccess(t(this.appName, 'You no longer have access to experimental features.'))
+			} catch (e) {
+				showError(t(this.appName, 'Something went wrong.'))
+			}
+		},
+		async submitFeedback(e) {
+			e.preventDefault()
+			try {
+				const url = generateUrl(
+					`/apps/${this.appName}/issue/submit`
+				)
+				await Axios.post(url, { title: this.title, description: this.description })
+				showSuccess(t(this.appName, 'Issue submitted successfully.'))
+				this.description = ''
+				this.title = ''
+			} catch (e) {
+				showError(t(this.appName, 'Something went wrong.'))
+			}
+		},
+	},
+}
+</script>
+<style scoped>
+.alert {
+	position: relative;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	border: 1px solid transparent;
+	border-radius: 0.25rem;
+	width: fit-content;
+}
+
+.alert-success {
+	color: #155724;
+	background-color: #d4edda;
+	border-color: #c3e6cb;
+	padding: 0.75rem 1.25rem;
+}
+
+.alert-fail {
+	color: #721c24;
+	background-color: #f8d7da;
+	border-color: #f5c6cb;
+	padding: 0.75rem 1.25rem;
+}
+
+#issue-submit-form #title,
+#issue-submit-form textarea {
+	width: 450px;
+}
+
+#issue-submit-form textarea {
+	height: 100px;
+}
+
+#issue-submit-form textarea:hover {
+	border-color: var(--color-primary-element) !important;
+}
+
+.mt-20 {
+	margin-top: 20px !important;
+}
+
+#beta-form .btn-optout {
+	background-color: white;
+	color: var(--color-delete);
+	border-color: var(--color-delete);
+}
+
+#beta-form .width300,
+#issue-submit-form .width300 {
+	width: 300px;
+}
+
+.color-red {
+	color: red;
+}
+
+ul.beta-apps {
+	list-style: none;
+	margin-left: 0;
+	padding-left: 1em;
+}
+
+ul.beta-apps > li:before {
+	display: inline-block;
+	content: '-';
+	width: 1em;
+	margin-left: -1em;
+}
+
+.padding-0{
+	padding: 0;
+}
+</style>
diff --git a/src/beta-user-setting.js b/src/beta-user-setting.js
index dc4aee1766bd13e8e6521595f055cdf174803f3c..06e3d92fdc7ee4d16808a94746668720e056b4c7 100644
--- a/src/beta-user-setting.js
+++ b/src/beta-user-setting.js
@@ -1,86 +1,8 @@
-/*
- * Copyright 2022 - Murena SAS - tous droits réservés
- */
-/* global $ */
-$(function() {
-	$('#beta-form').submit(function(event) {
-		event.preventDefault()
+import Vue from 'vue'
+import './common.js'
+import BecomeBetaUser from './BecomeBetaUser.vue'
 
-		$('#beta-form [type="submit"]').attr('disabled', true)
-		const registerType = $('#beta').val()
-		const url_ = OC.generateUrl('/apps/ecloud-accounts/beta/update')
-
-		$.ajax({
-			url: url_,
-			method: (registerType === 'deregister') ? 'DELETE' : 'POST',
-			success(result) {
-				let message_ = ''
-				if (result) {
-					if (registerType === 'deregister') {
-						message_ = t('ecloud-accounts', 'You no longer have access to experimental features.')
-					} else {
-						message_ = t('ecloud-accounts', 'Congratulations! You\'ve successfully been added to the beta users.')
-					}
-					$('#message').addClass('alert-success')
-				} else {
-					message_ = t('ecloud-accounts', 'Something went wrong.')
-					$('#message').addClass('alert-fail')
-				}
-				$('#message').html(message_)
-				setTimeout(function() {
-					window.location.reload()
-				}, 2000)
-			},
-			error(request, msg, error) {
-				$('#message').addClass('alert-fail')
-				$('#message').html(t('ecloud-accounts', 'Something went wrong here.'))
-			},
-		})
-	})
-
-	$('#title, #description').on('input', function() {
-		$(this).parent().find('.error-msg').remove()
-	})
-
-	$('#issue-submit-form').submit(function(event) {
-		event.preventDefault()
-
-		const url_ = OC.generateUrl('/apps/ecloud-accounts/issue/submit')
-		$('.error-msg').remove()
-		if ($('#title').val() === '' || $('#description').val() === '') {
-			if ($('#title').val() === '') {
-				$('#title').parent().append('<div class="error-msg color-red width300">' + t('ecloud-accounts', 'Title is mandatory.') + '</div>')
-			}
-			if ($('#description').val() === '') {
-				$('#description').parent().append('<div class="error-msg color-red width300">' + t('ecloud-accounts', 'Description is mandatory.') + '</div>')
-			}
-			return
-		}
-		$('#issue-submit-form [type="submit"]').attr('disabled', true)
-
-		$.ajax({
-			url: url_,
-			method: 'POST',
-			data: $(this).serializeArray(),
-			success(result) {
-				let message_ = ''
-				if (result) {
-					message_ = t('ecloud-accounts', 'Issue submitted successfully.')
-					$('#issue_message').addClass('alert-success')
-				} else {
-					message_ = t('ecloud-accounts', 'Something went wrong.')
-					$('#issue_message').addClass('alert-fail')
-				}
-				$('#issue_message').html(message_)
-				setTimeout(function() {
-					window.location.reload()
-				}, 2000)
-
-			},
-			error(request, msg, error) {
-				$('#issue_message').addClass('alert-fail')
-				$('#issue_message').html(t('ecloud-accounts', 'Something went wrong.'))
-			},
-		})
-	})
+export default new Vue({
+	el: '#become-beta-user',
+	render: h => h(BecomeBetaUser),
 })
diff --git a/templates/become_beta_user.php b/templates/become_beta_user.php
deleted file mode 100644
index 6d9b82b011085a975217f7f7164bca8393c0fec2..0000000000000000000000000000000000000000
--- a/templates/become_beta_user.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-style('ecloud-accounts', 'style');
-?>
-
-<div id="email-main">
-	<div id="email-content">
-		<div class="section">
-			<h2><?php p($l->t('Do you want to become a beta user?')); ?></h2>
-			<p class="settings-hint"><?php p($l->t('You want to experiment new features ahead of the others and provide feedback on them before and if they\'re released? This section is made for you!')) ?></p>
-			<p class="settings-hint"><?php p($l->t('To get a preview of our new features you need to become part of our beta users. To do so, simply click on the button below. You can opt out of beta features at anytime.')) ?></p>
-			<div id="groups" class="aliases-info">
-				<form id="beta-form">
-					<input name="beta" id="beta" type="hidden" value="register">
-					<input type="submit" class="width300" value="<?= p($l->t('Become a beta user')) ?>" />
-				</form>
-			</div>
-			<div id="message" class="alert"></div>
-			<div class="margin-top-10">
-				<p class="settings-hint"><?php p($l->t('Here is the list of currently available beta features:')) ?></p>
-				<ul class="beta-apps settings-hint">
-					<?php foreach ($betaApps as $app) { ?>
-					<li><?= $app ?></li>
-					<?php } ?>
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/templates/beta.php b/templates/beta.php
new file mode 100644
index 0000000000000000000000000000000000000000..cb0c5869eca128645690c8abef08e9db823fc438
--- /dev/null
+++ b/templates/beta.php
@@ -0,0 +1,4 @@
+<?php
+script("ecloud-accounts", $appName . '-beta-user-setting');
+?>
+<div id="become-beta-user"></div>
\ No newline at end of file
diff --git a/templates/opt_out_beta_user.php b/templates/opt_out_beta_user.php
deleted file mode 100644
index d77c76987d2b3b419322096561657c3ace9c5f7f..0000000000000000000000000000000000000000
--- a/templates/opt_out_beta_user.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-style('ecloud-accounts', 'style');
-?>
-
-<div id="email-main">
-	<div id="email-content">
-		<div class="section">
-			<h2><?php p($l->t('You are part of the beta users.')); ?></h2>
-			<p class="settings-hint">
-				<?php p($l->t('Note : as the features are not released yet, you may encounter some bugs. Please report them or give your feedback using the form below.')); ?>
-			</p>
-			<div>
-				<p class="settings-hint"><?php p($l->t('Here is the list of currently available beta features:')) ?></p>
-				<ul class="beta-apps settings-hint">
-					<?php foreach ($betaApps as $app) { ?>
-						<li><?= $app ?></li>
-					<?php } ?>
-				</ul>
-			</div>
-			<form id="issue-submit-form" class="mt-20">
-				<p>
-					<label for="title" id="title_label"><b><?php p($l->t('Title')); ?> <sup class="color-red">*</sup></b></label>
-				</p>
-				<p>
-					<input type="text" id="title" name="title" placeholder="<?php p($l->t('Summary of your feedback')); ?>">
-				</p>
-				<p class="mt-20">
-					<label for="description" id="description_label"><b><?php p($l->t('Description')); ?> <sup class="color-red">*</sup></b></label>
-				</p>
-				<p>
-					<textarea id="description" name="description" placeholder="<?php p($l->t('Please give us as many details as possible')); ?>"></textarea>
-				</p>
-				<p class="mt-20">
-					<input type="submit" value="<?php p($l->t('Submit')) ?>" class="width300" />
-				</p>
-				<div id="issue_message" class="alert"></div>
-			</form>
-			<p class="settings-hint mt-20"><?php p($l->t('Want to take a break from beta features? Just click on the button below. You can become a beta user again anytime!')) ?></p>
-
-			<div id="groups" class="aliases-info">
-				<form id="beta-form">
-					<input name="beta" id="beta" type="hidden" value="deregister">
-					<input type="submit" class="width300 btn-optout" value="<?= p($l->t('Opt out of beta features')) ?>" />
-				</form>
-			</div>
-			<div id="message" class="alert"></div>
-		</div>
-	</div>
-</div>