diff --git a/frontend/package.json b/frontend/package.json
index 7aefdb4..aaf3a4f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@primeuix/themes": "^1.0.1",
+    "@primevue/forms": "^4.3.3",
     "lucide-vue-next": "^0.487.0",
     "pinia": "^3.0.1",
     "primevue": "^4.3.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 0e9caa8..b0497aa 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -2,8 +2,53 @@
     <div class="Login">
       <h1>This is the Login Page</h1>
     </div>
+    <div class="card flex justify-center">
+        <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <FormField v-slot="$field" as="section" name="username" initialValue="" class="flex flex-col gap-2">
+                <InputText type="text" placeholder="Username" />
+                <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+            </FormField>
+            <FormField v-slot="$field" asChild name="password" initialValue="">
+                <section class="flex flex-col gap-2">
+                    <Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+                    <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+                </section>
+            </FormField>
+            <Button type="submit" severity="secondary" label="Submit" />
+        </Form>
+    </div>
+
+
+
+
   </template>
+
+  <script setup>
+  import { Form } from '@primevue/forms';
+  import { reactive } from 'vue';
+  import { zodResolver } from '@primevue/forms/resolvers/zod';
+  import { z } from 'zod';
+  import { useToast } from 'primevue/usetoast';
   
+  const toast = useToast();
+  
+  const resolver =  zodResolver(
+      z.object({
+          username: z.string().min(1, { message: 'Username is required.' }),
+          password: z.string().min(1, { message: 'Password is required.' })
+      })
+  );
+  
+  const onFormSubmit = ({ valid }) => {
+      if (valid) {
+          toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+      }
+  };
+  </script>
+
+
+
+
   <style>
   @media (min-width: 1024px) {
     .about {