diff --git a/package-lock.json b/package-lock.json
index 31aa458..9e22669 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12193,6 +12193,11 @@
       "integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
       "dev": true
     },
+    "vuejs-datepicker": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.5.3.tgz",
+      "integrity": "sha512-vCYLx7rbYPEqLLx1EplFQHxkMA/SAFJvwj5PYzeaG98q7hynLZMXsvhE8FPr08PJUiKA+zRknq0CqRioNYLYkg=="
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz",
diff --git a/package.json b/package.json
index a8ed49f..d000cd3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "semantic-ui-vue": "^0.2.11",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
+    "vuejs-datepicker": "^1.5.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/components/ControlPanel/channel/components/page-breadcrumb.vue b/src/components/ControlPanel/channel/components/page-breadcrumb.vue
new file mode 100644
index 0000000..d5e9167
--- /dev/null
+++ b/src/components/ControlPanel/channel/components/page-breadcrumb.vue
@@ -0,0 +1,14 @@
+<template>
+  <sui-breadcrumb>
+    <sui-breadcrumb-section>Home</sui-breadcrumb-section>
+  </sui-breadcrumb>
+</template>
+
+<script>
+export default {
+  name: 'PageBreadcrumb',
+  data () {
+    return {}
+  }
+}
+</script>
diff --git a/src/components/ControlPanel/channel/components/sidemenu.vue b/src/components/ControlPanel/channel/components/sidemenu.vue
index 8f7a81e..f0067e0 100644
--- a/src/components/ControlPanel/channel/components/sidemenu.vue
+++ b/src/components/ControlPanel/channel/components/sidemenu.vue
@@ -1,7 +1,7 @@
 <template>
   <sui-item-group divided>
-    <sui-item>Dashboard</sui-item>
-    <sui-item>Opay</sui-item>
+    <sui-item ><router-link :to="{name: 'Channel'}">Dashboard</router-link></sui-item>
+    <sui-item ><router-link :to="{name: 'ChannelOpay'}">Opay</router-link></sui-item>
   </sui-item-group>
 </template>
 
@@ -16,6 +16,11 @@ export default {
   name: 'ChannelSideMenu',
   data () {
     return {}
+  },
+  computed: {
+    side: function () {
+      return this.$route.meta.side || ''
+    }
   }
 }
 </script>
diff --git a/src/components/ControlPanel/channel/index.vue b/src/components/ControlPanel/channel/index.vue
index 6d46862..ca8b1d3 100644
--- a/src/components/ControlPanel/channel/index.vue
+++ b/src/components/ControlPanel/channel/index.vue
@@ -19,6 +19,7 @@
             </sui-grid-row>
           </sui-grid>
         </sui-segment>
+        <router-view />
       </sui-container>
     </div>
   </div>
@@ -38,6 +39,7 @@
   }
   .f-full {
     flex: 1;
+    flex-flow: row;
   }
 }
 </style>
diff --git a/src/components/ControlPanel/channel/opay/components/opay-setting.vue b/src/components/ControlPanel/channel/opay/components/opay-setting.vue
new file mode 100644
index 0000000..1bb9e7b
--- /dev/null
+++ b/src/components/ControlPanel/channel/opay/components/opay-setting.vue
@@ -0,0 +1,98 @@
+<template>
+  <sui-segment>
+    <sui-header>Donate Bar Setting</sui-header>
+    <sui-segment stacked>
+      <Donatebar :title="title" :max="amountInt" :now="amountInt / 3" :timestamp="datetime" />
+    </sui-segment>
+    <sui-form @submit.prevent="formSubmit">
+      <sui-form-field>
+        <label>Title</label>
+        <input placeholder="Doante bar title" v-model="title" name="title"/>
+      </sui-form-field>
+      <sui-form-field>
+        <label>TargetAmount</label>
+        <input placeholder="Target amount" type="number" v-model="amount" name="amount"/>
+      </sui-form-field>
+      <sui-form-fields :fields="2">
+        <sui-form-field>
+          <label>StartDate</label>
+          <DatePicker v-model="sDate" format="yyyy-MM-dd"/>
+        </sui-form-field>
+        <sui-form-field>
+          <label>EndDate</label>
+          <DatePicker v-model="eDate" format="yyyy-MM-dd"/>
+        </sui-form-field>
+      </sui-form-fields>
+      <sui-form-field>
+        <sui-button type="submit" color="blue" fluid>Update</sui-button>
+      </sui-form-field>
+    </sui-form>
+  </sui-segment>
+</template>
+
+<script>
+import Donatebar from '@/components/common/donate-bar'
+import DatePicker from 'vuejs-datepicker'
+import {toInt} from '@/tools'
+import {mapGetters, mapMutations, mapActions} from 'vuex'
+export default {
+  name: 'OpaySetting',
+  components: {
+    Donatebar,
+    DatePicker
+  },
+  props: ['setting'],
+  data () {
+    return {
+      title: '',
+      amount: 0,
+      sDate: '',
+      eDate: ''
+    }
+  },
+  methods: {
+    ...mapActions(['changeOpaySetting']),
+    ...mapMutations(['addDialog']),
+    formSubmit: function () {
+      let sts = 0
+      try {
+        sts = new Date(this.sDate).getTime()
+      } catch (err) {}
+      let ets = 0
+      try {
+        ets = new Date(this.eDate).getTime()
+      } catch (err) {}
+      let data = {
+        title: this.title,
+        amount: this.amount,
+        start: sts,
+        end: ets
+      }
+      this.changeOpaySetting({
+        id: this.$route.params.chid,
+        data
+      })
+    }
+  },
+  watch: {
+    setting: function (val, old) {
+      this.title = val.title
+      this.amount = val.target_amount
+      this.sDate = val.start_date
+      this.eDate = val.end_date
+    }
+  },
+  computed: {
+    amountInt: function () {
+      return toInt(this.amount, 0)
+    },
+    datetime: function () {
+      let ts = 0
+      try {
+        ts = new Date(this.eDate).getTime()
+      } catch (err) {}
+      return ts
+    }
+  }
+}
+</script>
diff --git a/src/components/ControlPanel/channel/opay/index.vue b/src/components/ControlPanel/channel/opay/index.vue
new file mode 100644
index 0000000..b45413d
--- /dev/null
+++ b/src/components/ControlPanel/channel/opay/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <sui-container>
+    <sui-segment>
+      <sui-header>OPay ID</sui-header>
+      <sui-form @submit.prevent="opaySubmit">
+        <sui-form-field inline>
+          <input placeholder="opay id" :value="channel.opayid" size="40" name="opayid" @input="handleChange" />
+          <sui-button type="submit" basic color='green'>Update</sui-button>
+        </sui-form-field>
+      </sui-form>
+    </sui-segment>
+    <OpaySetting v-if="channel.oapyid !== ''" :setting="channel.opaySetting" />    
+  </sui-container>
+</template>
+
+<script>
+import {mapGetters, mapActions, mapMutations} from 'vuex'
+import OpaySetting from './components/opay-setting'
+export default {
+  name: 'Opay',
+  components: {
+    OpaySetting
+  },
+  data () {
+    return {
+      opayid: null
+    }
+  },
+  mounted () {
+    this.getOpaySettingAPI({id: this.$route.params.chid || ''})
+  },
+  methods: {
+    ...mapActions(['changeOpayID']),
+    ...mapActions({
+      getChannelAPI: 'getChannel',
+      getOpaySettingAPI: 'getOpaySetting'
+    }),
+    ...mapMutations(['addDialog']),
+    getChannelData: function () {
+      this.getChannelAPI({id: this.$route.params.chid})
+    },
+    opaySubmit: function (evt) {
+      if (this.opayid === null || typeof this.opayid !== 'string') {
+        this.addDialog({
+          msg: 'opayid read fail'
+        })
+        return
+      }
+      let arg = {
+        chid: this.$route.params.chid,
+        opayid: this.opayid,
+        cb: () => {
+          this.opayid = null
+          this.getChannelData()
+        }
+      }
+      this.changeOpayID(arg)
+    },
+    handleChange: function (input) {
+      this[input.target.name] = input.target.value
+    }
+  },
+  computed: {
+    ...mapGetters(['getChannel']),
+    channel: function () {
+      return this.getChannel(this.$route.params.chid || '')
+    }
+  }
+}
+</script>
diff --git a/src/components/Login/index.vue b/src/components/Login/index.vue
index dc92f14..484d644 100644
--- a/src/components/Login/index.vue
+++ b/src/components/Login/index.vue
@@ -1,7 +1,7 @@
 <template>
     <sui-container>
         <div class="login-form">
-          <sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
+          <sui-header textAlign='center' color='teal'>Bot Manage</sui-header>
           <sui-segment>
             <sui-form @submit.prevent="login">
               <sui-form-field>
diff --git a/src/components/common/donate-bar.vue b/src/components/common/donate-bar.vue
new file mode 100644
index 0000000..a749ec0
--- /dev/null
+++ b/src/components/common/donate-bar.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="main">
+    <div class="title">{{title}}</div>
+    <div class="progressbar">
+      <div class="progress-body" :style="{width: percent + '%'}"></div>
+      <div class="show-txt">
+        <div>${{now}}&nbsp;({{percent}}%)</div>
+      </div>
+    </div>
+    <div class="progress-bottom">
+      <div class="min">$0</div>
+      <div class="max">${{max}}</div>
+      <div class="time">{{time}}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+
+  .title {
+    text-align: center;
+  }
+  .progressbar {
+    background-color: #eee;
+    width: 100%;
+    height: 30px;
+    position: relative;
+    border-radius: 10px;
+
+    .progress-body {
+      border-radius: 10px;
+      height: 100%;
+      background-color: #0f0;
+      position: relative;
+      width: 40%;
+    }
+    .show-txt {
+      border-radius: 10px;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      text-align: center;
+
+      >div {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  .progress-bottom {
+    position: relative;
+
+    >.min {
+      position: absolute;
+      top: 0;
+      left: 0;
+      max-width: 100px;
+    }
+
+    >.max {
+      position: absolute;
+      top: 0;
+      right: 0;
+      max-width: 100px;
+    }
+
+    >.time {
+      text-align: center;
+      width: 100%;
+    }
+  }
+}
+</style>
+
+<script>
+import {toInt} from '@/tools'
+export default {
+  name: 'Donatebar',
+  props: {
+    title: String,
+    max: Number,
+    timestamp: Number,
+    now: Number
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    percent: function () {
+      let p = Math.floor((this.now / this.max) * 100)
+      return p >= 100 ? 100 : p
+    },
+    time: function () {
+      return new Date(toInt(this.timestamp, 0, 0)).toString()
+    }
+  }
+}
+</script>
diff --git a/src/router.js b/src/router.js
index bc5294b..4ae8478 100644
--- a/src/router.js
+++ b/src/router.js
@@ -5,6 +5,7 @@ import Login from '@/components/Login'
 import ControlPanel from '@/components/ControlPanel'
 import ChannelList from '@/components/ControlPanel/channelList'
 import Channel from '@/components/ControlPanel/channel'
+import ChannelOpay from '@/components/ControlPanel/channel/opay'
 
 Vue.use(Router)
 
@@ -37,8 +38,19 @@ export default new Router({
           name: 'Channel',
           component: Channel,
           meta: {
-            topMenu: 'channel'
-          }
+            topMenu: 'channel',
+            side: ''
+          },
+          children: [
+            {
+              path: 'opay',
+              name: 'ChannelOpay',
+              component: ChannelOpay,
+              meta: {
+                side: 'opay'
+              }
+            }
+          ]
         },
         {
           path: '*',
diff --git a/src/store/actions.js b/src/store/actions.js
index 6fb2fc0..86baf83 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -16,6 +16,7 @@ const errorCatch = function (err, act) {
   } else {
     msg = 'unknown error'
   }
+  console.log('error catch :::: ', this)
   this('addDialog', {
     msg,
     act
@@ -139,5 +140,88 @@ export default {
       errorCatch.apply(commit, [err])
     }
     commit('toggleLoading', false)
+  },
+  async changeOpayID ({commit}, {chid, opayid, cb}) {
+    if (typeof chid !== 'string' || chid.trim().length === 0) {
+      commit('addDialog', {
+        msg: 'channel id read fail'
+      })
+      return
+    }
+    if (typeof opayid !== 'string') {
+      commit('addDialog', {
+        msg: 'opay id type error'
+      })
+      return
+    }
+    commit('toggleLoading', true)
+    try {
+      await client({
+        method: 'put',
+        url: `/api/twitch/channel/${chid.trim()}/opay`,
+        data: {
+          opay: opayid
+        }
+      })
+      commit('getChannel', {id: chid})
+      if (typeof cb === 'function') cb()
+    } catch (err) {
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
+  },
+  async getOpaySetting ({commit}, {id}) {
+    if (typeof id !== 'string' || id.trim().length === 0) {
+      commit('addDialog', {
+        msg: 'channel id read fail'
+      })
+      return
+    }
+    commit('toggleLoading', true)
+    try {
+      let result = await client({
+        method: 'get',
+        url: `/api/twitch/channel/${id.trim()}/opay/setting`
+      })
+      if (!('data' in result) || !('setting' in result.data) || typeof result.data.setting !== 'object') {
+        commit('addDialog', {
+          msg: 'get opay setting data fail'
+        })
+      } else {
+        commit('setOpaySetting', {
+          chid: id,
+          setting: result.data.setting || {}
+        })
+      }
+    } catch (err) {
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
+  },
+  async changeOpaySetting ({commit, dispatch}, {id, data}) {
+    if (typeof id !== 'string' || id.trim().length === 0) {
+      commit('addDialog', {
+        msg: 'channel id read fail'
+      })
+      return
+    }
+    if (typeof data !== 'object') {
+      commit('addDialog', {
+        msg: 'data read fail'
+      })
+      return
+    }
+    commit('toggleLoading', true)
+    try {
+      await client({
+        method: 'put',
+        url: `/api/twitch/channel/${id.trim()}/opay/setting`,
+        data
+      })
+      dispatch('getOpaySetting', {id})
+    } catch (err) {
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
   }
 }
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 08a9c3e..dce6d55 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -28,5 +28,16 @@ export default {
     if (channel === null || typeof channel !== 'object' || !('id' in channel)) return
     let list = state.twitch.channels.filter(t => t.id !== channel.id)
     state.twitch.channels = [...list, channel]
+  },
+  setOpaySetting (state, {chid, setting}) {
+    if (typeof chid !== 'string' || chid.trim().length === 0) return
+    if (typeof setting !== 'object') return
+    let list = state.twitch.channels.map(t => {
+      if (t.id === chid) {
+        t.opaySetting = setting
+      }
+      return t
+    })
+    state.twitch.channels = [...list]
   }
 }