diff --git a/jsconfig.json b/jsconfig.json
index 044903e..0fbb072 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "moduleResolution": "classic",
+    "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
       "@": ["src/*"]
diff --git a/src/App.vue b/src/App.vue
index 4fb2127..519e5c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,9 +23,11 @@ export default {
     height: 100%;
     margin: 0;
     padding: 0;
+    overflow: hidden;
   }
   #app {
     height: 100%;
     background-color: #eee;
+    overflow: auto;
   }
 </style>
diff --git a/src/components/ControlPanel/channelList/index.vue b/src/components/ControlPanel/channelList/index.vue
index 6792b31..8644b83 100644
--- a/src/components/ControlPanel/channelList/index.vue
+++ b/src/components/ControlPanel/channelList/index.vue
@@ -1,14 +1,36 @@
 <template>
   <sui-container>
-
+    <sui-segment>
+      <sui-header size="medium">Channels</sui-header>
+      <sui-item-group divided>
+        <sui-item v-for="(item, idx) in channelList" :key="idx">
+          <sui-item-content>
+            <sui-item-header>{{item.name}}</sui-item-header>
+            <sui-item-meta>
+              <a :href="'https://twitch.tv/' + item.name" target="_blank">Channel Link</a>
+            </sui-item-meta>
+          </sui-item-content>
+        </sui-item>
+      </sui-item-group>
+    </sui-segment>
   </sui-container>
 </template>
 
 <script>
+import {mapActions, mapGetters} from 'vuex'
 export default {
   name: 'ChannelList',
   data () {
     return {}
+  },
+  created () {
+    this.getChannelList()
+  },
+  methods: {
+    ...mapActions(['getChannelList'])
+  },
+  computed: {
+    ...mapGetters(['channelList'])
   }
 }
 </script>
diff --git a/src/components/ControlPanel/index.vue b/src/components/ControlPanel/index.vue
index becac7c..63197d2 100644
--- a/src/components/ControlPanel/index.vue
+++ b/src/components/ControlPanel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='cp-div'>
     <TopMenu />
-    <router-view />
+    <router-view v-if="userInfo.name.length > 0"/>
   </div>
 </template>
 
@@ -13,7 +13,7 @@
 
 <script>
 import TopMenu from './topMenu'
-import {mapActions} from 'vuex'
+import {mapActions, mapGetters} from 'vuex'
 export default {
   name: 'ControlPanel',
   components: {
@@ -22,15 +22,22 @@ export default {
   data () {
     return {}
   },
-  created () {
-    this.checkSession((flag) => {
-      if (flag === false) {
-        this.$router.replace('/')
-      }
+  async created () {
+    let self = this
+    await new Promise(resolve => {
+      self.checkSession((flag) => {
+        if (flag === false) {
+          self.$router.replace('/')
+        }
+        resolve(null)
+      })
     })
   },
   methods: {
     ...mapActions(['checkSession'])
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
   }
 }
 </script>
diff --git a/src/components/Login/index.vue b/src/components/Login/index.vue
index caecf34..dc92f14 100644
--- a/src/components/Login/index.vue
+++ b/src/components/Login/index.vue
@@ -58,12 +58,13 @@ export default {
     ...mapMutations(['toggleLoading']),
     ...mapActions(['checkSession', 'sendLogin']),
     login: function () {
-      console.log('login submit')
+      let self = this
       this.sendLogin({
         account: this.account,
-        password: this.password
-      }, () => {
-        this.$router.push('/cp')
+        password: this.password,
+        cb: function () {
+          self.$router.push('/cp')
+        }
       })
     },
     go_oauth: function () {
diff --git a/src/store/actions.js b/src/store/actions.js
index 7e0bbaa..0d30277 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,11 +1,28 @@
 import axios from 'axios'
-import {apiUrl, chkObject} from '@/tools'
+import {
+  apiUrl,
+  chkObject,
+  toInt
+} from '@/tools'
 
 const client = axios.create({
   baseURL: apiUrl,
   withCredentials: true
 })
 
+const errorCatch = function (err, act) {
+  let msg = ''
+  if ('response' in err && 'data' in err.response && 'message' in err.response.data) {
+    msg = err.response.data.message
+  } else {
+    msg = 'unknown error'
+  }
+  this('addDialog', {
+    msg,
+    act
+  })
+}
+
 export default {
   async checkSession ({commit}, cb = null) {
     commit('toggleLoading', true)
@@ -28,7 +45,7 @@ export default {
     if (typeof cb === 'function') cb(flag)
     commit('toggleLoading', false)
   },
-  async sendLogin ({commit}, {account, password}, cb = null) {
+  async sendLogin ({commit}, {account, password, cb = null}) {
     let chk = chkObject.bind({body: {account, password}})
     if (!chk('account', 'string') || !chk('password', 'string')) {
       commit('addDialog', {
@@ -49,13 +66,23 @@ export default {
       })
       if (typeof cb === 'function') cb()
     } catch (err) {
-      let msg = ''
-      if ('response' in err && 'data' in err.response && 'message' in err.response.data) {
-        msg = err.response.data.message
-      } else {
-        msg = 'unknown error'
-      }
-      commit('addDialog', {msg})
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
+  },
+  async getChannelList ({commit}, cb = null) {
+    commit('toggleLoading', true)
+    try {
+      let result = await client({
+        method: 'get',
+        url: '/api/twitch/channels'
+      })
+      let list = []
+      if ('data' in result && 'list' in result.data && Array.isArray(result.data.list)) list = result.data.list
+      commit('setChannels', list)
+      if (typeof cb === 'function') cb()
+    } catch (err) {
+      errorCatch.apply(commit, [err])
     }
     commit('toggleLoading', false)
   }
diff --git a/src/store/getters.js b/src/store/getters.js
index eef8eb6..3d1521e 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,3 +1,4 @@
 export const getLoading = state => !!state.loading
 export const dialogMsg = state => state.dialog[0] || null
 export const userInfo = state => state.user
+export const channelList = state => state.twitch.channels
diff --git a/src/store/index.js b/src/store/index.js
index a8dc10e..65fbdf3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,6 +12,9 @@ const state = {
   user: {
     name: '',
     type: ''
+  },
+  twitch: {
+    channels: []
   }
 }
 
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 8cf5593..1f6e374 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -19,5 +19,9 @@ export default {
   },
   removeDialog (state) {
     state.dialog = state.dialog.slice(1)
+  },
+  setChannels (state, list) {
+    if (!Array.isArray(list)) return
+    state.twitch.channels = [...list]
   }
 }
diff --git a/src/tools.js b/src/tools.js
index 36e66f3..9c8b471 100644
--- a/src/tools.js
+++ b/src/tools.js
@@ -37,3 +37,23 @@ export const chkObject = function (key = '', type = '', empty = false) {
 
   return true
 }
+
+/**
+ * parse number
+ * @param {any} v input number
+ * @param {number} def default number
+ * @param {number} min min number
+ * @param {number} max max number
+ * @return {number}
+ */
+export const toInt = (v, def = 0, min = null, max = null) => {
+  if (!isFinite(def)) def = 0
+  if (typeof def === 'string') def = parseInt(def)
+  min = isFinite(min) ? (typeof min === 'string' ? parseInt(min) : min) : null
+  max = isFinite(max) ? (typeof max === 'string' ? parseInt(max) : max) : null
+  if (!isFinite(v)) return def
+  if (typeof v === 'string') v = parseInt(v)
+  if (min !== null && v < min) v = min
+  if (max !== null && v > max) v = max
+  return v
+}