diff --git a/frontend/components/FormProjectCreation.vue b/frontend/components/FormProjectCreation.vue
new file mode 100644
index 00000000..268e9f11
--- /dev/null
+++ b/frontend/components/FormProjectCreation.vue
@@ -0,0 +1,100 @@
+<template>
+  <v-card>
+    <v-card-title class="grey lighten-2">
+      Create Project
+    </v-card-title>
+    <v-container grid-list-sm>
+      <v-layout wrap>
+        <v-flex xs12>
+          <v-form
+            ref="form"
+            v-model="valid"
+          >
+            <v-text-field
+              v-model="name"
+              :rules="nameRules"
+              label="Project name"
+              prepend-icon="label"
+              required
+              autofocus
+            />
+            <v-text-field
+              v-model="description"
+              :rules="nameRules"
+              label="Description"
+              prepend-icon="label"
+              required
+            />
+            <v-select
+              v-model="projectType"
+              :items="projectTypes"
+              :rules="[v => !!v || 'Type is required']"
+              label="projectType"
+              prepend-icon="mdi-keyboard"
+              required
+            />
+          </v-form>
+        </v-flex>
+      </v-layout>
+    </v-container>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        class="text-capitalize"
+        text
+        color="primary"
+        @click="cancel"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        :disabled="!valid"
+        class="text-none"
+        text
+        @click="createProject"
+      >
+        Add Project
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import ProjectService from '~/services/project.service'
+
+export default {
+  data: () => ({
+    valid: true,
+    name: '',
+    description: '',
+    projectType: null,
+    projectTypes: [
+      'Text Classification',
+      'Sequence Labeling',
+      'Sequence to sequence'
+    ], // Todo: Get project types from backend server.
+    nameRules: [
+      v => !!v || 'Name is required'
+    ]
+  }),
+
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+
+    async createProject() {
+      const data = {
+        name: this.name,
+        description: this.description,
+        project_type: this.projectType
+      }
+      if (this.$refs.form.validate()) {
+        const response = await ProjectService.createProject(data)
+        this.$refs.form.reset()
+        this.$emit('create-project', response)
+      }
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/index.vue b/frontend/pages/projects/index.vue
index 770cc3e1..e1d0217a 100644
--- a/frontend/pages/projects/index.vue
+++ b/frontend/pages/projects/index.vue
@@ -13,46 +13,16 @@
               <v-btn
                 class="mb-2 text-capitalize"
                 color="primary"
-                @click="openAddModal"
+                @click="dialog=true"
               >
                 Add Project
               </v-btn>
-              <Modal
-                ref="childDialogue"
-                :title="addModal.title"
-                :button="addModal.button"
-                @agree="createProject"
+              <v-dialog
+                v-model="dialog"
+                width="800px"
               >
-                <v-form
-                  ref="form"
-                  v-model="valid"
-                  lazy-validation
-                >
-                  <v-text-field
-                    v-model="newProject.name"
-                    :rules="nameRules"
-                    label="Project name"
-                    prepend-icon="label"
-                    required
-                    autofocus
-                  />
-                  <v-text-field
-                    v-model="newProject.description"
-                    :rules="nameRules"
-                    label="Description"
-                    prepend-icon="label"
-                    required
-                  />
-                  <v-select
-                    v-model="newProject.project_type"
-                    :items="projectTypes"
-                    :rules="[v => !!v || 'Type is required']"
-                    label="projectType"
-                    prepend-icon="mdi-keyboard"
-                    required
-                  />
-                </v-form>
-              </Modal>
+                <form-project-creation @cancel="dialog=false" @create-project="createProject" />
+              </v-dialog>
               <v-btn
                 class="mb-2 ml-2 text-capitalize"
                 outlined
@@ -105,34 +75,21 @@
 
 <script>
 import Modal from '~/components/Modal'
+import FormProjectCreation from '~/components/FormProjectCreation'
 import ProjectService from '~/services/project.service'
 
 export default {
   layout: 'projects',
   components: {
-    Modal
+    Modal,
+    FormProjectCreation
   },
   data: () => ({
     dialog: false,
-    valid: true,
     search: '',
     selected: [],
     selectedUser: null,
-    projectTypes: [
-      'Text Classification',
-      'Sequence Labeling',
-      'Sequence to sequence'
-    ], // Todo: Get project types from backend server.
     projects: [],
-    newProject: {
-      name: '',
-      description: '',
-      project_type: null
-    },
-    addModal: {
-      title: 'Add Project',
-      button: 'Add Project'
-    },
     removeModal: {
       title: 'Remove Project',
       button: 'Yes, remove'
@@ -151,9 +108,6 @@ export default {
         text: 'Type',
         value: 'project_type'
       }
-    ],
-    nameRules: [
-      v => !!v || 'Name is required'
     ]
   }),
 
@@ -162,14 +116,9 @@ export default {
   },
 
   methods: {
-    async createProject() {
-      const response = await ProjectService.createProject(this.newProject)
-      this.projects.unshift(response)
-      this.newProject = {
-        name: '',
-        description: '',
-        project_type: null
-      }
+    createProject(project) {
+      this.projects.unshift(project)
+      this.dialog = false
     },
     async deleteProject() {
       // Todo: bulk delete.
@@ -179,9 +128,6 @@ export default {
       }
       this.selected = []
     },
-    openAddModal() {
-      this.$refs.childDialogue.open()
-    },
     openRemoveModal() {
       this.$refs.removeDialogue.open()
     }
diff --git a/frontend/services/api.service.js b/frontend/services/api.service.js
index 160eacf4..86bf27bc 100644
--- a/frontend/services/api.service.js
+++ b/frontend/services/api.service.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-const baseURL = 'http://localhost:3000/v1' // Todo: change URL by development/staging/production.
+const baseURL = 'http://127.0.0.1:3000/v1' // Todo: change URL by development/staging/production.
 
 export default class ApiService {
   constructor() {