diff --git a/api/src/routes/applications.ts b/api/src/routes/applications.ts
index e6327d9..e1c9394 100644
--- a/api/src/routes/applications.ts
+++ b/api/src/routes/applications.ts
@@ -10,6 +10,24 @@ import { assignUserToStatus } from '../services/statusService';
 import { Request, response, Response } from 'express';
 import { getUserRoles } from '../services/rolesService';
 
+//get CoC
+router.get('/coc', async (req: Request, res: Response) => {
+  const output = await fetch(`${process.env.DOC_HOST}/api/pages/714`, {
+    headers: {
+      Authorization: `Token ${process.env.DOC_TOKEN_ID}:${process.env.DOC_TOKEN_SECRET}`,
+    }
+  })
+
+  if (output.ok) {
+    const out = await output.json();
+    res.status(200).json(out.html);
+  } else {
+    console.error("Failed to fetch LOA policy from bookstack");
+    res.sendStatus(500);
+  }
+})
+
+
 // POST /application
 router.post('/', async (req, res) => {
   try {
@@ -283,20 +301,5 @@ router.post('/restart', async (req: Request, res: Response) => {
   }
 })
 
-// router.get('/coc', async (req: Request, res: Response) => {
-//   const output = await fetch(`${process.env.DOC_HOST}/api/pages/`, {
-//     headers: {
-//       Authorization: `Token ${process.env.DOC_TOKEN_ID}:${process.env.DOC_TOKEN_SECRET}`,
-//     }
-//   })
-
-//   if (output.ok) {
-//     const out = await output.json();
-//     res.status(200).json(out.html);
-//   } else {
-//     console.error("Failed to fetch LOA policy from bookstack");
-//     res.sendStatus(500);
-//   }
-// })
 
 module.exports = router;
diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts
index ca1b52b..ec05982 100644
--- a/ui/src/api/application.ts
+++ b/ui/src/api/application.ts
@@ -113,4 +113,20 @@ export async function restartApplication() {
   if (!res.ok) {
     console.error("Something went wrong restarting your application")
   }
+}
+
+export async function getCoC(): Promise<string> {
+  const res = await fetch(`${addr}/application/coc`, {
+    method: "GET",
+    credentials: 'include',
+  });
+  if (res.ok) {
+    const out = res.json();
+    if (!out) {
+      return null;
+    }
+    return out;
+  } else {
+    return null;
+  }
 }
\ No newline at end of file
diff --git a/ui/src/components/application/ApplicationForm.vue b/ui/src/components/application/ApplicationForm.vue
index eb1a85f..28ee1ad 100644
--- a/ui/src/components/application/ApplicationForm.vue
+++ b/ui/src/components/application/ApplicationForm.vue
@@ -13,10 +13,18 @@ import Input from '@/components/ui/input/Input.vue';
 import Textarea from '@/components/ui/textarea/Textarea.vue';
 import { toTypedSchema } from '@vee-validate/zod';
 import { Form } from 'vee-validate';
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import * as z from 'zod';
 import DateInput from '../form/DateInput.vue';
 import { ApplicationData } from '@shared/types/application';
+import Dialog from '../ui/dialog/Dialog.vue';
+import DialogTrigger from '../ui/dialog/DialogTrigger.vue';
+import DialogContent from '../ui/dialog/DialogContent.vue';
+import DialogHeader from '../ui/dialog/DialogHeader.vue';
+import DialogTitle from '../ui/dialog/DialogTitle.vue';
+import DialogDescription from '../ui/dialog/DialogDescription.vue';
+import { getCoC } from '@/api/application';
+import { startBrowserTracingPageLoadSpan } from '@sentry/vue';
 
 const regexA = /^https?:\/\/steamcommunity\.com\/id\/[A-Za-z0-9_]+\/?$/;
 const regexB = /^https?:\/\/steamcommunity\.com\/profiles\/\d+\/?$/;
@@ -61,7 +69,7 @@ async function onSubmit(val: any) {
   emit('submit', val);
 }
 
-onMounted(() => {
+onMounted(async () => {
   if (props.data !== null) {
     const parsed = typeof props.data === "string"
       ? JSON.parse(props.data)
@@ -71,8 +79,25 @@ onMounted(() => {
   } else {
     initialValues.value = { ...fallbackInitials };
   }
+
+  // CoCbox.value.innerHTML = await getCoC()
+  CoCString.value = await getCoC();
 })
 
+const showCoC = ref(false);
+const CoCbox = ref<HTMLElement>();
+const CoCString = ref<string>();
+
+async function onDialogToggle(state: boolean) {
+  showCoC.value = state;
+
+  if (state) {
+    await nextTick();
+    if (CoCbox.value && CoCString.value) {
+      CoCbox.value.innerHTML = CoCString.value;
+    }
+  }
+}
 
 </script>
 
@@ -273,7 +298,8 @@ onMounted(() => {
         <FormControl>
           <div class="flex items-center gap-2">
             <Checkbox :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
-            <span>By checking this box, you accept the <Button variant="link" class="p-0 h-min">Code of
+            <span>By checking this box, you accept the <Button variant="link" class="p-0 h-min"
+                @click="showCoC = true">Code of
                 Conduct</Button>.</span>
           </div>
         </FormControl>
@@ -286,5 +312,19 @@ onMounted(() => {
     <div class="pt-2" v-if="!readOnly">
       <Button type="submit" :onClick="() => console.log('hi')" :disabled="readOnly">Submit Application</Button>
     </div>
+
+    <Dialog :open="showCoC" @update:open="onDialogToggle">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Community Code of Conduct</DialogTitle>
+          <DialogDescription>
+            <div v-html="CoCString">
+
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+
   </Form>
 </template>
\ No newline at end of file