diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 57ec2e1b..28937b16 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -11,7 +11,7 @@ export default {
   name: 'Whalebird',
   computed: {
     ...mapState({
-      theme: (state) => {
+      theme: state => {
         return {
           '--theme-background-color': state.App.theme.background_color,
           '--theme-selected-background-color': state.App.theme.selected_background_color,
@@ -24,20 +24,20 @@ export default {
           '--theme-header-menu-color': state.App.theme.header_menu_color,
           '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
           '--theme-scrollbar-color': state.App.theme.scrollbar_color,
+          '--toot-padding': `${state.App.tootPadding}px`,
           '--base-font-size': `${state.App.fontSize}px`,
           '--specified-fonts': state.App.defaultFonts.join(', ')
         }
       }
     })
   },
-  created () {
+  created() {
     this.$store.dispatch('App/watchShortcutsEvents')
-    this.$store.dispatch('App/loadPreferences')
-      .then((conf) => {
-        this.$i18n.i18next.changeLanguage(conf.language.language)
-      })
+    this.$store.dispatch('App/loadPreferences').then(conf => {
+      this.$i18n.i18next.changeLanguage(conf.language.language)
+    })
   },
-  destroyed () {
+  destroyed() {
     this.$store.dispatch('App/removeShortcutsEvents')
   }
 }
@@ -70,6 +70,7 @@ body,
     color: #409eff;
   }
 
+  --toot-padding: 8px;
   --base-font-size: 14px;
 
   font-size: var(--base-font-size);
@@ -78,7 +79,8 @@ body,
     background-color: #d9e1e8;
   }
 
-  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'ヒラギノ角ゴ ProN W3', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'ヒラギノ角ゴ ProN W3', '-apple-system', 'BlinkMacSystemFont',
+    'Segoe UI', 'Roboto', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
   font-family: var(--specified-fonts);
 
@@ -93,7 +95,10 @@ body,
   }
 }
 
-html, body, #app, #global_header {
+html,
+body,
+#app,
+#global_header {
   height: 100%;
   margin: 0;
 }
@@ -118,9 +123,9 @@ p {
 }
 
 .clearfix:after {
-  content:" ";
-  display:block;
-  clear:both;
+  content: ' ';
+  display: block;
+  clear: both;
 }
 </style>
 <style src="animate.css/animate.min.css"></style>
diff --git a/src/renderer/components/Preferences/Appearance/Toot.vue b/src/renderer/components/Preferences/Appearance/Toot.vue
index 23785dfd..8cd38ef4 100644
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@@ -1,72 +1,68 @@
 <template>
-<div
-  class="status"
-  tabIndex="0"
-  ref="status"
-  >
-  <div class="toot">
-    <div class="icon">
-      <img :src="sampleIcon" />
-    </div>
-    <div class="detail">
-      <div class="toot-header">
-        <div class="user">
-          <span class="display-name">{{ username }}</span>
-          <span class="acct">{{ accountName }}</span>
-        </div>
-        <div class="timestamp">
-          {{ timestamp }}
-        </div>
-        <div class="clearfix"></div>
+  <div class="status" tabIndex="0" ref="status">
+    <div class="toot">
+      <div class="icon">
+        <img :src="sampleIcon" />
       </div>
-      <div class="content-wrapper">
-        <div class="content" v-html="status"></div>
-      </div>
-      <div class="tool-box">
-        <el-button type="text" class="reply" :title="$t('cards.toot.reply')">
-          <icon name="reply" scale="0.9"></icon>
-        </el-button>
-        <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
-          <icon name="retweet" scale="0.9"></icon>
-        </el-button>
-        <span class="count">
-          {{ reblogsCount }}
-        </span>
-        <el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
-          <icon name="star" scale="0.9"></icon>
-        </el-button>
-        <span class="count">
-          {{ favouritesCount }}
-        </span>
-        <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
-          <div class="popper toot-menu">
-            <ul class="menu-list">
-              <li role="button">
-                {{ $t('cards.toot.view_toot_detail') }}
-              </li>
-              <li role="button">
-                {{ $t('cards.toot.open_in_browser') }}
-              </li>
-              <li role="button">
-                {{ $t('cards.toot.copy_link_to_toot') }}
-              </li>
-              <li role="button" class="separate">
-                {{ $t('cards.toot.delete') }}
-              </li>
-            </ul>
+      <div class="detail">
+        <div class="toot-header">
+          <div class="user">
+            <span class="display-name">{{ username }}</span>
+            <span class="acct">{{ accountName }}</span>
           </div>
-          <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
-            <icon name="ellipsis-h" scale="0.9"></icon>
+          <div class="timestamp">
+            {{ timestamp }}
+          </div>
+          <div class="clearfix"></div>
+        </div>
+        <div class="content-wrapper">
+          <div class="content" v-html="status"></div>
+        </div>
+        <div class="tool-box">
+          <el-button type="text" class="reply" :title="$t('cards.toot.reply')">
+            <icon name="reply" scale="0.9"></icon>
           </el-button>
-        </popper>
-      </div>
-      <div class="application">
-        {{ $t('cards.toot.via', { application: 'Whalebird' }) }}
+          <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
+            <icon name="retweet" scale="0.9"></icon>
+          </el-button>
+          <span class="count">
+            {{ reblogsCount }}
+          </span>
+          <el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
+            <icon name="star" scale="0.9"></icon>
+          </el-button>
+          <span class="count">
+            {{ favouritesCount }}
+          </span>
+          <popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
+            <div class="popper toot-menu">
+              <ul class="menu-list">
+                <li role="button">
+                  {{ $t('cards.toot.view_toot_detail') }}
+                </li>
+                <li role="button">
+                  {{ $t('cards.toot.open_in_browser') }}
+                </li>
+                <li role="button">
+                  {{ $t('cards.toot.copy_link_to_toot') }}
+                </li>
+                <li role="button" class="separate">
+                  {{ $t('cards.toot.delete') }}
+                </li>
+              </ul>
+            </div>
+            <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
+              <icon name="ellipsis-h" scale="0.9"></icon>
+            </el-button>
+          </popper>
+        </div>
+        <div class="application">
+          {{ $t('cards.toot.via', { application: 'Whalebird' }) }}
+        </div>
       </div>
+      <div class="clearfix"></div>
     </div>
-    <div class="clearfix"></div>
   </div>
-</div>
 </template>
 
 <script>
@@ -87,10 +83,10 @@ export default {
     }
   },
   computed: {
-    sampleIcon () {
+    sampleIcon() {
       return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
     },
-    username () {
+    username() {
       switch (this.displayNameStyle) {
         case DisplayStyle.DisplayNameAndUsername.value:
         case DisplayStyle.DisplayName.value:
@@ -99,7 +95,7 @@ export default {
           return 'whalebird@mastodon.social'
       }
     },
-    accountName () {
+    accountName() {
       switch (this.displayNameStyle) {
         case DisplayStyle.DisplayNameAndUsername.value:
           return 'whalebird@mastodon.social'
@@ -107,7 +103,7 @@ export default {
           return ''
       }
     },
-    timestamp () {
+    timestamp() {
       switch (this.timeFormat) {
         case TimeFormat.Absolute.value:
           return '2018-08-12 20:35:41'
@@ -115,13 +111,13 @@ export default {
           return moment('2018-08-12 20:35:41').fromNow()
       }
     },
-    status () {
+    status() {
       return '<p>Sample status</p>'
     },
-    reblogsCount () {
+    reblogsCount() {
       return 1
     },
-    favouritesCount () {
+    favouritesCount() {
       return 5
     }
   }
@@ -183,7 +179,7 @@ export default {
       color: var(--theme-primary-color);
 
       .content {
-        margin: 4px 0 8px;
+        margin: var(--toot-padding) 0;
         word-wrap: break-word;
       }
 
@@ -270,5 +266,4 @@ export default {
   background-color: var(--theme-selected-background-color);
   outline: 0;
 }
-
 </style>
diff --git a/src/renderer/components/molecules/Toot.vue b/src/renderer/components/molecules/Toot.vue
index c6e4a923..42befcc5 100644
--- a/src/renderer/components/molecules/Toot.vue
+++ b/src/renderer/components/molecules/Toot.vue
@@ -622,7 +622,7 @@ export default {
       color: var(--theme-primary-color);
 
       .content {
-        margin: 4px 0 8px;
+        margin: var(--toot-padding) 0;
         word-wrap: break-word;
       }
 
diff --git a/src/renderer/store/App.ts b/src/renderer/store/App.ts
index c3a4d8c9..4814da52 100644
--- a/src/renderer/store/App.ts
+++ b/src/renderer/store/App.ts
@@ -10,7 +10,7 @@ import DefaultFonts from '@/utils/fonts'
 import { RootState } from '@/store'
 import { Notify } from '~/src/types/notify'
 
-export interface AppState {
+export type AppState = {
   theme: ThemeColorType
   fontSize: number
   displayNameStyle: number
@@ -21,6 +21,7 @@ export interface AppState {
   ignoreCW: boolean
   ignoreNFSW: boolean
   hideAllAttachments: boolean
+  tootPadding: number
 }
 
 const state = (): AppState => ({
@@ -33,6 +34,7 @@ const state = (): AppState => ({
     favourite: true,
     follow: true
   },
+  tootPadding: 8,
   timeFormat: TimeFormat.Absolute.value,
   language: Language.en.key,
   defaultFonts: DefaultFonts,
@@ -46,6 +48,7 @@ const MUTATION_TYPES = {
   UPDATE_FONT_SIZE: 'updateFontSize',
   UPDATE_DISPLAY_NAME_STYLE: 'updateDisplayNameStyle',
   UPDATE_NOTIFY: 'updateNotify',
+  UPDATE_TOOT_PADDING: 'updateTootPadding',
   UPDATE_TIME_FORMAT: 'updateTimeFormat',
   UPDATE_LANGUAGE: 'updateLanguage',
   ADD_FONT: 'addFont',
@@ -67,6 +70,9 @@ const mutations: MutationTree<AppState> = {
   [MUTATION_TYPES.UPDATE_NOTIFY]: (state: AppState, notify: Notify) => {
     state.notify = notify
   },
+  [MUTATION_TYPES.UPDATE_TOOT_PADDING]: (state: AppState, value: number) => {
+    state.tootPadding = value
+  },
   [MUTATION_TYPES.UPDATE_TIME_FORMAT]: (state: AppState, format: number) => {
     state.timeFormat = format
   },
@@ -104,6 +110,7 @@ const actions: ActionTree<AppState, RootState> = {
         ipcRenderer.removeAllListeners('response-get-preferences')
         reject(err)
       })
+      // TODO: any
       ipcRenderer.once('response-get-preferences', (_, conf: any) => {
         ipcRenderer.removeAllListeners('error-get-preferences')
         dispatch('updateTheme', conf.appearance as any)
@@ -112,6 +119,7 @@ const actions: ActionTree<AppState, RootState> = {
         commit(MUTATION_TYPES.UPDATE_NOTIFY, conf.notification.notify as Notify)
         commit(MUTATION_TYPES.UPDATE_TIME_FORMAT, conf.appearance.timeFormat as number)
         commit(MUTATION_TYPES.UPDATE_LANGUAGE, conf.language.language as string)
+        commit(MUTATION_TYPES.UPDATE_TOOT_PADDING, conf.appearance.tootPadding as number)
         commit(MUTATION_TYPES.ADD_FONT, conf.appearance.font as string)
         commit(MUTATION_TYPES.UPDATE_IGNORE_CW, conf.general.timeline.cw as boolean)
         commit(MUTATION_TYPES.UPDATE_IGNORE_NFSW, conf.general.timeline.nfsw as boolean)