diff --git a/static/src/components/setting/ownership_setting.vue b/static/src/components/setting/ownership_setting.vue
index 2b1f9a4b..63dbd220 100644
--- a/static/src/components/setting/ownership_setting.vue
+++ b/static/src/components/setting/ownership_setting.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="stats-config row">
     <GigSpinner v-if="waiting" />
-    <div
-      class="col-md-12"
-      :style="waiting && 'opacity: 0.5'"
-    >
+    <div class="col-md-12" :style="waiting && 'opacity: 0.5'">
       <div class="form-group row">
         <div class="col-md-4">
           <p> Project Owner </p>
@@ -20,19 +17,11 @@
         <div class="col-md-8 pull-right">
           <div v-if="Object.keys(coowners).length">
             <p style="display: inline-block; word-break: normal; line-height: 35px;">
-              <span
-                v-for="u in coowners"
-                :key="u.name"
-                class=" label label-lg label-info"
-                style="display: inline-block"
-              >
+              <span v-for="u in coowners" :key="u.name" class=" label label-lg label-info"
+                style="display: inline-block">
                 {{ u.fullname }}
-                <i
-                  v-if="u.id!==owner.id"
-                  class="fa fa-times"
-                  aria-hidden="true"
-                  @click="removeCoowner($event, u.id)"
-                />
+                <i v-if="u.id !== owner.id" class="fa fa-times" aria-hidden="true"
+                  @click="removeCoowner($event, u.id)" />
               </span>
             </p>
           </div>
@@ -44,37 +33,18 @@
         </div>
         <div class="col-md-8 pull-right">
           <div class="input-group">
-            <input
-              v-model="coownerQuery"
-              type="text"
-              class="form-control input-sm"
-              placeholder="Try with full name or nick name"
-            >
+            <input v-model="coownerQuery" type="text" class="form-control input-sm"
+              placeholder="Try with full name or nick name">
             <span class="input-group-append">
-              <button
-                class="btn btn-sm btn-primary "
-                @click="searchCoowners"
-              >
+              <button class="btn btn-sm btn-primary " @click="searchCoowners">
                 <i class="fa fa-search" />
                 Search
               </button>
             </span>
           </div>
-          <div
-            v-if="coownerResult.length"
-            class="dropdown-content"
-          >
-            <div
-              class="scroll"
-              style="max-height: 150px;"
-            >
-              <div
-                v-for="u in coownerResult"
-                :key="u.id"
-                :value="u"
-                class="row"
-                @click="addCoowner($event, u)"
-              >
+          <div v-if="coownerResult.length" class="dropdown-content">
+            <div class="scroll" style="max-height: 150px;">
+              <div v-for="u in coownerResult" :key="u.id" :value="u" class="row" @click="addCoowner($event, u)">
                 <p> {{ u['fullname'] }} </p>
               </div>
             </div>
@@ -88,19 +58,11 @@
         <div class="col-md-8 pull-right">
           <div v-if="Object.keys(contacts).length">
             <p style="display: inline-block; word-break: normal; line-height: 35px;">
-              <span
-                v-for="u in contacts"
-                :key="u.name"
-                class=" label label-lg label-info"
-                style="display: inline-block"
-              >
+              <span v-for="u in contacts" :key="u.name" class=" label label-lg label-info"
+                style="display: inline-block">
                 {{ u.fullname }}
-                <i
-                  v-if="u.id!==owner.id"
-                  class="fa fa-times"
-                  aria-hidden="true"
-                  @click="removeContact($event, u.id)"
-                />
+                <i v-if="u.id !== owner.id" class="fa fa-times" aria-hidden="true"
+                  @click="removeContact($event, u.id)" />
               </span>
             </p>
           </div>
@@ -112,37 +74,18 @@
         </div>
         <div class="col-md-8 pull-right">
           <div class="input-group">
-            <input
-              v-model="contactQuery"
-              type="text"
-              class="form-control input-sm"
-              placeholder="Try with full name or nick name"
-            >
+            <input v-model="contactQuery" type="text" class="form-control input-sm"
+              placeholder="Try with full name or nick name">
             <span class="input-group-append">
-              <button
-                class="btn btn-sm btn-primary "
-                @click="searchContacts"
-              >
+              <button class="btn btn-sm btn-primary " @click="searchContacts">
                 <i class="fa fa-search" />
                 Search
               </button>
             </span>
           </div>
-          <div
-            v-if="contactResult.length"
-            class="dropdown-content"
-          >
-            <div
-              class="scroll"
-              style="max-height: 150px;"
-            >
-              <div
-                v-for="u in contactResult"
-                :key="u.id"
-                :value="u"
-                class="row"
-                @click="addContact($event, u)"
-              >
+          <div v-if="contactResult.length" class="dropdown-content">
+            <div class="scroll" style="max-height: 150px;">
+              <div v-for="u in contactResult" :key="u.id" :value="u" class="row" @click="addContact($event, u)">
                 <p> {{ u['fullname'] }} </p>
               </div>
             </div>
@@ -152,23 +95,15 @@
 
       <div class="form-group row">
         <div class="col-md-4">
-          <p> {{ ownership_id_title }} </p>
+          <p> {{ ownershipIdTitle }} </p>
         </div>
         <div class="col-md-8 pull-right">
-          <input
-            v-model="ownership_id"
-            type="text"
-            class="form-control input-sm"
-            placeholder="Ownership ID"
-          >
+          <input v-model="ownershipId" type="text" class="form-control input-sm" placeholder="Ownership ID">
         </div>
       </div>
 
       <div>
-        <button
-          class="btn btn-sm btn-primary"
-          @click="save"
-        >
+        <button class="btn btn-sm btn-primary" @click="save">
           Save
         </button>
       </div>
@@ -185,7 +120,7 @@ export default {
     GigSpinner
   },
 
-  data () {
+  data() {
     return {
       owner: {},
       coowners: {},
@@ -194,26 +129,29 @@ export default {
       contactResult: [],
       coownerQuery: '',
       contactQuery: '',
-      ownership_id: {},
-      ownership_id_title: 'Ownership ID',
-      waiting: false
+      ownershipId: '',
+      ownershipIdTitle: 'Ownership ID',
+      waiting: false,
+      projectId: ''
     };
   },
 
-  created () {
+  created() {
     this.getData();
+    this.getOwnershipIdTitle()
+    this.getProjectId()
   },
 
   methods: {
 
-    initialize (data) {
+    initialize(data) {
       this.coowners = this.getUsers(data.coowners_dict);
       this.contacts = this.getUsers(data.contacts_dict);
       this.owner = data.owner;
       this.csrfToken = data.form.csrf;
     },
 
-    getUsers (data) {
+    getUsers(data) {
       let users = {};
       data.forEach(function (u) {
         users[u.id] = u;
@@ -221,14 +159,26 @@ export default {
       return users;
     },
 
-    getURL (keyword) {
+    getCoownersURL() {
       let path = window.location.pathname;
       let res = path.split('/');
-      res[res.length - 1] = keyword;
+      res[res.length - 1] = 'coowners';
       return res.join('/');
     },
 
-    async search (user, contact) {
+    getProjectApiURL() {
+      return `/api/project/${this.projectId}`
+    },
+
+    getOwnershipIdTitle() {
+      this.ownershipIdTitle = document.getElementById('ownership-id-title').innerText
+    },
+
+    getProjectId() {
+      this.projectId = document.getElementById('project-id').innerText
+    },
+
+    async search(user, contact) {
       // Reset and hide drop-downs with search results.
       this.coownerResult = [];
       this.contactResult = [];
@@ -237,8 +187,7 @@ export default {
       } else {
         this.contactQuery = null;
       }
-
-      const res = await fetch(this.getURL('coowners'), {
+      const res = await fetch(this.getCoownersURL(), {
         method: 'POST',
         headers: {
           'content-type': 'application/json',
@@ -255,10 +204,10 @@ export default {
       return data['found'];
     },
 
-    async getData () {
+    async getData() {
       this.waiting = true;
       try {
-        const res = await fetch(this.getURL('coowners'), {
+        const res = await fetch(this.getCoownersURL(), {
           method: 'GET',
           headers: {
             'content-type': 'application/json'
@@ -271,7 +220,7 @@ export default {
         window.pybossaNotify('An error occurred.', true, 'error');
       }
       try {
-        const res = await fetch(this.getURL('ownership_id'), {
+        const res = await fetch(this.getProjectApiURL(), {
           method: 'GET',
           headers: {
             'content-type': 'application/json'
@@ -279,34 +228,40 @@ export default {
           credentials: 'same-origin'
         });
         const data = await res.json();
-        this.ownership_id = data.ownership_id;
-        this.ownership_id_title = data.title;
+        this.ownershipId = data.info.ownership_id == null ? '' : data.info.ownership_id
       } catch (error) {
         window.pybossaNotify('An error occurred.', true, 'error');
-      } finally {
+      }
+      finally {
         this.waiting = false;
       }
     },
 
-    addCoowner (event, ur) {
+    addCoowner(event, ur) {
       Vue.set(this.coowners, ur.id, ur);
       this.coowners[ur.id] = ur;
     },
 
-    removeCoowner (event, id) {
+    removeCoowner(event, id) {
       Vue.delete(this.coowners, id);
     },
 
-    addContact (event, ur) {
+    addContact(event, ur) {
       Vue.set(this.contacts, ur.id, ur);
       this.contacts[ur.id] = ur;
     },
 
-    removeContact (event, id) {
+    removeContact(event, id) {
       Vue.delete(this.contacts, id);
     },
 
-    async searchCoowners () {
+    validateOwnershipId() {
+      let reg = new RegExp('^[0-9]+$');
+      return this.ownershipId.length == 0 ||
+        (reg.test(this.ownershipId) && this.ownershipId.length <= 20)
+    },
+
+    async searchCoowners() {
       try {
         if (this.coownerQuery) {
           this.coownerResult = await this.search(this.coownerQuery);
@@ -318,7 +273,7 @@ export default {
       }
     },
 
-    async searchContacts () {
+    async searchContacts() {
       try {
         if (this.contactQuery) {
           this.contactResult = await this.search(this.contactQuery, true);
@@ -330,7 +285,12 @@ export default {
       }
     },
 
-    async save () {
+    async save() {
+      if (!this.validateOwnershipId()) {
+        window.pybossaNotify(`${this.ownershipIdTitle} must be numeric and less than 20 characters!`, true, 'error');
+        return
+      }
+
       const coowners = Object.keys(this.coowners);
       const contacts = Object.keys(this.contacts);
       // Reset and hide drop-downs with search results.
@@ -339,9 +299,8 @@ export default {
       this.coownerQuery = null;
       this.contactQuery = null;
       this.waiting = true;
-
       try {
-        const res = await fetch(this.getURL('coowners'), {
+        const res = await fetch(this.getCoownersURL(), {
           method: 'POST',
           headers: {
             'content-type': 'application/json',
@@ -365,19 +324,23 @@ export default {
         window.pybossaNotify('An error occurred configuring ownership config.', true, 'error');
       }
       try {
-        const res = await fetch(this.getURL('ownership_id'), {
+        let body = {
+          "info": {
+            "ownership_id": this.ownershipId
+          }
+        }
+        const res = await fetch(this.getProjectApiURL(), {
           method: 'PUT',
           headers: {
             'content-type': 'application/json',
             'X-CSRFToken': this.csrfToken
           },
           credentials: 'same-origin',
-          body: JSON.stringify({ ownership_id: this.ownership_id })
+          body: JSON.stringify(body)
         });
         if (res.ok) {
           const data = await res.json();
-          this.ownership_id = data.ownership_id;
-          window.pybossaNotify(data['flash'], true, data['status']);
+          this.ownershipId = data.info.ownership_id;
         } else {
           window.pybossaNotify('An error occurred configuring ownership id.', true, 'error');
         }
@@ -396,14 +359,17 @@ export default {
   font-size: 100%;
   margin-right: 10px
 }
+
 .fa-times {
-  margin-left:3px;
-  color:silver
+  margin-left: 3px;
+  color: silver
 }
+
 .fa-times:hover {
   color: red
 }
+
 .form-control.input-sm {
-    width: 280px;
+  width: 280px;
 }
 </style>
diff --git a/templates/projects/summary.webpack.ejs b/templates/projects/summary.webpack.ejs
index f313d49c..549113c2 100644
--- a/templates/projects/summary.webpack.ejs
+++ b/templates/projects/summary.webpack.ejs
@@ -13,6 +13,9 @@
     </ul>
     <br>
 
+    <div id = "ownership-id-title" style="display: none;">{{config.OWNERSHIP_ID_TITLE}}</div>
+    <div id = "project-id" style="display: none;">{{project.id}}</div>
+
     <div id="setting" class="tab-content">
         <div role="tabpanel" class="tab-pane fade in active" id="project">
             <div class="col-md-12">