diff --git a/ui/src/App.vue b/ui/src/App.vue
index d0c0005..2f1c063 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router';
 import Separator from './components/ui/separator/Separator.vue';
-import Application from './components/application/ApplicationForm.vue';
 import Button from './components/ui/button/Button.vue';
+import Application from './pages/Application.vue';
 </script>
 
 <template>
@@ -14,7 +14,7 @@ import Button from './components/ui/button/Button.vue';
       <Button variant="link">Link</Button>
     </div>
     <Separator></Separator>
-     <Application></Application>
+    <Application></Application>
   </div>
 </template>
 
diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
new file mode 100644
index 0000000..fd069fd
--- /dev/null
+++ b/ui/src/api/application.ts
@@ -0,0 +1,55 @@
+export type ApplicationDto = Partial<{
+  age: number | string
+  name: string
+  playtime: number | string
+  hobbies: string
+  military: boolean
+  communities: string
+  joinReason: string
+  milsimAttraction: string
+  referral: string
+  steamProfile: string
+  timezone: string
+  canAttendSaturday: boolean
+  interests: string
+  aknowledgeRules: boolean
+}>
+
+type ApplicationFull = Partial<{
+  app: ApplicationDto,
+  messages: object[]
+}>
+
+const addr = "localhost:3000"
+
+export async function loadApplication(): Promise<ApplicationFull | null> {
+  const res = await fetch(`http://${addr}/me/application`)
+  if (res.status === 204) return null
+  if (!res.ok) throw new Error('Failed to load application')
+  const json = await res.json()
+  // Accept either the object at root or under `application`
+  return json;
+}
+
+export async function postApplication(val: any) {
+  await fetch(`http://${addr}/application`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(val),
+  })
+}
+
+export async function postChatMessage(val: any) {
+  
+  let output = {
+    message: val,
+    sender: 1,
+    timestamp: Date.now(),
+  }
+
+  await fetch(`http://${addr}/application/message`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(output),
+  })
+}
\ No newline at end of file
diff --git a/ui/src/components/application/ApplicationForm.vue b/ui/src/components/application/ApplicationForm.vue
index 7f993fa..7a41553 100644
--- a/ui/src/components/application/ApplicationForm.vue
+++ b/ui/src/components/application/ApplicationForm.vue
@@ -10,11 +10,10 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import Input from '@/components/ui/input/Input.vue';
-import Label from '@/components/ui/label/Label.vue';
 import Textarea from '@/components/ui/textarea/Textarea.vue';
 import { toTypedSchema } from '@vee-validate/zod';
 import { Form } from 'vee-validate';
-import { onMounted, readonly, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as z from 'zod';
 
 const formSchema = toTypedSchema(z.object({
@@ -36,22 +35,6 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-type ApplicationDto = Partial<{
-  age: number | string
-  name: string
-  playtime: number | string
-  hobbies: string
-  military: boolean
-  communities: string
-  joinReason: string
-  milsimAttraction: string
-  referral: string
-  steamProfile: string
-  timezone: string
-  canAttendSaturday: boolean
-  interests: string
-  aknowledgeRules: boolean
-}>
 
 const fallbackInitials = {
   military: false,
@@ -59,44 +42,23 @@ const fallbackInitials = {
   aknowledgeRules: false,
 }
 
+const props = defineProps<{
+  readOnly: boolean,
+  data: object,
+}>()
+
+const emit = defineEmits(['submit']);
+
 const initialValues = ref<Record<string, unknown> | null>(null);
-const readOnly = ref(false);
 
 async function onSubmit(val: any) {
-  if (readOnly.value) return // guard (shouldn't be visible anyway)
-  await fetch('http://localhost:3000/application', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(val),
-  })
+  emit('submit', val);
 }
 
-async function loadApplication(): Promise<ApplicationDto | null> {
-  const res = await fetch('http://localhost:3000/me/application')
-  if (res.status === 204) return null
-  if (!res.ok) throw new Error('Failed to load application')
-  const json = await res.json()
-  // Accept either the object at root or under `application`
-  return (json?.application ?? json) as ApplicationDto
-}
-
-onMounted(async () => {
-  try {
-    const data = await loadApplication()
-    if (data) {
-      // Optional: coerce/normalize incoming payload to field names/types if needed
-      initialValues.value = {
-        ...fallbackInitials, // ensure booleans exist even if API omits them
-        ...data,
-      }
-      readOnly.value = true;
-    } else {
-      // 204 or empty → use your preset three fields only
-      initialValues.value = { ...fallbackInitials }
-    }
-  } catch (e) {
-    console.error(e)
-    // On error, also fall back
+onMounted(() => {
+  if (props.data) {
+    initialValues.value = { ...props.data, ...fallbackInitials }
+  } else {
     initialValues.value = { ...fallbackInitials }
   }
 })
@@ -104,7 +66,7 @@ onMounted(async () => {
 
 <template>
   <Form v-if="initialValues" :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit"
-    class="space-y-6 max-w-3xl mx-auto my-20">
+    class="space-y-6">
     <!-- Age -->
     <FormField name="age" v-slot="{ value, handleChange }">
       <FormItem>
@@ -144,7 +106,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>What hobbies do you like to participate in outside of gaming?</FormLabel>
         <FormControl>
-          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -180,7 +143,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>Why do you want to join our community?</FormLabel>
         <FormControl>
-          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -191,7 +155,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>What attracts you to the Arma 3 milsim playstyle?</FormLabel>
         <FormControl>
-          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Textarea rows="4" class="resize-none" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -202,7 +167,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>Where did you hear about us? (If another member, who?)</FormLabel>
         <FormControl>
-          <Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Input placeholder="e.g., Reddit / Member: Alice" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -229,7 +195,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>What time zone are you in?</FormLabel>
         <FormControl>
-          <Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Input placeholder="e.g., AEST, EST, UTC+10" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -254,7 +221,8 @@ onMounted(async () => {
       <FormItem>
         <FormLabel>Which playstyles interest you?</FormLabel>
         <FormControl>
-          <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <Input placeholder="e.g., Rifleman; Medic; Pilot" :model-value="value" @update:model-value="handleChange"
+            :disabled="readOnly" />
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -275,7 +243,7 @@ onMounted(async () => {
       </FormItem>
     </FormField>
 
-    <div class="pt-2">
+    <div class="pt-2" v-if="!readOnly">
       <Button type="submit" :onClick="() => console.log('hi')" :disabled="readOnly">Submit Application</Button>
     </div>
   </Form>
diff --git a/ui/src/pages/Application.vue b/ui/src/pages/Application.vue
new file mode 100644
index 0000000..660876a
--- /dev/null
+++ b/ui/src/pages/Application.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import ApplicationChat from '@/components/application/ApplicationChat.vue';
+import ApplicationForm from '@/components/application/ApplicationForm.vue';
+import { onMounted, ref } from 'vue';
+import { loadApplication, postApplication, postChatMessage } from '@/api/application';
+
+const appData = ref<Record<string, unknown> | null>(null);
+const chatData = ref<object[]>([])
+const readOnly = ref<boolean>(false);
+const newApp = ref<boolean>(true);
+
+onMounted(async () => {
+    try {
+        const data = await loadApplication()
+        if (data) {
+            appData.value = data.app;
+            chatData.value = data.messages;
+            readOnly.value = true;
+        } else {
+            appData.value = {}
+            newApp.value = false;
+        }
+    } catch (e) {
+        console.error(e)
+    }
+})
+
+</script>
+
+<template>
+    <div class="max-w-3xl mx-auto my-20">
+        <ApplicationForm v-if="appData" :read-only="readOnly" :data="appData" @submit="(e) => { postApplication(e) }"
+            class="mb-7"></ApplicationForm>
+        <div v-if="newApp">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
+            <ApplicationChat :messages="chatData" @post="postChatMessage"></ApplicationChat>
+        </div>
+    </div>
+</template>
\ No newline at end of file