diff --git a/src/app.vue b/src/app.vue
index d704522..c5b15f7 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -19,6 +19,7 @@ const isDrawerVisible = computed(() => store.settings.showNavDrawer === true);
 const drawerWidth = computed(() => store.settings.drawerLeftWidth);
 
 function onUpdateDrawerWidth(width: number) {
+	console.log(width);
 	// TODO: can we mutate?
 	store.settings = { ...store.settings, drawerLeftWidth: width };
 }
@@ -27,7 +28,7 @@ function onUpdateDrawerWidth(width: number) {
 <template>
 	<VApp>
 		<template v-if="!isLoggedIn">
-			<VOverlay absolute :opacity="1" :value="!isLoggedIn" :z-index="100">
+			<VOverlay :opacity="1" :value="!isLoggedIn">
 				<LoginForm />
 			</VOverlay>
 		</template>
@@ -39,15 +40,9 @@ function onUpdateDrawerWidth(width: number) {
 			<Prompt />
 
 			<ResizableDrawer
-				app
-				:card="false"
 				class="pa-0"
 				color="background darken-2"
-				:floating="true"
-				left
-				:right="false"
 				mini-variant-width="73"
-				stateless
 				:value="isDrawerVisible"
 				:width="drawerWidth"
 				@update:width="onUpdateDrawerWidth"
diff --git a/src/features/common/login-form.vue b/src/features/common/login-form.vue
index 62255fa..7e59b87 100644
--- a/src/features/common/login-form.vue
+++ b/src/features/common/login-form.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isNonEmptyString } from "@acdh-oeaw/lib";
 import { ref } from "vue";
 
 import LoadingSpinner from "@/features/ui/loading-spinner.vue";
@@ -6,8 +7,9 @@ import store from "@/store";
 
 const user = ref("");
 const password = ref("");
-const errorMessage = ref("");
+
 const isLoading = ref(false);
+const errorMessage = ref("");
 const isPasswordVisible = ref(false);
 const passwordInputElement = ref<HTMLInputElement | null>(null);
 
@@ -22,55 +24,59 @@ async function onSubmit() {
 
 	if (!success) {
 		errorMessage.value = "Falsches Passwort oder falscher Nutzername.";
-
-		if (passwordInputElement.value != null) {
-			passwordInputElement.value.select();
-		}
+		// @ts-expect-error FIXME: figure out what vuetify does with the ref
+		passwordInputElement.value?.$el.querySelector("input")?.select();
 	}
 }
+
+const validation = [
+	function required(value: string): boolean | string {
+		if (isNonEmptyString(value)) return true;
+		return "Bitte füllen Sie dieses Feld aus.";
+	},
+];
 </script>
 
 <template>
 	<VCard color="transparent" class="rounded-lg relative" :elevation="0" :width="300">
-		<VOverlay v-if="isLoading" absolute>
+		<VOverlay absolute :value="isLoading">
 			<LoadingSpinner color="white" :size="40" />
 		</VOverlay>
 
 		<VCardText>
-			<VForm @submit.prevent="onSubmit">
+			<VForm class="grid gap-2" @submit.prevent="onSubmit">
 				<VTextField
 					v-model="user"
+					aria-label="User name"
 					:autocomplete="false"
 					autofocus
-					class="input-no-stroke"
+					class="pt-0"
 					dark
 					flat
 					hide-details
 					name="username"
 					placeholder="User name"
-					required
+					:rules="validation"
 				/>
 
-				<VDivider />
-
 				<VTextField
 					ref="passwordInputElement"
 					v-model="password"
 					:append-icon="isPasswordVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+					aria-label="Password"
 					:autocomplete="false"
-					class="input-no-stroke mt-1 pt-0"
+					class="pt-0"
 					dark
 					flat
 					hide-details
 					name="password"
 					placeholder="Password"
-					required
-					style="box-shadow: inset 0 0 20px 20px hsl(0deg 0% 15%)"
+					:rules="validation"
 					:type="isPasswordVisible ? 'text' : 'password'"
 					@click:append="isPasswordVisible = !isPasswordVisible"
 				/>
 
-				<VBtn type="submit" block class="rounded-lg mt-3" :elevation="0">Login</VBtn>
+				<VBtn type="submit" block class="rounded-lg mt-2" :elevation="0">Login</VBtn>
 
 				<VAlert
 					class="mt-2"
diff --git a/src/features/issues/issues-board-card.vue b/src/features/issues/issue-board-card.vue
similarity index 100%
rename from src/features/issues/issues-board-card.vue
rename to src/features/issues/issue-board-card.vue
diff --git a/src/features/issues/issues-board.vue b/src/features/issues/issue-board.vue
similarity index 97%
rename from src/features/issues/issues-board.vue
rename to src/features/issues/issue-board.vue
index eaab8fc..cc94412 100644
--- a/src/features/issues/issues-board.vue
+++ b/src/features/issues/issue-board.vue
@@ -2,7 +2,7 @@
 import Draggable from "vuedraggable";
 
 import { type IssueLemma, type LemmaStatus } from "@/api";
-import IssuesBoardCard from "@/features/issues/issues-board-card.vue";
+import IssueBoardCard from "@/features/issues/issue-board-card.vue";
 import { useVuetify } from "@/lib/use-vuetify";
 import store from "@/store";
 
@@ -78,7 +78,7 @@ const selectedStyle = {
 							:tabindex="(columnIndex + 1) * 100 + itemIndex"
 							@mousedown="emit('select-lemma', item)"
 						>
-							<issues-board-card
+							<issue-board-card
 								:max-labels="store.settings.issueViewOptions.showLabels"
 								:show-editor="store.settings.issueViewOptions.showEditor"
 								:show-author="store.settings.issueViewOptions.showAuthor"
diff --git a/src/features/issues/issues-list-row.vue b/src/features/issues/issue-list-row.vue
similarity index 100%
rename from src/features/issues/issues-list-row.vue
rename to src/features/issues/issue-list-row.vue
diff --git a/src/features/issues/issues-list.vue b/src/features/issues/issue-list.vue
similarity index 96%
rename from src/features/issues/issues-list.vue
rename to src/features/issues/issue-list.vue
index 5f7ffcf..64b6143 100644
--- a/src/features/issues/issues-list.vue
+++ b/src/features/issues/issue-list.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Draggable from "vuedraggable";
 
-import IssuesListRow from "@/features/issues/issues-list-row.vue";
+import IssueListRow from "@/features/issues/issue-list-row.vue";
 import { useVuetify } from "@/lib/use-vuetify";
 import store from "@/store";
 import { type IssueLemma, type LemmaStatus } from "@/types/issue";
@@ -62,7 +62,7 @@ function onDragStart() {
 					@start="onDragStart"
 				>
 					<!-- <transition-group type="transition" :name="animate ? 'flip-list' : null"> -->
-					<issues-list-row
+					<issue-list-row
 						v-for="(item, itemIndex) in column.items"
 						:key="item.id"
 						v-ripple="false"
diff --git a/src/features/issues/issue-manager.vue b/src/features/issues/issue-manager.vue
index a177983..e667841 100644
--- a/src/features/issues/issue-manager.vue
+++ b/src/features/issues/issue-manager.vue
@@ -4,9 +4,9 @@ import { chain } from "lodash";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { type IssueLemma, type LemmaStatus } from "@/api";
+import IssueBoard from "@/features/issues/issue-board.vue";
 import IssueDetail from "@/features/issues/issue-details.vue";
-import IssuesBoard from "@/features/issues/issues-board.vue";
-import IssuesList from "@/features/issues/issues-list.vue";
+import IssueList from "@/features/issues/issue-list.vue";
 import ResizableDrawer from "@/features/ui/resizable-drawer.vue";
 import { getYear } from "@/lib/get-year";
 import store from "@/store";
@@ -530,7 +530,7 @@ onMounted(() => {
 		</ResizableDrawer>
 
 		<VMain class="fill-height rounded-lg">
-			<IssuesBoard
+			<IssueBoard
 				v-if="store.settings.issueLayout === 'board'"
 				:animate="animateLemmas"
 				class="fill-height"
@@ -543,7 +543,7 @@ onMounted(() => {
 				@update-column="onUpdateColumn"
 			/>
 
-			<IssuesList
+			<IssueList
 				v-if="store.settings.issueLayout === 'list'"
 				:animate="animateLemmas"
 				class="fill-height"
diff --git a/src/features/ui/loading-spinner.vue b/src/features/ui/loading-spinner.vue
index 358c5b0..cef190a 100644
--- a/src/features/ui/loading-spinner.vue
+++ b/src/features/ui/loading-spinner.vue
@@ -1,45 +1,48 @@
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class LoadingSpinner extends Vue {
-	@Prop({ default: "#333" }) color!: string;
-	@Prop({ default: 30 }) size!: number;
-
-	get cssProps() {
-		return {
-			"--loading-spinner-color": this.color,
-			"--loading-spinner-left": this.size / 2 - 1 + "px",
-			"--loading-spinner-top": this.size / 6 + "px",
-			"--loading-spinner-height": this.size / 5 + "px",
-			"--loading-spinner-width": this.size / 15 + "px",
-		};
-	}
-}
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		color?: string;
+		size?: number;
+	}>(),
+	{ color: "#333", size: 30 },
+);
+
+const style = computed(() => {
+	return {
+		"--loading-spinner-color": props.color,
+		"--loading-spinner-size": props.size + "px",
+		"--loading-spinner-left": props.size / 2 - 1 + "px",
+		"--loading-spinner-top": props.size / 6 + "px",
+		"--loading-spinner-height": props.size / 5 + "px",
+		"--loading-spinner-width": props.size / 15 + "px",
+	};
+});
 </script>
 
 <template>
-	<div
-		:style="{ paddingTop: size / 2 + 'px', width: size + 'px', height: size + 'px', ...cssProps }"
-		class="lds-spinner"
-	>
+	<div class="loading-spinner" :style="style">
 		<div v-for="i in 12" :key="i"></div>
 	</div>
 </template>
 
 <style scoped>
-.lds-spinner {
+.loading-spinner {
 	position: relative;
 	display: inline-block;
-	color: black;
+	width: var(--loading-spinner-size);
+	height: var(--loading-spinner-size);
+	padding-top: calc(var(--loading-spinner-size) / 2);
+	color: hsl(0deg 0% 0%);
 }
 
-.lds-spinner div {
+.loading-spinner div {
 	transform-origin: 50% 50%;
-	animation: lds-spinner 1.2s linear infinite;
+	animation: loading-spinner 1.2s linear infinite;
 }
 
-.lds-spinner div::after {
+.loading-spinner div::after {
 	content: " ";
 	position: absolute;
 	top: var(--loading-spinner-top);
@@ -51,67 +54,67 @@ export default class LoadingSpinner extends Vue {
 	background: var(--loading-spinner-color);
 }
 
-.lds-spinner div:nth-child(1) {
+.loading-spinner div:nth-child(1) {
 	transform: rotate(0deg);
 	animation-delay: -1.1s;
 }
 
-.lds-spinner div:nth-child(2) {
+.loading-spinner div:nth-child(2) {
 	transform: rotate(30deg);
 	animation-delay: -1s;
 }
 
-.lds-spinner div:nth-child(3) {
+.loading-spinner div:nth-child(3) {
 	transform: rotate(60deg);
 	animation-delay: -0.9s;
 }
 
-.lds-spinner div:nth-child(4) {
+.loading-spinner div:nth-child(4) {
 	transform: rotate(90deg);
 	animation-delay: -0.8s;
 }
 
-.lds-spinner div:nth-child(5) {
+.loading-spinner div:nth-child(5) {
 	transform: rotate(120deg);
 	animation-delay: -0.7s;
 }
 
-.lds-spinner div:nth-child(6) {
+.loading-spinner div:nth-child(6) {
 	transform: rotate(150deg);
 	animation-delay: -0.6s;
 }
 
-.lds-spinner div:nth-child(7) {
+.loading-spinner div:nth-child(7) {
 	transform: rotate(180deg);
 	animation-delay: -0.5s;
 }
 
-.lds-spinner div:nth-child(8) {
+.loading-spinner div:nth-child(8) {
 	transform: rotate(210deg);
 	animation-delay: -0.4s;
 }
 
-.lds-spinner div:nth-child(9) {
+.loading-spinner div:nth-child(9) {
 	transform: rotate(240deg);
 	animation-delay: -0.3s;
 }
 
-.lds-spinner div:nth-child(10) {
+.loading-spinner div:nth-child(10) {
 	transform: rotate(270deg);
 	animation-delay: -0.2s;
 }
 
-.lds-spinner div:nth-child(11) {
+.loading-spinner div:nth-child(11) {
 	transform: rotate(300deg);
 	animation-delay: -0.1s;
 }
 
-.lds-spinner div:nth-child(12) {
+.loading-spinner div:nth-child(12) {
 	transform: rotate(330deg);
 	animation-delay: 0s;
 }
 
-@keyframes lds-spinner {
+@keyframes loading-spinner {
 	0% {
 		opacity: 100%;
 	}
diff --git a/src/features/ui/resizable-drawer.vue b/src/features/ui/resizable-drawer.vue
index 9ef2152..1498bb2 100644
--- a/src/features/ui/resizable-drawer.vue
+++ b/src/features/ui/resizable-drawer.vue
@@ -1,118 +1,140 @@
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-
-@Component
-export default class ResizableDrawer extends Vue {
-	@Prop({ default: false }) value!: boolean;
-	@Prop({ default: false }) right!: boolean;
-	@Prop({ default: false }) card!: boolean;
-	@Prop({ default: false }) mini!: boolean;
-	@Prop({ default: false }) clipped!: boolean;
-	@Prop({ default: 250 }) minWidth!: number;
-	@Prop({ default: 300 }) width!: number;
-	@Prop({ default: true }) floating!: boolean;
-	@Prop() color!: string;
-
-	localWidth = this.width || 300;
-	transitionValues: { [selector: string]: string } = {};
-	maxWidth = 750;
-	isDragging = false;
-
-	@Watch("width")
-	onChangeWidthProp(w: number) {
-		this.localWidth = w;
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		card?: boolean;
+		clipped?: boolean;
+		color?: string;
+		floating?: boolean;
+		mini?: boolean;
+		minWidth?: number;
+		right?: boolean;
+		value?: boolean;
+		width?: number;
+	}>(),
+	{
+		card: false,
+		clipped: false,
+		floating: true,
+		mini: false,
+		minWidth: 250,
+		right: false,
+		value: false,
+		width: 300,
+	},
+);
+
+const emit = defineEmits<{
+	(event: "update:width", width: number): void;
+	(event: "close"): void;
+}>();
+
+// TODO:
+
+const localWidth = ref(props.width);
+const maxWidth = 750;
+const transitionValues = ref<{ [selector: string]: string }>({});
+const isDragging = ref(false);
+
+const cssVars = computed(() => ({ "--bg-color": props.color }));
+
+watch(
+	() => props.width,
+	(width) => {
+		localWidth.value = width;
+	},
+);
+
+function expandOrShrink() {
+	if (props.width === props.minWidth) {
+		localWidth.value = maxWidth;
+	} else if (props.width === maxWidth) {
+		localWidth.value = props.minWidth;
+	} else {
+		localWidth.value = maxWidth;
 	}
 
-	cssVars() {
-		return { "--bg-color": this.color };
-	}
-
-	expandOrShrink() {
-		if (this.width === this.minWidth) {
-			this.localWidth = this.maxWidth;
-		} else if (this.width === this.maxWidth) {
-			this.localWidth = this.minWidth;
-		} else {
-			this.localWidth = this.maxWidth;
-		}
-		this.$emit("update:width", this.localWidth);
-	}
+	emit("update:width", localWidth.value);
+}
 
-	disableUserSelect() {
-		document.body.style.pointerEvents = "none";
-		document.body.style.userSelect = "none";
-		document.body.style.webkitUserSelect = "none";
-	}
+function disableUserSelect() {
+	document.body.style.pointerEvents = "none";
+	document.body.style.userSelect = "none";
+	document.body.style.webkitUserSelect = "none";
+}
 
-	enableUserSelect() {
-		document.body.style.pointerEvents = "initial";
-		document.body.style.userSelect = "initial";
-		document.body.style.webkitUserSelect = "initial";
-	}
+function enableUserSelect() {
+	document.body.style.pointerEvents = "initial";
+	document.body.style.userSelect = "initial";
+}
 
-	disableTransitions(...selectors: Array<string>) {
-		selectors.forEach((s) => {
-			document.querySelectorAll(s).forEach((e) => {
-				if (e instanceof HTMLElement) {
-					// cache ’em
-					this.transitionValues[s] = e.style.transition;
-					// unset em
-					e.style.transition = "none";
-				}
-			});
+function disableTransitions(...selectors: Array<string>) {
+	selectors.forEach((s) => {
+		document.querySelectorAll(s).forEach((e) => {
+			if (e instanceof HTMLElement) {
+				// cache 'em
+				transitionValues.value[s] = e.style.transition;
+				// unset em
+				e.style.transition = "none";
+			}
 		});
-	}
+	});
+}
 
-	enableAllTransitions() {
-		Object.entries(this.transitionValues).forEach((e) => {
-			document.querySelectorAll(e[0]).forEach((el) => {
-				if (el instanceof HTMLElement) {
-					// give them their old value
-					el.style.transition = e[1];
-				}
-			});
+function enableAllTransitions() {
+	Object.entries(transitionValues.value).forEach((e) => {
+		document.querySelectorAll(e[0]).forEach((el) => {
+			if (el instanceof HTMLElement) {
+				// give them their old value
+				el.style.transition = e[1];
+			}
 		});
-	}
+	});
+}
 
-	startDrag() {
-		this.disableUserSelect();
-		this.disableTransitions(".nav-drawer", ".v-main", ".v-toolbar");
-		this.isDragging = true;
-		document.addEventListener("mousemove", this.drag);
-		document.addEventListener("mouseup", this.endDrag);
-	}
+function startDrag() {
+	disableUserSelect();
+	disableTransitions(".nav-drawer", ".v-main", ".v-toolbar");
+	isDragging.value = true;
+	document.addEventListener("mousemove", drag);
+	document.addEventListener("mouseup", endDrag);
+}
+
+function endDrag() {
+	isDragging.value = false;
+
+	enableUserSelect();
+	enableAllTransitions();
 
-	endDrag() {
-		this.isDragging = false;
-		this.enableUserSelect();
-		this.enableAllTransitions();
-		document.removeEventListener("mousemove", this.drag);
-		document.removeEventListener("mouseup", this.endDrag);
-		console.log(this.width, this.localWidth, this.minWidth);
-		// if it’s too big or too small, bounce back.
-		if (this.localWidth > this.maxWidth) {
-			this.localWidth = this.maxWidth;
-		} else if (this.localWidth < this.minWidth) {
-			this.localWidth = this.minWidth;
-		}
-		this.$emit("update:width", this.localWidth);
+	document.removeEventListener("mousemove", drag);
+	document.removeEventListener("mouseup", endDrag);
+
+	// if it's too big or too small, bounce back.
+	if (localWidth.value > maxWidth) {
+		localWidth.value = maxWidth;
+	} else if (localWidth.value < props.minWidth) {
+		localWidth.value = props.minWidth;
 	}
 
-	drag(e: MouseEvent) {
-		const intendedWidth = this.right ? document.body.clientWidth - e.pageX : e.pageX;
-		if (intendedWidth < this.minWidth) {
-			this.localWidth = intendedWidth - (intendedWidth - this.minWidth) / 2;
-		} else if (intendedWidth > this.maxWidth) {
-			this.localWidth = intendedWidth - (intendedWidth - this.maxWidth) / 2;
-		} else {
-			this.localWidth = intendedWidth;
-		}
+	emit("update:width", localWidth.value);
+}
+
+function drag(e: MouseEvent) {
+	const intendedWidth = props.right ? document.body.clientWidth - e.pageX : e.pageX;
+
+	if (intendedWidth < props.minWidth) {
+		localWidth.value = intendedWidth - (intendedWidth - props.minWidth) / 2;
+	} else if (intendedWidth > maxWidth) {
+		localWidth.value = intendedWidth - (intendedWidth - maxWidth) / 2;
+	} else {
+		localWidth.value = intendedWidth;
 	}
+}
 
-	handleInput(v: boolean) {
-		if (v === false) {
-			this.$emit("close");
-		}
+function onInput(v: boolean) {
+	if (v === false) {
+		emit("close");
 	}
 }
 </script>
@@ -134,7 +156,7 @@ export default class ResizableDrawer extends Vue {
 		:floating="floating"
 		:value="value"
 		app
-		@input="handleInput"
+		@input="onInput"
 	>
 		<!-- FIXME: a11y -->
 		<!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
diff --git a/src/lib/is-positive-integer.ts b/src/lib/is-positive-integer.ts
new file mode 100644
index 0000000..d37e7bc
--- /dev/null
+++ b/src/lib/is-positive-integer.ts
@@ -0,0 +1,3 @@
+export function isPositiveInteger(value: unknown): value is number {
+	return typeof value === "number" && Number.isSafeInteger(value) && value > 0;
+}
diff --git a/src/pages/issues/[id].vue b/src/pages/issues/[id].vue
index 3f658a2..f92d284 100644
--- a/src/pages/issues/[id].vue
+++ b/src/pages/issues/[id].vue
@@ -4,16 +4,13 @@ import { computed } from "vue";
 import { useRoute } from "vue-router/composables";
 
 import IssueManager from "@/features/issues/issue-manager.vue";
-
-interface Params {
-	id: number;
-}
+import { isPositiveInteger } from "@/lib/is-positive-integer";
 
 const route = useRoute();
 
-const params = computed<Params>(() => {
+const params = computed(() => {
 	const id = Number(route.params.id);
-	assert(Number.isSafeInteger(id) && id > 0);
+	assert(isPositiveInteger(id));
 	return { id };
 });
 </script>
diff --git a/src/store/index.ts b/src/store/index.ts
index 99e4ee4..3dfc18f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -75,23 +75,23 @@ class Store {
 		}
 	}
 
-	async logIn(user: string, pwd: string): Promise<boolean> {
+	async logIn(username: string, password: string): Promise<boolean> {
 		try {
 			const url = createUrl({ baseUrl: OpenAPI.BASE, pathname: "/auth/token/login" });
 
 			const data = (await request(url, {
 				method: "post",
-				body: { username: user, password: pwd },
+				body: { username, password },
 				responseType: "json",
 			})) as { auth_token: string };
 
-			await this.runCallbacks(this.loginCallbacks);
-			this.loginCallbacks = [];
-
 			OpenAPI.TOKEN = data.auth_token;
 			localStorage.setItem("token", data.auth_token);
 			this.isLoggedIn = true;
 
+			await this.runCallbacks(this.loginCallbacks);
+			this.loginCallbacks = [];
+
 			return true;
 		} catch (e) {
 			this.logOut();
diff --git a/src/styles/index.css b/src/styles/index.css
index 248bf52..3ec666a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -13,6 +13,7 @@ body .v-application .text-body-2 {
 
 body,
 .v-application {
+	background-color: var(--v-background-base) !important;
 	font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
 }
 
@@ -203,6 +204,30 @@ select::after {
 
 /** utilities */
 
+.grid {
+	display: grid;
+}
+
+.gap-1 {
+	gap: 4px;
+}
+
+.gap-2 {
+	gap: 8px;
+}
+
+.gap-4 {
+	gap: 16px;
+}
+
+.gap-6 {
+	gap: 24px;
+}
+
+.gap-8 {
+	gap: 32px;
+}
+
 .relative {
 	position: relative;
 }