diff --git a/package-lock.json b/package-lock.json
index 535f2bc..31f2fdb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primeuix/themes": "^2.0.3",
-        "@primevue/forms": "^4.5.4",
+        "@primevue/forms": "^4.5.5",
         "axios": "^1.13.6",
         "primeflex": "^4.0.0",
         "primeicons": "^7.0.0",
@@ -1595,19 +1595,35 @@
       }
     },
     "node_modules/@primevue/forms": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@primevue/forms/-/forms-4.5.4.tgz",
-      "integrity": "sha512-2TlD8oJEtb8vuKzY3jY0W+7NVBC/Qj0m57iWzpMUmGnEKg9sbQ2/ZiU1sTof710/liYgm4FneRTOYHIpVkiJNA==",
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@primevue/forms/-/forms-4.5.5.tgz",
+      "integrity": "sha512-LUeIt6oItwCZyBreQ7ycErE8aEjPmBWOTq1VPLhyaATcnzMBOZRIiwclaYk8s/tf5VYMqN9N4B80XnXoO7OdvQ==",
       "license": "MIT",
       "dependencies": {
         "@primeuix/forms": "^0.1.0",
         "@primeuix/utils": "^0.6.2",
-        "@primevue/core": "4.5.4"
+        "@primevue/core": "4.5.5"
       },
       "engines": {
         "node": ">=12.11.0"
       }
     },
+    "node_modules/@primevue/forms/node_modules/@primevue/core": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.5.tgz",
+      "integrity": "sha512-JpkXhq1ddc70JdsC3CC4dM+UbeeWuCW/8DpS9dNBfrOk824TLSlRlMEGFyVKqRMn5WPQvYLiy3xXfLQeNdSqhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@primevue/icons": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
diff --git a/package.json b/package.json
index 00b7990..30b76e5 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@primeuix/themes": "^2.0.3",
-    "@primevue/forms": "^4.5.4",
+    "@primevue/forms": "^4.5.5",
     "axios": "^1.13.6",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
diff --git a/src/Login.vue b/src/Login.vue
new file mode 100644
index 0000000..884e321
--- /dev/null
+++ b/src/Login.vue
@@ -0,0 +1,60 @@
+<template>
+<Form v-if="!userData.authenticated" v-slot="$form" :initialValues @submit="onFormSubmit">
+  <div class="flex flex-column">
+    <InputText name="username" type="text" placeholder="Username" fluid/>
+    <Password name="password" placeholder="Password" :feedback="false" fluid/>
+    <Button type="submit" label="Log In"/>
+  </div>
+</Form>
+
+<div v-if="userData.authenticated">
+  <h2>Logged in as: {{userData.username}}</h2>
+  <Button @click=logout() label="Log Out" fluid/>
+</div>
+</template>
+
+<style>
+</style>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue"
+import { Form } from '@primevue/forms'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Password from 'primevue/password';
+import axios from 'axios'
+
+const userData = ref({
+  username: "NONE",
+  authenticated: false
+})
+
+onMounted(() => {
+  axios.get('/api/auth/user').then((resp) => {
+    console.log(resp)
+    userData.value = resp.data
+  })
+})
+
+const initialValues = reactive({
+  username: '',
+  password: ''
+})
+
+function onFormSubmit(form) {
+  console.log(form)
+  const username = form.values.username
+  const password = form.values.password
+
+  axios.post('/api/auth/login', {username, password}).then((resp) => {
+    userData.value = resp.data
+  })
+}
+
+function logout() {
+  axios.post('/api/auth/logout').then((resp) => {
+    userData.value = resp.data
+  })
+}
+
+</script>
diff --git a/src/main.ts b/src/main.ts
index 3f2a97f..ba3f4f7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import Router from './Router.vue'
 import TableManager from './TableManager.vue'
 import TableEditor from './TableEditor.vue'
 import CreateTable from './CreateTable.vue'
+import Login from './Login.vue'
 import 'primeflex/primeflex.css'
 import ConfirmationService from 'primevue/confirmationservice'
 
@@ -13,6 +14,7 @@ const routes = [
   { name: 'home', path: '/', component: TableManager },
   { name: 'edit', path: '/edit/:id', component: TableEditor },
   { name: 'new', path: '/new', component: CreateTable },
+  { name: 'login', path: '/login', component: Login}
 ]
 
 const router = createRouter({