diff --git a/apps/accessibility/appinfo/routes.php b/apps/accessibility/appinfo/routes.php
index ce03b3486b797f1efad1d7461a0e5dc6f6c91248..0096b729164eee70241a1a25354c3eaeb8d33cd4 100644
--- a/apps/accessibility/appinfo/routes.php
+++ b/apps/accessibility/appinfo/routes.php
@@ -35,7 +35,12 @@ return [
 		[
 			'name' => 'Config#setConfig',
 			'url'  => '/api/v1/config/{key}',
-			'verb' => 'POST',
+			'verb' => 'PUT',
+		],
+		[
+			'name' => 'Config#deleteConfig',
+			'url'  => '/api/v1/config/{key}',
+			'verb' => 'DELETE',
 		],
     ]
 ];
diff --git a/apps/accessibility/js/accessibility.js b/apps/accessibility/js/accessibility.js
index d3dced4a57d1108d835f7807862fc387b40eb6ae..e15f5691b43b0a93dd401719c11bcfd7e70f43e9 100644
Binary files a/apps/accessibility/js/accessibility.js and b/apps/accessibility/js/accessibility.js differ
diff --git a/apps/accessibility/js/accessibility.js.map b/apps/accessibility/js/accessibility.js.map
index c7db886351da6aeebf05926a0c18536e031ca7c4..8baa4f042754d2f33d0f38898a2d105d40ec0182 100644
Binary files a/apps/accessibility/js/accessibility.js.map and b/apps/accessibility/js/accessibility.js.map differ
diff --git a/apps/accessibility/lib/Controller/ConfigController.php b/apps/accessibility/lib/Controller/ConfigController.php
index d98ba231fa865200ec6506c3a121518cb335bd83..589861163f1655fb716e67be43aeaf39b1d6dd32 100644
--- a/apps/accessibility/lib/Controller/ConfigController.php
+++ b/apps/accessibility/lib/Controller/ConfigController.php
@@ -102,16 +102,8 @@ class ConfigController extends OCSController {
 	public function setConfig(string $key, $value): DataResponse {
 		if ($key === 'theme' || $key === 'font' || $key === 'highcontrast') {
 
-			if ($value === false) {
-				$this->config->deleteUserValue($this->userId, $this->appName, $key);
-				$userValues = $this->config->getUserKeys($this->userId, $this->appName);
-
-				// remove hash if no settings selected
-				if (count($userValues) === 1 && $userValues[0] === 'icons-css') {
-					$this->config->deleteUserValue($this->userId, $this->appName, 'icons-css');
-				}
-
-				return new DataResponse();
+			if ($value === false || $value === '') {
+				throw new OCSBadRequestException('Invalid value: ' . $value);
 			}
 
 			$themes = $this->accessibilityProvider->getThemes();
@@ -133,4 +125,30 @@ class ConfigController extends OCSController {
 		throw new OCSBadRequestException('Invalid key: ' . $key);
 	}
 
+	/**
+	 * @NoAdminRequired
+	 *
+	 * Unset theme or font config
+	 *
+	 * @param string $key theme or font
+	 * @return DataResponse
+	 * @throws Exception
+	 */
+	public function deleteConfig(string $key): DataResponse {
+		if ($key === 'theme' || $key === 'font' || $key === 'highcontrast') {
+
+			$this->config->deleteUserValue($this->userId, $this->appName, $key);
+			$userValues = $this->config->getUserKeys($this->userId, $this->appName);
+
+			// remove hash if no settings selected
+			if (count($userValues) === 1 && $userValues[0] === 'icons-css') {
+				$this->config->deleteUserValue($this->userId, $this->appName, 'icons-css');
+			}
+
+			return new DataResponse();
+		}
+
+		throw new OCSBadRequestException('Invalid key: ' . $key);
+	}
+
 }
diff --git a/apps/accessibility/lib/Settings/Personal.php b/apps/accessibility/lib/Settings/Personal.php
index ef9fc407147569a5d0f08d27b2adc6ce48d2dc15..484f33cd064f1c941295f3bd25dd682dda46fa3e 100644
--- a/apps/accessibility/lib/Settings/Personal.php
+++ b/apps/accessibility/lib/Settings/Personal.php
@@ -27,10 +27,12 @@ namespace OCA\Accessibility\Settings;
 use OCA\Accessibility\AccessibilityProvider;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IConfig;
+use OCP\IInitialStateService;
 use OCP\IL10N;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
 use OCP\Settings\ISettings;
+use OCP\Util;
 
 class Personal implements ISettings {
 
@@ -52,6 +54,9 @@ class Personal implements ISettings {
 	/** @var AccessibilityProvider */
 	private $accessibilityProvider;
 
+	/** @var IInitialStateService */
+	private $initialStateService;
+
 	/**
 	 * Settings constructor.
 	 *
@@ -67,13 +72,15 @@ class Personal implements ISettings {
 								IUserSession $userSession,
 								IL10N $l,
 								IURLGenerator $urlGenerator,
-								AccessibilityProvider $accessibilityProvider) {
+								AccessibilityProvider $accessibilityProvider,
+								IInitialStateService $initialStateService) {
 		$this->appName               = $appName;
 		$this->config                = $config;
 		$this->userSession           = $userSession;
 		$this->l                     = $l;
 		$this->urlGenerator          = $urlGenerator;
 		$this->accessibilityProvider = $accessibilityProvider;
+		$this->initialStateService   = $initialStateService;
 	}
 
 	/**
@@ -81,19 +88,25 @@ class Personal implements ISettings {
 	 * @since 9.1
 	 */
 	public function getForm() {
+		Util::addScript('accessibility', 'accessibility');
+		Util::addStyle('accessibility', 'style');
 
-		$serverData = [
+		$availableConfig = [
 			'themes' => $this->accessibilityProvider->getThemes(),
 			'fonts'  => $this->accessibilityProvider->getFonts(),
-			'highcontrast' => $this->accessibilityProvider->getHighContrast(),
-			'selected' => [
-				'highcontrast' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false),
-				'theme'  => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
-				'font'   => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
-			]
+			'highcontrast' => $this->accessibilityProvider->getHighContrast()
+		];
+
+		$userConfig = [
+			'highcontrast' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false),
+			'theme'  => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
+			'font'   => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
 		];
 
-		return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);
+		$this->initialStateService->provideInitialState($this->appName, 'available-config', $availableConfig);
+		$this->initialStateService->provideInitialState($this->appName, 'user-config', $userConfig);
+
+		return new TemplateResponse($this->appName, 'settings-personal');
 	}
 
 	/**
diff --git a/apps/accessibility/src/Accessibility.vue b/apps/accessibility/src/Accessibility.vue
index 3b90e8d9fe604c243809b2f9afa7443a23736454..6ba680dc009260b0406254cbed8b42a5311fee68 100644
--- a/apps/accessibility/src/Accessibility.vue
+++ b/apps/accessibility/src/Accessibility.vue
@@ -118,9 +118,10 @@ export default {
 		 */
 		async selectItem(type, id) {
 			try {
+				const isDelete = id === ''
 				await axios({
 					url: generateOcsUrl('apps/accessibility/api/v1/config', 2) + type,
-					method: id === '' ? 'DELETE' : 'POST',
+					method: isDelete ? 'DELETE' : 'PUT',
 					data: {
 						value: id
 					}
diff --git a/apps/accessibility/templates/settings-personal.php b/apps/accessibility/templates/settings-personal.php
index 3149241c5ed2e534c3ed27f1c81350b1a7243b39..8761ec14bb570aa1c5662d331d9eb07f91c6a992 100644
--- a/apps/accessibility/templates/settings-personal.php
+++ b/apps/accessibility/templates/settings-personal.php
@@ -21,9 +21,6 @@
  *
  */
 
-script('accessibility', 'accessibility');
-style('accessibility', 'style');
 ?>
 
-<span id="serverData" data-server="<?php p(json_encode($_['serverData']));?>"></span>
 <span id="accessibility"></span>
\ No newline at end of file