diff --git a/static/js/app/index.js b/static/js/app/index.js
index e517b73..1afa2d7 100644
--- a/static/js/app/index.js
+++ b/static/js/app/index.js
@@ -13,43 +13,53 @@ require('../components/app-nav');
 require('../components/app-main');
 
 window.addEventListener('DOMContentLoaded', function (){
+  var app;
+
   function normalize(configure){
     return JSON.parse(JSON.stringify(configure));
   }
 
-  var app = new Vue({
-    el: '#app',
-    data: {
-      activeIndex: 0,
-      configure: { projects: [] }
-    },
-    computed: {
-      uniqueProjects: function (){
-        var cache = {};
-
-        this.configure.projects.forEach(function (project){
-          cache[project.name] = true;
-        });
-
-        return cache;
-      }
-    },
-    events: {
-      'change-active': function (index){
-        this.activeIndex = index;
+  function init(configure){
+    app = new Vue({
+      el: '#app',
+      data: {
+        activeIndex: 0,
+        configure: configure
       },
-      'save-configure': function (){
-        ipc.send('app-configure', 'save', normalize(this.configure));
+      computed: {
+        uniqueProjects: function (){
+          var cache = {};
+
+          this.configure.projects.forEach(function (project){
+            cache[project.name] = true;
+          });
+
+          return cache;
+        }
+      },
+      events: {
+        'change-active': function (index){
+          this.activeIndex = index;
+        },
+        'save-configure': function (){
+          ipc.send('app-configure', 'save', normalize(this.configure));
+        }
       }
-    }
-  });
+    });
+  }
 
   ipc.on('app-configure', function (event, command, configure){
     switch (command) {
       case 'refresh':
-        app.activeIndex = 0;
-        configure.projects = configure.projects || [];
-        app.configure = configure;
+        if (app) {
+          app.activeIndex = 0;
+          configure.projects = configure.projects || [];
+          app.configure = configure;
+
+          app.$broadcast('configure-refresh');
+        } else {
+          init(configure);
+        }
         break;
     }
   });
diff --git a/static/js/components/app-main/app-main.html b/static/js/components/app-main/app-main.html
index c3d1479..9b801cb 100644
--- a/static/js/components/app-main/app-main.html
+++ b/static/js/components/app-main/app-main.html
@@ -1,4 +1,4 @@
-<project-configure :project.sync="project"></project-configure>
+<project-configure :project="project" :unique-projects.sync="uniqueProjects"></project-configure>
 <div class="ui-project-stage fn-hide">
   <div class="ui-control-bar fn-clear">
     <div class="ui-control-operate fn-left">
diff --git a/static/js/components/app-main/index.js b/static/js/components/app-main/index.js
index 6394e53..2357421 100644
--- a/static/js/components/app-main/index.js
+++ b/static/js/components/app-main/index.js
@@ -28,14 +28,12 @@ module.exports = Vue.component('app-main', {
       required: true
     }
   },
+  data: function (){
+    return {};
+  },
   computed: {
     project: function (){
-      var project = this.projects[this.activeIndex] || {
-          name: '',
-          path: '',
-          env: [],
-          command: []
-        };
+      var project = this.projects[this.activeIndex];
 
       if (!project.env) {
         project.env = [];
@@ -45,7 +43,19 @@ module.exports = Vue.component('app-main', {
         project.command = [];
       }
 
-      return project;
+      return JSON.parse(JSON.stringify(project));
+    }
+  },
+  methods: {
+    remove: function (){
+      this.projects.splice(this.activeIndex, 1);
+      this.$dispatch('save-configure');
+    }
+  },
+  events: {
+    edit: function (project){
+      this.projects.$set(this.activeIndex, project);
+      this.$dispatch('save-configure');
     }
   }
 });
diff --git a/static/js/components/dynamic-item/index.js b/static/js/components/dynamic-item/index.js
index 35940f0..3c92f66 100644
--- a/static/js/components/dynamic-item/index.js
+++ b/static/js/components/dynamic-item/index.js
@@ -56,19 +56,22 @@ module.exports = Vue.component('dynamic-item', {
       this.value = this.value.trim();
 
       // name error
-      if (!this.name) {
-        this.nameError = '不能为空';
-      } else if (this.uniqueItems[this.name]) {
-        this.nameError = ' ' + this.name + ' 已存在';
+      if (this.name) {
+        if (this.uniqueItems[this.name]) {
+          this.nameError = ' ' + this.name + ' 已存在';
+        } else {
+          this.nameError = '';
+        }
       } else {
-        this.nameError = '';
+
+        this.nameError = '不能为空';
       }
 
       // value error
-      if (!this.value) {
-        this.valueError = '不能为空';
-      } else {
+      if (this.value) {
         this.valueError = '';
+      } else {
+        this.valueError = '不能为空';
       }
 
       // add item
diff --git a/static/js/components/project-configure/index.js b/static/js/components/project-configure/index.js
index 7a77c89..952e1bc 100644
--- a/static/js/components/project-configure/index.js
+++ b/static/js/components/project-configure/index.js
@@ -6,7 +6,6 @@
 
 var fs = require('fs');
 var path = require('path');
-var ipc = require('ipc-renderer');
 var Vue = require('../../vue/vue');
 
 require('../project-base');
@@ -16,11 +15,27 @@ module.exports = Vue.component('project-configure', {
   template: fs.readFileSync(path.join(__dirname, 'project-configure.html')).toString(),
   props: {
     project: {
+      type: Object,
+      required: true
+    },
+    uniqueProjects: {
       type: Object,
       twoWay: true,
       required: true
     }
   },
+  data: function (){
+    return {
+      nameError: '',
+      pathError: '',
+      submitError: ''
+    }
+  },
+  computed: {
+    projectClone: function (){
+      return JSON.parse(JSON.stringify(this.project));
+    }
+  },
   methods: {
     focus: function (event){
       if (event.target.type === 'text') {
@@ -28,9 +43,26 @@ module.exports = Vue.component('project-configure', {
       }
     },
     edit: function (){
-      this.$broadcast('submit');
+      var name = this.projectClone.name;
+      var originName = this.project.name;
 
-      console.log(this.project);
+      if (this.projectClone.name && this.projectClone.path) {
+        if (name !== originName && this.uniqueProjects[name]) {
+          this.submitError = '项目已存在';
+        } else {
+          // clean error
+          this.submitError = '';
+  
+          // send message
+          this.$dispatch('edit', this.projectClone);
+        }
+      }
+    }
+  },
+  events: {
+    'configure-refresh': function (){
+      this.submitError = '';
+      this.$broadcast('clean-error');
     }
   }
 });
diff --git a/static/js/components/project-configure/project-configure.html b/static/js/components/project-configure/project-configure.html
index 86ada45..66d188d 100644
--- a/static/js/components/project-configure/project-configure.html
+++ b/static/js/components/project-configure/project-configure.html
@@ -7,15 +7,16 @@
       </div>
     </div>
     <div class="ui-project-configure">
+      <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
       <ul>
-        <li is="project-base" :name.sync="project.name" :path.sync="project.path"></li>
+        <li is="project-base" :name.sync="projectClone.name" :path.sync="projectClone.path"></li>
         <li class="ui-sub-item">
           <label>环境变量：</label>
-          <dynamic-item name-label="变量名" value-label="变量值" :items.sync="project.env"></dynamic-item>
+          <dynamic-item name-label="变量名" value-label="变量值" :items.sync="projectClone.env"></dynamic-item>
         </li>
         <li id="add-cmd" class="ui-sub-item">
           <label>项目命令：</label>
-          <dynamic-item name-label="名称" value-label="命令" :items.sync="project.command"></dynamic-item>
+          <dynamic-item name-label="名称" value-label="命令" :items.sync="projectClone.command"></dynamic-item>
         </li>
       </ul>
     </div>