diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
index eef0c45a..cb22fa40 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="toot-detail">
-    <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="index">
+  <div class="toot-detail" ref="detail">
+    <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
       <toot :message="message"></toot>
     </div>
-    <div class="original-toot">
+    <div class="original-toot" ref="original">
       <toot :message="message"></toot>
     </div>
-    <div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="index">
+    <div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="'descendants' + index">
       <toot :message="message"></toot>
     </div>
   </div>
@@ -32,6 +32,10 @@ export default {
   methods: {
     load () {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.message)
+        .then(() => {
+          const toot = this.$refs.original
+          toot.scrollIntoView()
+        })
         .catch(() => {
           this.$message({
             message: 'Could not fetch toot detail',
@@ -44,8 +48,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.original-toot .toot {
-  background-color: #f2f6fc;
-  outline: 0;
+.original-toot{
+  .toot{
+    background-color: #f2f6fc;
+    outline: 0;
+  }
 }
 </style>