diff --git a/.editorconfig b/.editorconfig
index 3e787db9..69b7b806 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -15,3 +15,7 @@ indent_style = space
 [*.json]
 indent_size = 4
 indent_style = space
+
+[*.vue]
+indent_size = 4
+indent_style = space
diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 1734863b..d9f161ef 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -47,6 +47,8 @@ class Application extends App {
 		'show_labs_settings' => 'true',
 		'set_custom_permalink' => 'false',
 		'sso_immediate_redirect' => 'false',
+
+		// Default is set in the OCA\RiotChat\Settings\ShareAdmin class
 		'share_domain' => '',
 		'share_prefix' => '',
 		'share_suffix' => '',
diff --git a/lib/Settings/ElementAdmin.php b/lib/Settings/Admin.php
similarity index 96%
rename from lib/Settings/ElementAdmin.php
rename to lib/Settings/Admin.php
index c7242a69..40de6b04 100644
--- a/lib/Settings/ElementAdmin.php
+++ b/lib/Settings/Admin.php
@@ -30,7 +30,7 @@
 use OCP\IUserSession;
 use OCP\Settings\ISettings;
 
-class ElementAdmin implements ISettings {
+class Admin implements ISettings {
 
 	/** @var IConfig */
 	private $config;
@@ -58,6 +58,7 @@ public function __construct(IConfig $config, IUserSession $user, IInitialStateSe
 	 */
 	public function getForm() {
 		foreach (Application::AvailableSettings as $key => $default) {
+			// TODO: Don't send non-Element related settings here
 			$data = $this->config->getAppValue(Application::APP_ID, $key, $default);
 			$this->initialStateService->provideInitialState(Application::APP_ID, $key, $data);
 		}
diff --git a/lib/Settings/ElementAdminSection.php b/lib/Settings/AdminSection.php
similarity index 97%
rename from lib/Settings/ElementAdminSection.php
rename to lib/Settings/AdminSection.php
index 20a54a7d..7d00765c 100644
--- a/lib/Settings/ElementAdminSection.php
+++ b/lib/Settings/AdminSection.php
@@ -27,7 +27,7 @@
 use OCP\IURLGenerator;
 use OCP\Settings\IIconSection;
 
-class ElementAdminSection implements IIconSection {
+class AdminSection implements IIconSection {
 
 	/** @var IURLGenerator */
 	private $urlGenerator;
diff --git a/lib/Settings/Personal.php b/lib/Settings/Personal.php
index de59ef50..c41ca5db 100644
--- a/lib/Settings/Personal.php
+++ b/lib/Settings/Personal.php
@@ -22,27 +22,16 @@
 
 namespace OCA\RiotChat\Settings;
 
+use OCA\RiotChat\AppInfo\Application;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IConfig;
 use OCP\Settings\ISettings;
 
 class Personal implements ISettings {
-	private $config;
-	protected $appName;
 
-	public function __construct(
-		string $appName,
-		IConfig $config
-	) {
-		$this->appName = $appName;
-		$this->config = $config;
-	}
 
 	public function getForm() {
-		$parameters = [
-			'appName' => $this->appName,
-		];
-		return new TemplateResponse($this->appName, 'settings/personal', $parameters, '');
+		return new TemplateResponse(Application::APP_ID, 'settings/personal');
 	}
 
 	public function getSection() {
diff --git a/lib/Settings/ShareAdmin.php b/lib/Settings/ShareAdmin.php
index fa04c692..bb4d0c4c 100644
--- a/lib/Settings/ShareAdmin.php
+++ b/lib/Settings/ShareAdmin.php
@@ -52,6 +52,7 @@ public function getForm() {
 		$this->initialStateService->provideInitialState(Application::APP_ID, 'share_domain', $this->getAppValue('share_domain', $this->config->getSystemValue('trusted_domains')[0]));
 		$this->initialStateService->provideInitialState(Application::APP_ID, 'share_prefix', $this->getAppValue('share_prefix'));
 		$this->initialStateService->provideInitialState(Application::APP_ID, 'share_suffix', $this->getAppValue('share_suffix'));
+
 		return new TemplateResponse(Application::APP_ID, 'settings/share-admin');
 	}
 
diff --git a/src/elementAdminSettings.js b/src/adminSettings.js
similarity index 85%
rename from src/elementAdminSettings.js
rename to src/adminSettings.js
index 79080c33..a8720dd8 100644
--- a/src/elementAdminSettings.js
+++ b/src/adminSettings.js
@@ -21,7 +21,7 @@
  */
 
 import Vue from 'vue';
-import ElementAdminSettings from "./components/settings/ElementAdminSettings";
+import AdminSettings from "./components/settings/AdminSettings";
 
 document.addEventListener('DOMContentLoaded', main);
 
@@ -31,7 +31,7 @@ function main () {
     Vue.prototype.OC = window.OC;
     Vue.prototype.OCA = window.OCA;
 
-    const View = Vue.extend(ElementAdminSettings);
+    const View = Vue.extend(AdminSettings);
     const view = new View();
-    view.$mount('#riotchat-element-admin-settings');
+    view.$mount('#riotchat-admin-settings');
 }
diff --git a/src/components/settings/ElementAdminSettings.vue b/src/components/settings/AdminSettings.vue
similarity index 100%
rename from src/components/settings/ElementAdminSettings.vue
rename to src/components/settings/AdminSettings.vue
diff --git a/src/components/settings/PersonalSettings.vue b/src/components/settings/PersonalSettings.vue
new file mode 100644
index 00000000..07c10d27
--- /dev/null
+++ b/src/components/settings/PersonalSettings.vue
@@ -0,0 +1,131 @@
+<!--
+  - @copyright Copyright (c) 2021 Sorunome <mail@sorunome.de>
+  - @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
+  - @copyright Copyright (c) 2020 Samuel Llamzon
+  -
+  - @author Sorunome <mail@sorunome.de>
+  -
+  - @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="section">
+        <SettingsSection
+            :title="t('riotchat', 'Matrix Login')"
+            :description="t('riotchat', 'Log in to your Matrix Account')"
+        >
+            <form @submit="login">
+                <label
+                    ref="matrix_username"
+                    for="matrix_username"
+                >{{ t('riotchat', 'Matrix Username:') }}</label>
+                <input
+                    id="matrix_username"
+                    v-model="matrix_username"
+                    type="text"
+                >
+                <br>
+                <label
+                    ref="matrix_password"
+                    for="matrix_password"
+                >{{ t('riotchat', 'Matrix Password:') }}</label>
+                <input
+                    id="matrix_password"
+                    v-model="matrix_password"
+                    type="text"
+                >
+                <input type="submit" value="login">
+                <br>
+            </form>
+            <template v-if="loggedIn">
+                <p>{{ currentlyLoggedInMessage }}</p>
+                <input type="button" @submit="logout">
+            </template>
+        </SettingsSection>
+	</div>
+</template>
+
+<script>
+import Axios from '@nextcloud/axios';
+import { showError, showSuccess } from '@nextcloud/dialogs';
+import { generateUrl } from '@nextcloud/router';
+import { loadState } from '@nextcloud/initial-state';
+import { SettingsSection, Tooltip } from '@nextcloud/vue';
+
+export default {
+	name: "PersonalSettings",
+	components: {
+		SettingsSection,
+	},
+	directives: {
+		Tooltip,
+	},
+	data() {
+		return {
+		    // Form inputs
+            "matrix_username": "",
+            "matrix_password": "",
+
+            // Data
+            "loggedIn": false,
+            "currentUsername": "",
+		};
+	},
+    computed: {
+	    currentlyLoggedInMessage() {
+	        return this.t('riotchat', 'Currently logged in as {username}', {
+	            username: this.currentUsername,
+            });
+        }
+    },
+	methods: {
+		login () {
+            const url = generateUrl('apps/riotchat/share/login');
+            Axios.post(
+                url,
+                {
+                    username: this.username,
+                    password: this.password,
+                }
+            ).then(() => {
+                showSuccess(t('riotchat', 'Successfully logged into Matrix account'));
+                this.whoAmI();
+            }).catch(() => {
+                showSuccess(t('riotchat', 'Failed to login to Matrix account. Are your account details correct?'));
+            });
+        },
+        logout () {
+		    const url = generateUrl('apps/riotchat/share/logout');
+		    Axios.post(url).then(this.whoAmI).catch(() => {
+		       showError(t('riotchat', 'Failed to logout of Matrix account.'));
+            });
+        },
+        whoAmI () {
+		    const url = generateUrl('apps/riotchat/share/whoami');
+		    Axios.get(url).then((res) => {
+		        this.loggedIn = res.data.logged_in;
+		        this.currentUsername = res.data.user_id;
+            }).catch(() => {
+                showError(t('riotchat', 'Could not load user info. Please reload the page.'));
+            });
+        }
+	},
+    mounted () {
+	    this.whoAmI();
+    },
+}
+</script>
diff --git a/src/components/settings/ShareAdminSettings.vue b/src/components/settings/ShareAdminSettings.vue
index 48f8ff4c..53f2660d 100644
--- a/src/components/settings/ShareAdminSettings.vue
+++ b/src/components/settings/ShareAdminSettings.vue
@@ -1,6 +1,6 @@
 <!--
   - @copyright Copyright (c) 2021 Sorunome <mail@sorunome.de>
-  - @copyright Copyright (c) 2020 Gary Kim <gary@garykim.dev>
+  - @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
   - @copyright Copyright (c) 2020 Samuel Llamzon
   -
   - @author Sorunome <mail@sorunome.de>
@@ -24,43 +24,43 @@
 
 <template>
 	<div>
-		<SettingsSection
-			:title="t('roitchat', 'Matrix Sharing')"
-			:description="t('riotchat', 'Configure how to share things into matrix.')"
-		>
-			<label
-				ref="share_domain"
-				for="share_domain"
-			>{{ t('riotchat', 'Domain:') }}</label>
-			<input
-				id="share_domain"
-				v-model="share_domain"
-				type="text"
-				@change="updateSetting('share_domain')"
-			>
-			<br>
-			<label
-				ref="share_prefix"
-				for="share_prefix"
-			>{{ t('riotchat', 'Prefix:') }}</label>
-			<input
-				id="share_prefix"
-				v-model="share_prefix"
-				type="text"
-				@change="updateSetting('share_prefix')"
-			>
-			<br>
-			<label
-				ref="share_suffix"
-				for="share_suffix"
-			>{{ t('riotchat', 'Suffix:') }}</label>
-			<input
-				id="share_suffix"
-				v-model="share_suffix"
-				type="text"
-				@change="updateSetting('share_suffix')"
-			>
-		</SettingsSection>
+        <SettingsSection
+            :title="t('riotchat', 'Matrix Sharing')"
+            :description="t('riotchat', 'Configure how to share things into matrix.')"
+        >
+            <label
+                ref="share_domain"
+                for="share_domain"
+            >{{ t('riotchat', 'Domain:') }}</label>
+            <input
+                id="share_domain"
+                v-model="share_domain"
+                type="text"
+                @change="updateSetting('share_domain')"
+            >
+            <br>
+            <label
+                ref="share_prefix"
+                for="share_prefix"
+            >{{ t('riotchat', 'Prefix:') }}</label>
+            <input
+                id="share_prefix"
+                v-model="share_prefix"
+                type="text"
+                @change="updateSetting('share_prefix')"
+            >
+            <br>
+            <label
+                ref="share_suffix"
+                for="share_suffix"
+            >{{ t('riotchat', 'Suffix:') }}</label>
+            <input
+                id="share_suffix"
+                v-model="share_suffix"
+                type="text"
+                @change="updateSetting('share_suffix')"
+            >
+        </SettingsSection>
 	</div>
 </template>
 
@@ -81,9 +81,9 @@ export default {
 	},
 	data() {
 		return {
-			"share_domain": loadState('riotchat', 'share_domain'),
-			"share_prefix": loadState('riotchat', 'share_prefix'),
-			"share_suffix": loadState('riotchat', 'share_suffix'),
+            "share_domain": loadState('riotchat', 'share_domain'),
+            "share_prefix": loadState('riotchat', 'share_prefix'),
+            "share_suffix": loadState('riotchat', 'share_suffix'),
 		};
 	},
 	methods: {
@@ -98,17 +98,9 @@ export default {
             Axios.put(generateUrl(`apps/riotchat/settings/${setting}`), {
                 value,
             }).then(() => {
-                if (settingName === 'custom_json') {
-                    showSuccess(t('riotchat', 'Custom config has been set'));
-                } else {
-                    showSuccess(t('riotchat', '{settingName} has been set to {value}', { settingName, value }));
-                }
+                showSuccess(t('riotchat', '{settingName} has been set to {value}', { settingName, value }));
             }).catch(() => {
-                if (settingName === 'custom_json') {
-                    showSuccess(t('riotchat', 'Custom config could not be set. Try reloading the page.'));
-                } else {
-                    showError(t('riotchat', '{settingName} could not be set. Try reloading the page.', { settingName }));
-                }
+                showError(t('riotchat', '{settingName} could not be set. Try reloading the page.', { settingName }));
             });
         },
 
diff --git a/src/personalSettings.js b/src/personalSettings.js
new file mode 100644
index 00000000..a3120a00
--- /dev/null
+++ b/src/personalSettings.js
@@ -0,0 +1,37 @@
+/**
+ * @copyright Copyright (c) 2020-2021 Gary Kim <gary@garykim.dev>
+ *
+ * @author Gary Kim <gary@garykim.dev>
+ *
+ * @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 PersonalSettings from "./components/settings/PersonalSettings";
+
+document.addEventListener('DOMContentLoaded', main);
+
+function main () {
+    Vue.prototype.t = t;
+    Vue.prototype.n = n;
+    Vue.prototype.OC = window.OC;
+    Vue.prototype.OCA = window.OCA;
+
+    const View = Vue.extend(PersonalSettings);
+    const view = new View();
+    view.$mount('#riotchat-personal-settings');
+}
diff --git a/templates/settings/admin.php b/templates/settings/admin.php
new file mode 100644
index 00000000..ce41d1d4
--- /dev/null
+++ b/templates/settings/admin.php
@@ -0,0 +1,5 @@
+<?php
+script('riotchat', 'adminSettings');
+?>
+
+<div id="riotchat-admin-settings"></div>
diff --git a/templates/settings/element-admin.php b/templates/settings/element-admin.php
deleted file mode 100644
index 7a30f4ba..00000000
--- a/templates/settings/element-admin.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<?php
-script('riotchat', 'elementAdminSettings');
-?>
-
-<div id="riotchat-element-admin-settings"></div>
diff --git a/templates/settings/personal.php b/templates/settings/personal.php
index b084b17b..dcb43915 100644
--- a/templates/settings/personal.php
+++ b/templates/settings/personal.php
@@ -1,22 +1,6 @@
 <?php
-/** @var \OCP\IL10N $l */
-/** @var array $_ */
-script($_['appName'], 'settings-personal');
-style($_['appName'], 'settings-personal');
+script('riotchat', 'personal-settings');
 ?>
 
-<div id="matrixSettings" class="section" data-appname="<?php p($appName) ?>">
-	<h2>
-		<?php p($l->t('Matrix Account')); ?>
-	</h2>
-	<p id="matrixSettingsLoginForm" style="display:none;">
-		<?php p($l->t('Log into your matrix account')); ?>:<br />
-		<?php p($l->t('Username')); ?>: <input type="text" id="matrixSettingsLoginUsername" /><br />
-		<?php p($l->t('Password')); ?>: <input type="password" id="matrixSettingsLoginPassword" /><br />
-		<input id="matrixSettingsLoginButton" type="submit" value="Login" />
-	</p>
-	<p id="matrixSettingsLogoutForm" style="display:none;">
-		<?php p($l->t('Currently logged in as')); ?> <strong id="matrixSettingsUserId"></strong>.<br />
-		<input id="matrixSettingsLogoutButton" type="submit" value="Logout" />
-	</p>
+<div id="riotchat-personal-settings" class="section">
 </div>
diff --git a/webpack.config.js b/webpack.config.js
index 3c6e1228..2f1d623f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,9 +5,8 @@ const webpack = require('webpack');
 
 module.exports = {
     entry: {
-        elementAdminSettings: path.join(__dirname, 'src', 'elementAdminSettings.js'),
-        shareAdminSettings: path.join(__dirname, 'src', 'shareAdminSettings.js'),
-		main: path.join(__dirname, 'src', 'main.js'),
+        adminSettings: path.join(__dirname, 'src', 'adminSettings.js'),
+        main: path.join(__dirname, 'src', 'main.js'),
     },
     output: {
         path: path.join(__dirname, 'js'),