diff --git a/pages/login.vue b/pages/login.vue
new file mode 100644
index 0000000..a787bbd
--- /dev/null
+++ b/pages/login.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import useApiFetch from '../composables/useApiFetch';
+	interface FormState {
+		username: string;
+		password: string;
+	}
+	const formState = reactive<FormState>({
+		username: "",
+		password: ""
+	})
+	const onFinish = async (values: any) => {
+		await useApiFetch("/auth/login", {
+			method: "post",
+			body: values,
+		})
+	}
+</script>
+<template>
+	<a-form :model="formState" name="basic" :label-col="{span: 8}" autocomplete="off" @finish="onFinish">
+		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
+			<a-input v-model:value="formState.username"/>
+		</a-form-item>
+		<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
+			<a-input-password v-model:value="formState.password"/>
+		</a-form-item>
+		<a-form-item>
+			<a-button type="primary" html-type="submit">Log in</a-button>
+		</a-form-item>
+	</a-form>
+</template>
\ No newline at end of file