diff --git a/pages/auth/login.vue b/pages/auth/login.vue
index c2c60a5..7cfe029 100644
--- a/pages/auth/login.vue
+++ b/pages/auth/login.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { reactive } from "vue";
 	import { notification } from "ant-design-vue";
+
 	interface FormState {
 		username: string;
 		password: string;
@@ -15,23 +16,26 @@
 	useHead({
 		title: "Log In",
 	});
+	const loadRef = ref<boolean>(false);
 
 	const formState = reactive<FormState>({
 		username: "",
 		password: "",
 	});
-	const darkRef = inject<Ref<boolean>>("dark");
+	const darkRef = inject<Ref<boolean>>("dark")!;
 	const onFinish = async (values: any) => {
 		const { signIn } = useAuth();
 
 		try {
+			loadRef.value = true;
 			await signIn(values, { redirect: true, callbackUrl: "/" });
 			const { data } = useAuth();
-			darkRef.value = data.value.user.profile.nightMode;
-			if (darkRef.value) document.body.dataset.theme = "dark";
+			darkRef!.value = data.value?.user?.profile.nightMode || false;
+			if (darkRef!.value) document.body.dataset.theme = "dark";
 			await navigateTo("/");
 		} catch (e: any) {
 			if (e.data) {
+				loadRef.value = false;
 				notification["error"]({
 					message: h("div", { innerHTML: e.data.message }),
 				});
@@ -50,7 +54,7 @@
 		<a-form-item>
 			<a-row :justify="'center'" :align="'middle'">
 				<a-col>
-					<a-button data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
+					<a-button :loading="loadRef" data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
 				</a-col>
 			</a-row>
 		</a-form-item>