diff --git a/src/main/index.js b/src/main/index.js
index c3a560e2..b3f0da66 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -452,6 +452,36 @@ ipcMain.on('stop-public-streaming', (event, _) => {
   publicStreaming = null
 })
 
+let listStreaming = null
+
+ipcMain.on('start-list-streaming', (event, obj) => {
+  const account = new Account(accountDB)
+  account.getAccount(obj.account._id)
+    .catch((err) => {
+      log.error(err)
+      event.sender.send('error-start-list-streaming', err)
+    })
+    .then((account) => {
+      // Stop old list streaming
+      if (listStreaming !== null) {
+        listStreaming.stop()
+        listStreaming = null
+      }
+
+      listStreaming = new Streaming(account)
+      listStreaming.start(
+        `/streaming/list?list=${obj.list_id}`,
+        (update) => {
+          event.sender.send('update-start-list-streaming', update)
+        },
+        (err) => {
+          log.error(err)
+          event.sendeer.send('error-start-list-streaming', err)
+        }
+      )
+    })
+})
+
 // sounds
 ipcMain.on('fav-rt-action-sound', (event, _) => {
   const preferences = new Preferences(preferencesDBPath)
diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 312b0634..28eacd6f 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -50,37 +50,36 @@ export default {
       await this.clear()
 
       this.$store.dispatch('TimelineSpace/watchShortcutEvents')
-      try {
-        const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id)
-        try {
-          await this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
-        } catch (err) {
-          this.$message({
-            message: 'Could not fetch timeline',
-            type: 'error'
-          })
-        }
-        try {
-          await this.$store.dispatch('TimelineSpace/fetchNotifications', account)
-        } catch (err) {
-          this.$message({
-            message: 'Could not fetch notification',
-            type: 'error'
-          })
-        }
-        this.$store.dispatch('TimelineSpace/startUserStreaming', account)
-          .catch(() => {
-            this.$message({
-              message: 'Failed to start streaming',
-              type: 'error'
-            })
-          })
-      } catch (err) {
+      const account = await this.$store.dispatch('TimelineSpace/localAccount', this.$route.params.id).catch(() => {
         this.$message({
           message: 'Could not find account',
           type: 'error'
         })
+      })
+      try {
+        await this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
+      } catch (err) {
+        this.$message({
+          message: 'Could not fetch timeline',
+          type: 'error'
+        })
       }
+      try {
+        await this.$store.dispatch('TimelineSpace/fetchNotifications', account)
+      } catch (err) {
+        this.$message({
+          message: 'Could not fetch notification',
+          type: 'error'
+        })
+      }
+      this.$store.dispatch('TimelineSpace/SideMenu/fetchLists', account)
+      this.$store.dispatch('TimelineSpace/startUserStreaming', account)
+        .catch(() => {
+          this.$message({
+            message: 'Failed to start streaming',
+            type: 'error'
+          })
+        })
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists.vue b/src/renderer/components/TimelineSpace/Contents/Lists.vue
new file mode 100644
index 00000000..57522ccb
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Contents/Lists.vue
@@ -0,0 +1,102 @@
+<template>
+<div name="lists">
+  <div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
+    <toot :message="message" v-on:update="updateToot"></toot>
+  </div>
+  <div class="loading-card" v-loading="lazyLoading"></div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Toot from './Cards/Toot'
+
+export default {
+  name: 'lists',
+  props: ['list_id'],
+  components: { Toot },
+  computed: {
+    ...mapState({
+      timeline: state => state.TimelineSpace.Contents.Lists.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.Lists.lazyLoading
+    })
+  },
+  created () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    this.load()
+      .then(() => {
+        loading.close()
+      })
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
+  },
+  watch: {
+    list_id: function () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.load()
+        .then(() => {
+          loading.close()
+        })
+    }
+  },
+  beforeDestroy () {
+    this.$store.dispatch('TimelineSpace/Contents/Lists/stopStreaming')
+  },
+  destroyed () {
+    if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
+      document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+    }
+  },
+  methods: {
+    async load () {
+      await this.$store.dispatch('TimelineSpace/Contents/Lists/stopStreaming')
+      try {
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/fetchTimeline', this.list_id)
+      } catch (err) {
+        this.$message({
+          message: 'Failed to get timeline',
+          type: 'error'
+        })
+      }
+      this.$store.dispatch('TimelineSpace/Contents/Lists/startStreaming', this.list_id)
+        .catch(() => {
+          this.$message({
+            message: 'Failed to start streaming',
+            type: 'error'
+          })
+        })
+      return 'started'
+    },
+    updateToot (message) {
+      this.$store.commit('TimelineSpace/Contents/Lists/updateToot', message)
+    },
+    onScroll (event) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('lists')[0].clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/Lists/lazyFetchTimeline', {
+          list_id: this.list_id,
+          last: this.timeline[this.timeline.length - 1]
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.loading-card {
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
+</style>
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index 52060b7b..0fe43850 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -1,27 +1,51 @@
 <template>
 <div id="header_menu">
-  <div class="channel">#{{ channelName() }}</div>
+  <div class="channel">{{ title }}</div>
 </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'header-menu',
+  computed: {
+    ...mapState({
+      title: state => state.TimelineSpace.HeaderMenu.title
+    })
+  },
+  created () {
+    this.channelName()
+  },
+  watch: {
+    '$route': function () {
+      this.channelName()
+    }
+  },
   methods: {
     channelName () {
       switch (this.$route.name) {
         case 'home':
-          return 'Home'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
+          break
         case 'notifications':
-          return 'Notification'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Notification')
+          break
         case 'favourites':
-          return 'Favourite'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Favourite')
+          break
         case 'local':
-          return 'LocalTimeline'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'LocalTimeline')
+          break
         case 'public':
-          return 'PublicTimeline'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'PublicTimeline')
+          break
+        case 'lists':
+          this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
+          break
         default:
-          return 'Home'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
+          break
       }
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 4751dc99..84ec1012 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -10,7 +10,7 @@
       </div>
     </el-form>
     <div class="preview">
-      <div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
+      <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
         <img :src="media.preview_url" class="preview-image" />
         <el-button size="small" type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
       </div>
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index b7cfdca3..82051618 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -37,6 +37,15 @@
         <icon name="globe"></icon>
         <span>PublicTimeline</span>
       </el-menu-item>
+      <li class="el-menu-item menu-item-title">
+        <icon name="list-ul"></icon>
+        <span>Lists</span>
+      </li>
+      <template v-for="list in lists">
+        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-bind:key="list.id">
+          <span>#{{ list.title }}</span>
+        </el-menu-item>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -50,7 +59,8 @@ export default {
     ...mapState({
       account: state => state.TimelineSpace.account,
       unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
-      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications
+      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
+      lists: state => state.TimelineSpace.SideMenu.lists
     })
   },
   methods: {
@@ -93,6 +103,22 @@ export default {
       border: none;
       margin-left: 4px;
     }
+
+    .menu-item-title {
+      color: rgb(144, 147, 153);
+      cursor: default;
+    }
+
+    .menu-item-title:hover {
+      background-color: inherit;
+    }
+
+    .sub-menu {
+      padding-left: 45px !important;
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+    }
   }
 }
 </style>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index c7ca63c4..4598e4a3 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -66,6 +66,12 @@ export default new Router({
               path: 'public',
               name: 'public',
               component: require('@/components/TimelineSpace/Contents/Public').default
+            },
+            {
+              path: 'lists/:list_id',
+              name: 'lists',
+              component: require('@/components/TimelineSpace/Contents/Lists').default,
+              props: true
             }
           ]
         }
diff --git a/src/renderer/store/TimelineSpace.js b/src/renderer/store/TimelineSpace.js
index f3fd428f..47d1a1d1 100644
--- a/src/renderer/store/TimelineSpace.js
+++ b/src/renderer/store/TimelineSpace.js
@@ -1,6 +1,7 @@
 import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 import SideMenu from './TimelineSpace/SideMenu'
+import HeaderMenu from './TimelineSpace/HeaderMenu'
 import Modals from './TimelineSpace/Modals'
 import Contents from './TimelineSpace/Contents'
 import router from '../router'
@@ -9,6 +10,7 @@ const TimelineSpace = {
   namespaced: true,
   modules: {
     SideMenu,
+    HeaderMenu,
     Modals,
     Contents
   },
diff --git a/src/renderer/store/TimelineSpace/Contents.js b/src/renderer/store/TimelineSpace/Contents.js
index f50a0abb..4c0acb8b 100644
--- a/src/renderer/store/TimelineSpace/Contents.js
+++ b/src/renderer/store/TimelineSpace/Contents.js
@@ -4,6 +4,7 @@ import Notifications from './Contents/Notifications'
 import Favourites from './Contents/Favourites'
 import Local from './Contents/Local'
 import Public from './Contents/Public'
+import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
 
 const Contents = {
@@ -15,6 +16,7 @@ const Contents = {
     Favourites,
     Local,
     Public,
+    Lists,
     Cards
   }
 }
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists.js b/src/renderer/store/TimelineSpace/Contents/Lists.js
new file mode 100644
index 00000000..21cd93a5
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Contents/Lists.js
@@ -0,0 +1,98 @@
+import { ipcRenderer } from 'electron'
+import Mastodon from 'mastodon-api'
+
+const Lists = {
+  namespaced: true,
+  state: {
+    timeline: [],
+    lazyLoading: false
+  },
+  mutations: {
+    appendTimeline (state, update) {
+      state.timeline = [update].concat(state.timeline)
+    },
+    updateTimeline (state, timeline) {
+      state.timeline = timeline
+    },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
+    updateToot (state, message) {
+      state.timeline = state.timeline.map((toot) => {
+        if (toot.id === message.id) {
+          return message
+        } else if (toot.reblog !== null && toot.reblog.id === message.id) {
+          // When user reblog/favourite a reblogged toot, target message is a original toot.
+          // So, a message which is received now is original toot.
+          const reblog = {
+            reblog: message
+          }
+          return Object.assign(toot, reblog)
+        } else {
+          return toot
+        }
+      })
+    },
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
+    }
+  },
+  actions: {
+    fetchTimeline ({ state, commit, rootState }, listID) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get(`/timelines/list/${listID}`, { limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTimeline', data)
+          resolve(res)
+        })
+      })
+    },
+    startStreaming ({ state, commit, rootState }, listID) {
+      ipcRenderer.on('update-start-list-streaming', (event, update) => {
+        commit('appendTimeline', update)
+      })
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('start-list-streaming', {
+          list_id: listID,
+          account: rootState.TimelineSpace.account
+        })
+        ipcRenderer.once('error-start-list-streaming', (event, err) => {
+          reject(err)
+        })
+      })
+    },
+    stopStreaming ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.removeAllListeners('error-start-list-streaming')
+        ipcRenderer.removeAllListeners('update-start-list-streaming')
+        ipcRenderer.send('stop-list-streaming')
+        resolve()
+      })
+    },
+    lazyFetchTimeline ({ state, commit, rootState }, obj) {
+      return new Promise((resolve, reject) => {
+        if (state.lazyLoading) {
+          return resolve()
+        }
+        commit('changeLazyLoading', true)
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get(`/timelines/list/${obj.list_id}`, { max_id: obj.last.id, limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('insertTimeline', data)
+          commit('changeLazyLoading', false)
+        })
+      })
+    }
+  }
+}
+
+export default Lists
diff --git a/src/renderer/store/TimelineSpace/HeaderMenu.js b/src/renderer/store/TimelineSpace/HeaderMenu.js
new file mode 100644
index 00000000..d1131d46
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/HeaderMenu.js
@@ -0,0 +1,32 @@
+import Mastodon from 'mastodon-api'
+
+const HeaderMenu = {
+  namespaced: true,
+  state: {
+    title: 'Home'
+  },
+  mutations: {
+    updateTitle (state, title) {
+      state.title = title
+    }
+  },
+  actions: {
+    fetchList ({ state, commit, rootState }, listID) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.get(`/lists/${listID}`, {}, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTitle', `#${data.title}`)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default HeaderMenu
diff --git a/src/renderer/store/TimelineSpace/SideMenu.js b/src/renderer/store/TimelineSpace/SideMenu.js
index 4a278f5b..b9471b4c 100644
--- a/src/renderer/store/TimelineSpace/SideMenu.js
+++ b/src/renderer/store/TimelineSpace/SideMenu.js
@@ -1,8 +1,11 @@
+import Mastodon from 'mastodon-api'
+
 const SideMenu = {
   namespaced: true,
   state: {
     unreadHomeTimeline: false,
-    unreadNotifications: false
+    unreadNotifications: false,
+    lists: []
   },
   mutations: {
     changeUnreadHomeTimeline (state, value) {
@@ -10,9 +13,28 @@ const SideMenu = {
     },
     changeUnreadNotifications (state, value) {
       state.unreadNotifications = value
+    },
+    updateLists (state, lists) {
+      state.lists = lists
     }
   },
-  actions: {}
+  actions: {
+    fetchLists ({ commit }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: account.accessToken,
+            api_url: account.baseURL + '/api/v1'
+          }
+        )
+        client.get('/lists', {}, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateLists', data)
+          resolve(res)
+        })
+      })
+    }
+  }
 }
 
 export default SideMenu