diff --git a/src/main/index.js b/src/main/index.js
index 766585f2..159019af 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -514,6 +514,46 @@ ipcMain.on('start-list-streaming', (event, obj) => {
     })
 })
 
+ipcMain.on('stop-list-streaming', (event, _) => {
+  listStreaming.stop()
+  listStreaming = null
+})
+
+let tagStreaming = null
+
+ipcMain.on('start-tag-streaming', (event, obj) => {
+  const account = new Account(accountDB)
+  account.getAccount(obj.account._id)
+    .catch((err) => {
+      log.error(err)
+      event.sender.send('error-start-tag-streaming', err)
+    })
+    .then((account) => {
+      // Stop old tag streaming
+      if (tagStreaming !== null) {
+        tagStreaming.stop()
+        tagStreaming = null
+      }
+
+      tagStreaming = new Streaming(account)
+      tagStreaming.start(
+        `/streaming/hashtag?tag=${obj.tag}`,
+        (update) => {
+          event.sender.send('update-start-tag-streaming', update)
+        },
+        (err) => {
+          log.error(err)
+          event.sender.send('error-start-tag-streaming', err)
+        }
+      )
+    })
+})
+
+ipcMain.on('stop-list-streaming', (event, _) => {
+  listStreaming.stop()
+  listStreaming = null
+})
+
 // sounds
 ipcMain.on('fav-rt-action-sound', (event, _) => {
   const preferences = new Preferences(preferencesDBPath)
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 8a8dd392..b384e79d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -1,11 +1,13 @@
 <template>
-  <div id="tag">
-    <transition-group name="timeline" tag="div">
-      <div class="tag-timeline" v-for="message in timeline" v-bind:key="message.id">
-        <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
-      </div>
-    </transition-group>
-  </div>
+<div name="tag">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <transition-group name="timeline" tag="div">
+    <div class="tag-timeline" v-for="message in timeline" v-bind:key="message.id">
+      <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+</div>
 </template>
 
 <script>
@@ -17,29 +19,125 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline
+      timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
+      unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline
     })
   },
   mounted () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
     this.load(this.$route.params.tag)
+      .then(() => {
+        loading.close()
+      })
+      .catch(() => {
+        loading.close()
+      })
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   watch: {
     '$route': function () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.reset()
       this.load(this.$route.params.tag)
+        .then(() => {
+          loading.close()
+        })
+        .catch(() => {
+          loading.close()
+        })
     }
   },
+  beforeDestroy () {
+    this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
+    this.reset()
+  },
   methods: {
-    load (tag) {
-      this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
+    async load (tag) {
+      await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
+        .catch(() => {
+          this.$message({
+            message: 'Could not fetch timeline',
+            type: 'error'
+          })
+        })
+      this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
+        .catch(() => {
+          this.$message({
+            message: 'Could not start streaming',
+            type: 'error'
+          })
+        })
+      return true
     },
-    updateToot (messag) {
+    reset () {
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/clearTimeline')
+      if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
+        document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+        document.getElementById('scrollable').scrollTop = 0
+      }
     },
-    deleteToot (message) {
+    updateToot (toot) {
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/updateToot', toot)
+    },
+    deleteToot (toot) {
+      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot)
+    },
+    onScroll (event) {
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('tag')[0].clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
+          tag: this.$route.params.tag,
+          last: this.timeline[this.timeline.length - 1]
+        })
+      }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.unread {
+  position: fixed;
+  right: 24px;
+  top: 48px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 0 0 2px 2px;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.loading-card {
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
 </style>
 <style src="@/assets/timeline-transition.scss"></style>
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js
index 73e96f45..9b1cd580 100644
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js
+++ b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js
@@ -1,13 +1,69 @@
+import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 
 const Tag = {
   namespaced: true,
   state: {
-    timeline: []
+    timeline: [],
+    unreadTimeline: [],
+    lazyLoading: false,
+    heading: true
   },
   mutations: {
+    changeHeading (state, value) {
+      state.heading = value
+    },
+    appendTimeline (state, update) {
+      if (state.heading) {
+        state.timeline = [update].concat(state.timeline)
+      } else {
+        state.unreadTimeline = [update].concat(state.unreadTimeline)
+      }
+    },
     updateTimeline (state, timeline) {
       state.timeline = timeline
+    },
+    mergeTimeline (state) {
+      state.timeline = state.unreadTimeline.concat(state.timeline)
+      state.unreadTimeline = []
+    },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
+    archiveTimeline (state) {
+      state.timeline = state.timeline.slice(0, 40)
+    },
+    clearTimeline (state) {
+      state.timeline = []
+      state.unreadTimeline = []
+    },
+    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
+        }
+      })
+    },
+    deleteToot (state, message) {
+      state.timeline = state.timeline.filter((toot) => {
+        if (toot.reblog !== null && toot.reblog.id === message.id) {
+          return false
+        } else {
+          return toot.id !== message.id
+        }
+      })
+    },
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
     }
   },
   actions: {
@@ -25,6 +81,49 @@ const Tag = {
           resolve(res)
         })
       })
+    },
+    startStreaming ({ state, commit, rootState }, tag) {
+      ipcRenderer.on('update-start-tag-streaming', (event, update) => {
+        commit('appendTimeline', update)
+        if (state.heading && Math.random() > 0.8) {
+          commit('archiveTimeline')
+        }
+      })
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('start-tag-streaming', {
+          tag: tag,
+          account: rootState.TimelineSpace.account
+        })
+        ipcRenderer.once('error-start-tag-streaming', (event, err) => {
+          reject(err)
+        })
+      })
+    },
+    stopStreaming ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.removeAllListeners('error-start-tag-streaming')
+        ipcRenderer.removeAllListeners('update-start-tag-streaming')
+        ipcRenderer.send('stop-tag-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/tag/${obj.tag}`, { max_id: obj.last.id, limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('insertTimeline', data)
+          commit('changeLazyLoading', false)
+        })
+      })
     }
   }
 }