diff --git a/crawlab/routes/base.py b/crawlab/routes/base.py
index 689b8f6a..8a3d6709 100644
--- a/crawlab/routes/base.py
+++ b/crawlab/routes/base.py
@@ -38,8 +38,8 @@ class BaseApi(Resource):
         :param action:
         :return:
         """
-        import pdb
-        pdb.set_trace()
+        # import pdb
+        # pdb.set_trace()
         args = self.parser.parse_args()
 
         # action by id
@@ -85,13 +85,13 @@ class BaseApi(Resource):
 
             # TODO: getting status for node
 
-            return jsonify({
+            return {
                 'status': 'ok',
                 'total_count': total_count,
                 'page_num': page,
                 'page_size': page_size,
-                'items': items
-            })
+                'items': jsonify(items)
+            }
 
         # get item by id
         else:
@@ -108,6 +108,9 @@ class BaseApi(Resource):
             if k not in DEFAULT_ARGS:
                 item[k] = args.get(k)
         item = db_manager.save(col_name=self.col_name, item=item)
+
+        self.after_update(item._id)
+
         return item
 
     def update(self, id: str = None) -> (dict, tuple):
diff --git a/crawlab/routes/schedules.py b/crawlab/routes/schedules.py
index 1eceabde..f966e2cb 100644
--- a/crawlab/routes/schedules.py
+++ b/crawlab/routes/schedules.py
@@ -13,6 +13,8 @@ class ScheduleApi(BaseApi):
     col_name = 'schedules'
 
     arguments = (
+        ('name', str),
+        ('description', str),
         ('cron', str),
         ('spider_id', str)
     )
diff --git a/frontend/src/views/schedule/ScheduleList.vue b/frontend/src/views/schedule/ScheduleList.vue
index b0dbb209..c6359733 100644
--- a/frontend/src/views/schedule/ScheduleList.vue
+++ b/frontend/src/views/schedule/ScheduleList.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--add popup-->
     <el-dialog
-      :title="$t('Add Schedule')"
+      :title="$t(dialogTitle)"
       :visible.sync="dialogVisible"
       width="60%"
       :before-close="onDialogClose">
@@ -11,19 +11,34 @@
                :inline-message="true"
                ref="scheduleForm"
                label-position="right">
-        <el-form-item :label="$t('Schedule Name')" prop="url" required>
+        <el-form-item :label="$t('Schedule Name')" prop="name" required>
           <el-input v-model="scheduleForm.name" :placeholder="$t('Schedule Name')"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('Cron')" prop="cron" required>
+        <el-form-item :label="$t('Spider')" prop="spider_id" required>
+          <el-select v-model="scheduleForm.spider_id" filterable>
+            <el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('Cron')" prop="cron" :rules="cronRules" required>
+          <template slot="label">
+            <el-tooltip :content="$t('Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]')"
+                        placement="top">
+              <span>
+                {{$t('Cron')}}
+                <i class="fa fa-exclamation-circle"></i>
+              </span>
+            </el-tooltip>
+          </template>
           <el-input v-model="scheduleForm.cron" :placeholder="$t('Cron')"></el-input>
         </el-form-item>
         <el-form-item :label="$t('Schedule Description')" prop="description">
-          <el-input v-model="scheduleForm.description" :placeholder="$t('Schedule Description')"></el-input>
+          <el-input v-model="scheduleForm.description" type="textarea"
+                    :placeholder="$t('Schedule Description')"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="onCancel">{{$t('Cancel')}}</el-button>
-        <el-button type="primary" @click="onAddSubmit">{{$t('Add')}}</el-button>
+        <el-button type="primary" @click="onAddSubmit">{{$t('Submit')}}</el-button>
       </span>
     </el-dialog>
 
@@ -55,8 +70,8 @@
       </template>
       <el-table-column :label="$t('Action')" align="left" width="250">
         <template slot-scope="scope">
-          <el-tooltip :content="$t('View')" placement="top">
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
+          <el-tooltip :content="$t('Edit')" placement="top">
+            <el-button type="warning" icon="el-icon-edit" size="mini" @click="onEdit(scope.row)"></el-button>
           </el-tooltip>
           <el-tooltip :content="$t('Remove')" placement="top">
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.row)"></el-button>
@@ -78,13 +93,30 @@ import {
 export default {
   name: 'ScheduleList',
   data () {
+    const cronValidator = (rule, value, callback) => {
+      let patArr = []
+      for (let i = 0; i < 6; i++) {
+        patArr.push('[/*,0-9]+')
+      }
+      const pat = '^' + patArr.join(' ') + '$'
+      if (!value) {
+        callback(new Error('cron cannot be empty'))
+      } else if (!value.match(pat)) {
+        callback(new Error('cron format is invalid'))
+      }
+      callback()
+    }
     return {
       columns: [
         { name: 'name', label: 'Name', width: '220' },
         { name: 'cron', label: 'Cron', width: '220' },
         { name: 'description', label: 'Description', width: 'auto' }
       ],
-      dialogVisible: false
+      dialogTitle: '',
+      dialogVisible: false,
+      cronRules: [
+        { validator: cronValidator, trigger: 'blur' }
+      ]
     }
   },
   computed: {
@@ -92,30 +124,68 @@ export default {
       'scheduleList',
       'scheduleForm'
     ]),
+    ...mapState('spider', [
+      'spiderList'
+    ]),
     filteredTableData () {
       return this.scheduleList
     }
   },
   methods: {
     onDialogClose () {
+      this.dialogVisible = false
     },
     onCancel () {
       this.dialogVisible = false
     },
     onAdd () {
       this.dialogVisible = true
+      this.$store.commit('schedule/SET_SCHEDULE_FORM', {})
     },
     onAddSubmit () {
+      this.$refs.scheduleForm.validate(res => {
+        if (res) {
+          this.$store.dispatch('schedule/addSchedule')
+            .then(response => {
+              this.dialogVisible = false
+              setTimeout(() => {
+                this.$store.dispatch('schedule/getScheduleList')
+              }, 100)
+            })
+        }
+      })
+    },
+    isShowRun () {
+    },
+    onEdit (row) {
+      this.$store.commit('schedule/SET_SCHEDULE_FORM', row)
+      this.dialogVisible = true
+    },
+    onRemove (row) {
+      this.$store.dispatch('schedule/removeSchedule', row._id)
+        .then(response => {
+          setTimeout(() => {
+            this.$store.dispatch('schedule/getScheduleList')
+            this.$message.success(`Schedule "${row.name}" has been removed`)
+          }, 100)
+        })
+    },
+    onRun () {
     }
   },
   created () {
     this.$store.dispatch('schedule/getScheduleList')
+    this.$store.dispatch('spider/getSpiderList')
   }
 }
 </script>
 
 <style scoped>
   .filter .right {
-    float: right;
+    text-align: right;
+  }
+
+  .table {
+    margin-top: 10px;
   }
 </style>