diff --git a/public/css/mango.css b/public/css/mango.css
index d7e6a65..2eae165 100644
--- a/public/css/mango.css
+++ b/public/css/mango.css
@@ -31,14 +31,6 @@
     cursor: pointer;
 }
 
-.uk-list li:not(.nopointer) {
-    cursor: pointer;
-}
-
-#scan-status {
-    cursor: auto;
-}
-
 .reader-bg {
     background-color: black;
 }
diff --git a/public/js/admin.js b/public/js/admin.js
index 5b6b29c..a3299cc 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -1,68 +1,55 @@
-$(() => {
-	const setting = loadThemeSetting();
-	$('#theme-select').val(capitalize(setting));
-	$('#theme-select').change((e) => {
-		const newSetting = $(e.currentTarget).val().toLowerCase();
-		saveThemeSetting(newSetting);
-		setTheme();
-	});
+const component = () => {
+	return {
+		progress: 1.0,
+		generating: false,
+		scanning: false,
+		scanTitles: 0,
+		scanMs: -1,
+		themeSetting: '',
 
-	getProgress();
-	setInterval(getProgress, 5000);
-});
+		init() {
+			this.getProgress();
+			setInterval(() => {
+				this.getProgress();
+			}, 5000);
 
-/**
- * Capitalize String
- *
- * @function capitalize
- * @param {string} str - The string to be capitalized
- * @return {string} The capitalized string
- */
-const capitalize = (str) => {
-	return str.charAt(0).toUpperCase() + str.slice(1);
+			const setting = loadThemeSetting();
+			this.themeSetting = setting.charAt(0).toUpperCase() + setting.slice(1);
+		},
+		themeChanged(event) {
+			const newSetting = $(event.currentTarget).val().toLowerCase();
+			saveThemeSetting(newSetting);
+			setTheme();
+		},
+		scan() {
+			if (this.scanning) return;
+			this.scanning = true;
+			this.scanMs = -1;
+			this.scanTitles = 0;
+			$.post(`${base_url}api/admin/scan`)
+				.then(data => {
+					this.scanMs = data.milliseconds;
+					this.scanTitles = data.titles;
+				})
+				.always(() => {
+					this.scanning = false;
+				});
+		},
+		generateThumbnails() {
+			if (this.generating) return;
+			this.generating = true;
+			this.progress = 0.0;
+			$.post(`${base_url}api/admin/generate_thumbnails`)
+				.then(() => {
+					this.getProgress()
+				});
+		},
+		getProgress() {
+			$.get(`${base_url}api/admin/thumbnail_progress`)
+				.then(data => {
+					this.progress = data.progress;
+					this.generating = data.progress > 0;
+				});
+		},
+	};
 };
-
-/**
- * Get the thumbnail generation progress from the API
- *
- * @function getProgress
- */
-const getProgress = () => {
-	$.get(`${base_url}api/admin/thumbnail_progress`)
-		.then(data => {
-			setProp('progress', data.progress);
-			const generating = data.progress > 0
-			setProp('generating', generating);
-		});
-};
-
-/**
- * Trigger the thumbnail generation
- *
- * @function generateThumbnails
- */
-const generateThumbnails = () => {
-	setProp('generating', true);
-	setProp('progress', 0.0);
-	$.post(`${base_url}api/admin/generate_thumbnails`)
-		.then(getProgress);
-};
-
-/**
- * Trigger the scan
- *
- * @function scan
- */
-const scan = () => {
-	setProp('scanning', true);
-	setProp('scanMs', -1);
-	setProp('scanTitles', 0);
-	$.post(`${base_url}api/admin/scan`)
-		.then(data => {
-			setProp('scanMs', data.milliseconds);
-			setProp('scanTitles', data.titles);
-		})
-		.always(() => {
-			setProp('scanning', false);
-		});
-}
diff --git a/src/views/admin.html.ecr b/src/views/admin.html.ecr
index a0959bf..587aaa7 100644
--- a/src/views/admin.html.ecr
+++ b/src/views/admin.html.ecr
@@ -1,21 +1,25 @@
-<ul class="uk-list uk-list-large uk-list-divider" id="root" x-data="{progress : 1.0, generating : false, scanTitles: 0, scanMs: -1, scanning : false}">
-  <li @click="location.href = '<%= base_url %>admin/user'">User Managerment</li>
-  <li :class="{'nopointer' : scanning}" @click="scan()">
-    <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
-    <div class="uk-align-right">
-      <div uk-spinner x-show="scanning"></div>
-      <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
-    </div>
+<ul class="uk-list uk-list-large uk-list-divider" x-data="component()" x-init="init()">
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/user">User Management</a></li>
+  <li>
+    <a class="uk-link-reset" @click="scan()">
+      <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
+      <div class="uk-align-right">
+        <div uk-spinner x-show="scanning"></div>
+        <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
+      </div>
+    </a>
   </li>
-  <li :class="{'nopointer' : generating}" @click="generateThumbnails()">
-    <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
-    <div class="uk-align-right">
-      <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
-    </div>
+  <li>
+    <a class="uk-link-reset" @click="generateThumbnails()">
+      <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
+      <div class="uk-align-right">
+        <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
+      </div>
+    </a>
   </li>
-  <li class="nopointer">
+  <li>
     <span>Theme</span>
-    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2">
+    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2" :val="themeSetting" @change="themeChanged($event)">
       <option>Dark</option>
       <option>Light</option>
       <option>System</option>