diff --git a/src/api/index.ts b/src/api/index.ts
index 17e082d..fc734ea 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -99,5 +99,5 @@ export async function getSites(): Promise<Site[]> {
 }
 
 export async function createSite(site: Site) {
-  return request<cSite>("/sites", { auth: true, method: HTTPMethod.POST });
+  return request<cSite>("/sites", { auth: true, method: HTTPMethod.POST }, site);
 }
diff --git a/src/api/types.ts b/src/api/types.ts
index 13e4541..8e1d705 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -12,7 +12,7 @@ export interface LoginResponse {
 
 export interface Site {
   default_prefix: string;
-  id: number;
+  id?: number;
   name: string;
 }
 
diff --git a/src/views/Sites.vue b/src/views/Sites.vue
index b739e36..9dc9c2a 100644
--- a/src/views/Sites.vue
+++ b/src/views/Sites.vue
@@ -35,29 +35,71 @@
     class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
   >
     <h1 class="font-hairline mb-6 text-center">New Site</h1>
-    <form>
+    <form @submit.prevent="createSite">
       <label
         >Name
-        <input type="text" placeholder="Name" />
+        <input
+          type="text"
+          class="text-black"
+          v-model="newSiteName"
+          placeholder="Name"
+        />
       </label>
       <label>
         Default Prefix
-        <input type="text" placeholder="Default Prefix" />
+        <input
+          type="text"
+          class="text-black"
+          v-model="newDefaultPrefix"
+          placeholder="Default Prefix"
+        />
       </label>
+      <button
+        class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
+        type="submit"
+      >
+        Create!
+      </button>
     </form>
   </div>
 </template>
 
 <script lang="ts">
-import { getSites, Site } from "../api";
+import {
+  getSites as apiGetSites,
+  Site,
+  createSite as apiCreateSite,
+} from "../api";
 import { ref } from "vue";
 
 export default {
   name: "Sites",
-  setup() {
+  async setup() {
     const sites = ref<Site[]>([]);
-    getSites().then((s) => void (sites.value = s));
-    return { sites };
+    async function getSites() {
+      apiGetSites().then((s) => void (sites.value = s));
+    }
+    await getSites();
+
+    const newSiteName = ref("");
+    const newDefaultPrefix = ref("");
+    async function createSite() {
+      try {
+        const site: Site = {
+          name: newSiteName.value,
+          default_prefix: newDefaultPrefix.value,
+        };
+        let newSite = await apiCreateSite(site);
+        console.log(newSite);
+        await getSites();
+        newSiteName.value = ""
+        newDefaultPrefix.value = ""
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    return { sites, newSiteName, newDefaultPrefix, createSite };
   },
 };
 </script>