diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/audon-fe/src/App.vue b/audon-fe/src/App.vue
index 2fa41c1..ebd7d72 100644
--- a/audon-fe/src/App.vue
+++ b/audon-fe/src/App.vue
@@ -4,12 +4,13 @@ import { RouterView } from 'vue-router'
 
 <template>
   <v-app class="fill-height">
-    <v-system-bar :height="40">
+    <v-system-bar window>
       <v-row>
         <v-col class="text-center">
           <h2>Audon</h2>
         </v-col>
       </v-row>
+      <div style="position:fixed">v0.1.0-dev</div>
     </v-system-bar>
     <v-main>
       <v-container class="fill-height">
diff --git a/audon-fe/src/router/index.js b/audon-fe/src/router/index.js
index 6ea4aa4..02b8e0d 100644
--- a/audon-fe/src/router/index.js
+++ b/audon-fe/src/router/index.js
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
-import CreateView from "../views/CreateView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,7 +14,7 @@ const router = createRouter({
       path: "/about",
       name: "about",
       meta: {
-        // noauth: true
+        noauth: true
       },
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
@@ -33,7 +32,7 @@ const router = createRouter({
     {
       path: "/create",
       name: "create",
-      component: CreateView,
+      component: () => import("../views/CreateView.vue"),
     },
   ],
 });
diff --git a/audon-fe/src/views/CreateView.vue b/audon-fe/src/views/CreateView.vue
index 8222b50..834b4a6 100644
--- a/audon-fe/src/views/CreateView.vue
+++ b/audon-fe/src/views/CreateView.vue
@@ -1,15 +1,18 @@
 <script>
 import { mdiArrowLeft, mdiMagnify, mdiClose, mdiPlus } from "@mdi/js";
 import { useVuelidate } from "@vuelidate/core";
+import { useMastodonStore } from "../stores/mastodon"
 import { helpers, required } from "@vuelidate/validators";
 import { debounce, some, map } from "lodash-es";
 import { login } from "masto";
 import { webfinger } from "../assets/utils";
+import axios from "axios";
 
 export default {
   setup() {
     return {
       v$: useVuelidate(),
+      donStore: useMastodonStore()
     };
   },
   created() {
@@ -45,6 +48,7 @@ export default {
         timeout: 5000,
         colour: "",
       },
+      isSubmissionLoading: false,
     };
   },
   validations() {
@@ -64,6 +68,7 @@ export default {
   watch: {
     searchQuery(val) {
       this.isCandiadateLoading = false;
+      this.cohostSearch.cancel();
       if (!val) return;
       if (some(this.cohosts, { finger: val })) {
         this.searchError.message = "すでに追加済みです";
@@ -71,6 +76,9 @@ export default {
         this.searchError.enabled = true;
         return;
       }
+      if (val === this.donStore.myWebfinger) {
+        return;
+      }
       this.isCandiadateLoading = true;
       this.cohostSearch(val);
     },
@@ -85,7 +93,10 @@ export default {
       }
       try {
         const url = new URL(`https://${finger[1]}`);
-        const client = await login({ url: url.toString(), disableVersionCheck: true });
+        const client = await login({
+          url: url.toString(),
+          disableVersionCheck: true,
+        });
         const user = await client.accounts.lookup({ acct: finger[0] });
         user.finger = webfinger(user);
         this.searchResult = user;
@@ -105,6 +116,30 @@ export default {
       this.searchQuery = "";
     },
     webfinger,
+    async onSubmit() {
+      const isFormCorrect = await this.v$.$validate();
+      if (!isFormCorrect) {
+        return;
+      }
+      const payload = {
+        title: this.title,
+        description: this.description,
+        cohosts: map(this.cohosts, (u) => ({
+          remote_id: u.acct,
+          remote_url: u.url,
+        })),
+      };
+      try {
+        const resp = await axios.post("/api/room", payload);
+        if (resp.status === 201) {
+          // TODO: redirect to the created room
+        }
+      } catch (error) {
+        this.searchError.message = `Error: ${error}`
+        this.searchError.colour = "error"
+        this.searchError.enabled = true
+      }
+    },
   },
 };
 </script>
@@ -123,7 +158,7 @@ export default {
       >
         {{ searchError.message }}
       </v-snackbar>
-      <v-card>
+      <v-card :loading="isSubmissionLoading">
         <v-card-title class="text-center">部屋を新規作成</v-card-title>
         <v-card-text>
           <v-form>
@@ -237,7 +272,7 @@ export default {
           </v-form>
         </v-card-text>
         <v-card-actions>
-          <v-btn block color="indigo" variant="flat" >
+          <v-btn block color="indigo" @click="onSubmit" variant="flat">
             作成
           </v-btn>
         </v-card-actions>
diff --git a/audon-fe/src/views/RoomView.vue b/audon-fe/src/views/RoomView.vue
new file mode 100644
index 0000000..ea91700
--- /dev/null
+++ b/audon-fe/src/views/RoomView.vue
@@ -0,0 +1,8 @@
+<script>
+</script>
+
+<template>
+<main>
+
+</main>
+</template>
diff --git a/room.go b/room.go
index 5a8eab9..c323414 100644
--- a/room.go
+++ b/room.go
@@ -83,10 +83,10 @@ func createRoomHandler(c echo.Context) error {
 	room.RoomID = canonic()
 
 	// if cohosts are already registered, retrieve their data from DB
-	for i, cohost := range room.CoHost {
+	for i, cohost := range room.CoHosts {
 		cohostUser, err := findUserByRemote(c.Request().Context(), cohost.RemoteID, cohost.RemoteURL)
 		if err == nil {
-			room.CoHost[i] = cohostUser
+			room.CoHosts[i] = cohostUser
 		}
 	}
 
diff --git a/schema.go b/schema.go
index cbb1d26..e407bd5 100644
--- a/schema.go
+++ b/schema.go
@@ -27,10 +27,10 @@ type (
 
 	Room struct {
 		RoomID        string       `bson:"room_id" json:"room_id" validate:"required,printascii"`
-		Title         string       `bson:"title" json:"title" validate:"required,printascii|multibyte"`
-		Description   string       `bson:"description" json:"description" validate:"printascii|multibyte"`
+		Title         string       `bson:"title" json:"title" validate:"required,max=100,printascii|multibyte"`
+		Description   string       `bson:"description" json:"description" validate:"max=500,printascii|multibyte"`
 		Host          *AudonUser   `bson:"host" json:"host"`
-		CoHost        []*AudonUser `bson:"cohost" json:"cohost,omitempty"`
+		CoHosts       []*AudonUser `bson:"cohost" json:"cohosts,omitempty"`
 		FollowingOnly bool         `bson:"following_only" json:"following_only"`
 		FollowerOnly  bool         `bson:"follower_only" json:"follower_only"`
 		MutualOnly    bool         `bson:"mutual_only" json:"mutual_only"`
@@ -59,7 +59,7 @@ func (r *Room) IsCoHost(u *AudonUser) bool {
 		return false
 	}
 
-	for _, cohost := range r.CoHost {
+	for _, cohost := range r.CoHosts {
 		if cohost.Equal(u) {
 			return true
 		}