diff --git a/src/renderer/components/Preferences.vue b/src/renderer/components/Preferences.vue
index f7458499..57343750 100644
--- a/src/renderer/components/Preferences.vue
+++ b/src/renderer/components/Preferences.vue
@@ -3,10 +3,10 @@
     <el-header class="header">
       <el-row>
         <el-col :span="23">
-          <h3>{{ $t('preferences.title') }}</h3>
+          <h1>{{ $t('preferences.title') }}</h1>
         </el-col>
         <el-col :span="1">
-          <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+          <el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
         </el-col>
       </el-row>
     </el-header>
@@ -77,9 +77,10 @@ export default {
   .header {
     text-align: center;
     border-bottom: 1px solid var(--theme-border-color);
+    user-select: none;
 
     .close-button {
-      font-size: 24px;
+      font-size: 28px;
     }
   }
 
@@ -88,31 +89,16 @@ export default {
     padding-left: 24px;
 
     .el-menu {
-      background-color: var(--theme-background-color);
       border-right: solid 1px var(--theme-border-color);
     }
 
     .setting-menu /deep/ {
       height: 100%;
+      user-select: none;
 
       .icon {
         margin-right: 9px;
       }
-
-      .el-menu-item {
-        transition: none;
-        -webkit-transition: none;
-
-        .icon {
-          color: var(--theme-secondary-color);
-        }
-      }
-
-      .is-active {
-        .icon {
-          color: #409eff;
-        }
-      }
     }
   }
 }
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index 45e5f33a..2084e03b 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -1,9 +1,9 @@
 <template>
 <div id="account">
   <h2>{{ $t('preferences.account.title') }}</h2>
-  <div class="connected-account">
+  <el-form class="connected-account section" size="small">
     <h3>{{ $t('preferences.account.connected') }}</h3>
-    <template>
+    <el-form-item>
       <el-table
         :data="accounts"
         tooltip-effect="dark"
@@ -23,7 +23,8 @@
           <template slot-scope="scope">
             <el-button
               @click.native.prevent="removeAccount(scope.$index, accounts)"
-              type="text">
+              type="text"
+              class="action">
               <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
             </el-button>
           </template>
@@ -32,30 +33,30 @@
           :label="$t('preferences.account.order')"
           width="60">
           <template slot-scope="scope">
-            <div>
-              <el-button class="arrow-up" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
+            <div class="allow-up">
+              <el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
             </div>
-            <div>
-              <el-button class="arrow-down" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
+            <div class="allow-down">
+              <el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
             </div>
           </template>
         </el-table-column>
       </el-table>
-    </template>
-  </div>
-  <div class="reset">
-    <el-popover
-      placement="top"
-      width="160"
-      v-model="deletePopoverVisible">
-      <p>{{ $t('preferences.account.confirm_message') }}</p>
-      <div style="text-align: right; margin: 0">
-        <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
-        <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
-      </div>
-      <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
-    </el-popover>
-  </div>
+    </el-form-item>
+    <el-form-item>
+      <el-popover
+        placement="top"
+        width="160"
+        v-model="deletePopoverVisible">
+        <p>{{ $t('preferences.account.confirm_message') }}</p>
+        <div style="text-align: right; margin: 0">
+          <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
+          <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
+        </div>
+        <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
+      </el-popover>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -130,32 +131,38 @@ export default {
 
 <style lang="scss" scoped>
 #account {
-  .el-table /deep/ {
-    tr,
-    th,
-    td {
-      background-color: var(--theme-background-color);
-      color: var(--theme-secondary-color);
-      border-bottom: 1px solid var(--theme-border-color);
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
+  }
+
+  .connected-account {
+    .el-table /deep/ {
+      tr,
+      th,
+      td {
+        background-color: var(--theme-background-color);
+        color: var(--theme-primary-color);
+        border-bottom: 1px solid var(--theme-border-color);
+      }
     }
 
-  }
+    .el-table::before {
+      background-color: var(--theme-border-color);
+    }
 
-  .el-table::before {
-    background-color: var(--theme-border-color);
-  }
+    .allow-up,
+    .allow-down {
+      display: inline-block;
+    }
 
-  .reset {
-    margin: 24px 12px;
-    text-align: right;
+    .action {
+      font-size: var(--base-font-size);
+    }
   }
 }
 
-.allow-up {
-  padding: 0;
-}
-
-.allow-down {
-  padding: 0;
-}
 </style>
diff --git a/src/renderer/components/Preferences/Appearance.vue b/src/renderer/components/Preferences/Appearance.vue
index c74c2017..d6304ffe 100644
--- a/src/renderer/components/Preferences/Appearance.vue
+++ b/src/renderer/components/Preferences/Appearance.vue
@@ -1,11 +1,10 @@
 <template>
 <div id="appearance">
   <h2>{{ $t('preferences.appearance.title') }}</h2>
-  <div class="theme section">
+  <el-form class="theme section" size="small" label-position="top">
     <div class="left">
-      <h4>{{ $t('preferences.appearance.theme_color') }}</h4>
-      <div class="status">
-        <el-select v-model="theme" placeholder="theme">
+      <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
+        <el-select id="theme" v-model="theme" placeholder="theme">
           <el-option
             v-for="t in themes"
             :key="t.key"
@@ -13,7 +12,7 @@
             :value="t.key">
           </el-option>
         </el-select>
-      </div>
+      </el-form-item>
     </div>
     <div class="right">
       <Toot
@@ -21,30 +20,27 @@
         :timeFormat="timeFormat"
         ></Toot>
     </div>
-  </div>
-  <div class="color-pallet" v-if="customizeThemeColor">
+  </el-form>
+  <div class="color-pallet section" v-if="customizeThemeColor">
     <color-pallet></color-pallet>
   </div>
-  <div class="font section">
-    <h4>{{ $t('preferences.appearance.font_family') }}</h4>
-    <span class="status">
-      <el-select v-model="font" placeholder="fonts">
+  <el-form class="font section" size="small" label-position="top">
+    <el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
+      <el-select id="font-family" v-model="font" placeholder="fonts">
         <el-option
           v-for="f in fontList"
           :key="f"
           :label="f"
           :value="f" />
       </el-select>
-    </span>
-    <h4>{{ $t('preferences.appearance.font_size') }}</h4>
-    <span class="status">
-      <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-    </span>
-  </div>
-  <div class="display-style section">
-    <h4>{{ $t('preferences.appearance.display_style.title') }}</h4>
-    <span class="status">
-      <el-select v-model="displayNameStyle" placeholder="style">
+    </el-form-item>
+    <el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
+      <el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+    </el-form-item>
+  </el-form>
+  <el-form class="display-style section" size="small" label-position="top">
+    <el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
+      <el-select id="display-style" v-model="displayNameStyle" placeholder="style">
         <el-option
           v-for="style in nameStyles"
           :key="style.value"
@@ -52,12 +48,11 @@
           :value="style.value">
         </el-option>
       </el-select>
-    </span>
-  </div>
-  <div class="time-format section">
-    <h4>{{ $t('preferences.appearance.time_format.title') }}</h4>
-    <span class="status">
-      <el-select v-model="timeFormat" placeholder="format">
+    </el-form-item>
+  </el-form>
+  <el-form class="time-format section" size="small" label-position="top">
+    <el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
+      <el-select id="time-format" v-model="timeFormat" placeholder="format">
         <el-option
           v-for="format in timeFormats"
           :key="format.value"
@@ -65,8 +60,8 @@
           :value="format.value">
         </el-option>
       </el-select>
-    </span>
-  </div>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -160,20 +155,24 @@ export default {
 
 <style lang="scss" scoped>
 #appearance {
-  color: var(--theme-secondary-color);
   box-sizing: border-box;
 
   .theme {
     display: flex;
     align-items: flex-start;
+    justify-content: space-between;
 
     .right {
       margin-left: 40px;
     }
   }
 
-  .section {
-    margin-bottom: 48px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 }
 </style>
diff --git a/src/renderer/components/Preferences/Appearance/ColorPallet.vue b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
index 5bed3edb..4ea7e5b9 100644
--- a/src/renderer/components/Preferences/Appearance/ColorPallet.vue
+++ b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
@@ -1,36 +1,46 @@
 <template>
-<div class="pallet">
+<el-form class="pallet" label-position="top" size="small">
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.background_color') }}</div>
-    <el-color-picker v-model="background"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.selected_background_color') }}</div>
-    <el-color-picker v-model="selectedBackground"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.background_color') ">
+      <el-color-picker v-model="background"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.selected_background_color')">
+      <el-color-picker v-model="selectedBackground"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.global_header_color') }}</div>
-    <el-color-picker v-model="globalHeader"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.side_menu_color') }}</div>
-    <el-color-picker v-model="sideMenu"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.global_header_color')">
+      <el-color-picker v-model="globalHeader"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.side_menu_color')">
+      <el-color-picker v-model="sideMenu"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.primary_color') }}</div>
-    <el-color-picker v-model="primary"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.regular_color') }}</div>
-    <el-color-picker v-model="regular"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.primary_color')">
+      <el-color-picker v-model="primary"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.regular_color')">
+      <el-color-picker v-model="regular"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.secondary_color') }}</div>
-    <el-color-picker v-model="secondary"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.border_color') }}</div>
-    <el-color-picker v-model="border"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.secondary_color')">
+      <el-color-picker v-model="secondary"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.border_color')">
+      <el-color-picker v-model="border"></el-color-picker>
+    </el-form-item>
   </div>
   <div class="item">
-    <div class="title">{{ $t('preferences.appearance.custom_theme.header_menu_color') }}</div>
-    <el-color-picker v-model="headerMenu"></el-color-picker>
-    <div class="title">{{ $t('preferences.appearance.custom_theme.wrapper_mask_color') }}</div>
-    <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.header_menu_color')">
+      <el-color-picker v-model="headerMenu"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')">
+      <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
+    </el-form-item>
   </div>
-</div>
+</el-form>
 </template>
 
 <script>
@@ -150,8 +160,14 @@ export default {
     text-align: center;
     margin: 0 12px;
 
-    .title {
-      margin: 8px 0;
+    .el-form-item {
+      margin-bottom: 0;
+    }
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+      text-align: center;
+      line-height: unset;
     }
   }
 }
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index 005e6728..003fe908 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -1,28 +1,24 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="sounds section">
+  <el-form class="sounds section" label-position="right" label-width="250px" size="small">
     <h3>{{ $t('preferences.general.sounds.title') }}</h3>
     <p class="description">{{ $t('preferences.general.sounds.description') }}</p>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="sound_fav_rb"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.general.sounds.fav_rb') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="sound_toot"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.general.sounds.toot') }}</span>
-    </div>
-  </div>
+    <el-form-item for="fav_rb" :label="$t('preferences.general.sounds.fav_rb')">
+      <el-switch
+        id="fav_rb"
+        v-model="sound_fav_rb"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="sound_toot" :label="$t('preferences.general.sounds.toot')">
+      <el-switch
+        id="sound_toot"
+        v-model="sound_toot"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -74,8 +70,12 @@ export default {
     margin: 24px 0 20px;
   }
 
-  .section {
-    margin-bottom: 48px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 
   .selection {
diff --git a/src/renderer/components/Preferences/Language.vue b/src/renderer/components/Preferences/Language.vue
index d3116651..7be63f4c 100644
--- a/src/renderer/components/Preferences/Language.vue
+++ b/src/renderer/components/Preferences/Language.vue
@@ -1,18 +1,19 @@
 <template>
 <div id="language">
   <h2>{{ $t('preferences.language.title') }}</h2>
-  <div class="display-language">
-    <p class="description">{{ $t('preferences.language.language_description') }}</p>
-    <el-select v-model="displayLanguage" placeholder="style">
-      <el-option
-        v-for="lang in languages"
-        :key="lang.key"
-        :label="lang.name"
-        :value="lang.key">
-      </el-option>
-    </el-select>
-    <p class="notice">{{ $t('preferences.language.notice') }}</p>
-  </div>
+  <el-form class="display-language section" label-position="top" size="small">
+    <el-form-item for="language" :label="$t('preferences.language.language_description')">
+      <el-select id="language" v-model="displayLanguage" placeholder="style">
+        <el-option
+          v-for="lang in languages"
+          :key="lang.key"
+          :label="lang.name"
+          :value="lang.key">
+        </el-option>
+      </el-select>
+      <p class="notice">{{ $t('preferences.language.notice') }}</p>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -72,8 +73,12 @@ export default {
 
 <style lang="scss" scoped>
 #language {
-  .description {
-    margin: 24px 0 20px;
+  .section /deep/ {
+    margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 
   .notice {
diff --git a/src/renderer/components/Preferences/Notification.vue b/src/renderer/components/Preferences/Notification.vue
index 95f55629..831407e1 100644
--- a/src/renderer/components/Preferences/Notification.vue
+++ b/src/renderer/components/Preferences/Notification.vue
@@ -1,45 +1,36 @@
 <template>
 <div id="notification">
   <h2>{{ $t('preferences.notification.title') }}</h2>
-  <div class="enable">
+  <el-form class="section" label-position="right" label-width="250px" size="small">
     <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyReply"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.reply') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyReblog"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.reblog') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyFavourite"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.favourite') }}</span>
-    </div>
-    <div class="selection">
-      <span class="value">
-        <el-switch
-          v-model="notifyFollow"
-          active-color="#13ce66">
-        </el-switch>
-      </span>
-      <span class="title">{{ $t('preferences.notification.enable.follow') }}</span>
-    </div>
-  </div>
+    <el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
+      <el-switch
+        id="notifyReply"
+        v-model="notifyReply"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
+      <el-switch
+        id="notifyReblog"
+        v-model="notifyReblog"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
+      <el-switch
+        id="notifyFavourite"
+        v-model="notifyFavourite"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+    <el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
+      <el-switch
+        v-model="notifyFollow"
+        active-color="#13ce66">
+      </el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -106,12 +97,11 @@ export default {
     margin: 24px 0 20px;
   }
 
-  .selection {
-    margin: 12px 0;
+  .section /deep/ {
+    margin-bottom: 40px;
 
-    .title {
-      margin-left: 12px;
-      font-weight: 800;
+    .el-form-item__label {
+      color: var(--theme-primary-color);
     }
   }
 }
diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
index b21a150b..d54fb4d8 100644
--- a/src/renderer/components/Settings.vue
+++ b/src/renderer/components/Settings.vue
@@ -3,10 +3,10 @@
   <el-header class="header">
     <el-row>
       <el-col :span="23">
-        <h3>{{ $t('settings.title') }}</h3>
+        <h1>{{ $t('settings.title') }}</h1>
       </el-col>
       <el-col :span="1">
-        <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+        <el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
       </el-col>
     </el-row>
   </el-header>
@@ -72,10 +72,11 @@ export default {
   .header {
     text-align: center;
     border-bottom: 1px solid var(--theme-border-color);
+    user-select: none;
   }
 
   .close-button {
-    font-size: 24px;
+    font-size: 28px;
   }
 
   .menu {
@@ -83,31 +84,16 @@ export default {
     padding-left: 24px;
 
     .el-menu {
-      background-color: var(--theme-background-color);
       border-right: solid 1px var(--theme-border-color);
     }
 
     .setting-menu /deep/ {
       height: 100%;
+      user-select: none;
 
       .icon {
         margin-right: 9px;
       }
-
-      .el-menu-item {
-        transition: none;
-        -webkit-transition: none;
-
-        .icon {
-          color: var(--theme-secondary-color);
-        }
-      }
-
-      .is-active {
-        .icon {
-          color: #409eff;
-        }
-      }
     }
   }
 }
diff --git a/src/renderer/components/Settings/General.vue b/src/renderer/components/Settings/General.vue
index ea86d576..e2dcba03 100644
--- a/src/renderer/components/Settings/General.vue
+++ b/src/renderer/components/Settings/General.vue
@@ -1,20 +1,22 @@
 <template>
 <div id="general">
-  <div class="toot section">
+  <h2>{{ $t('settings.general.title') }}</h2>
+  <el-form class="toot section" label-width="250px" label-position="right" size="medium">
     <h3>{{ $t('settings.general.toot.title') }}</h3>
-    <p class="description">{{ $t('settings.general.toot.visibility.description') }}</p>
-    <el-select v-model="tootVisibility" placeholder="visibility">
-      <el-option
-        v-for="v in visibilities"
-        :key="v.value"
-        :label="$t(v.name)"
-        :value="v.value">
-      </el-option>
-    </el-select>
-    <p class="description">{{ $t('settings.general.toot.sensitive.description') }}</p>
-    <el-switch v-model="tootSensitive">
-    </el-switch>
-  </div>
+    <el-form-item for="visibility" :label="$t('settings.general.toot.visibility.description')">
+      <el-select id="visibility" v-model="tootVisibility" placeholder="visibility">
+        <el-option
+          v-for="v in visibilities"
+          :key="v.value"
+          :label="$t(v.name)"
+          :value="v.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item for="sensitive" :label="$t('settings.general.toot.sensitive.description')">
+      <el-switch id="sensitive" v-model="tootSensitive"></el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -58,12 +60,12 @@ export default {
 
 <style lang="scss" scoped>
 #general {
-  .description {
-    margin: 32px 0 20px;
-  }
-
-  .section {
+  .section /deep/ {
     margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 }
 </style>
diff --git a/src/renderer/components/Settings/Timeline.vue b/src/renderer/components/Settings/Timeline.vue
index cfee03fb..266f21e1 100644
--- a/src/renderer/components/Settings/Timeline.vue
+++ b/src/renderer/components/Settings/Timeline.vue
@@ -1,37 +1,20 @@
 <template>
 <div id="timeline">
-  <div class="unread-notification section">
+  <h2>{{ $t('settings.timeline.title') }}</h2>
+  <el-form class="unread-notification section" size="medium" label-position="right" label-width="250px">
     <h3>{{ $t('settings.timeline.unread_notification.title') }}</h3>
     <p class="description">{{ $t('settings.timeline.unread_notification.description') }}</p>
-    <table class="table">
-      <tbody>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.direct') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="direct" />
-          </td>
-        </tr>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.local') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="local" />
-          </td>
-        </tr>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.public') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="public" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+
+    <el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
+      <el-switch v-model="direct" id="direct" />
+    </el-form-item>
+    <el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
+      <el-switch v-model="local" id="local" />
+    </el-form-item>
+    <el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
+      <el-switch v-model="public" id="public" />
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -82,23 +65,11 @@ export default {
     margin: 32px 0 20px;
   }
 
-  .section {
+  .section /deep/ {
     margin-bottom: 40px;
-  }
 
-  .table {
-    tr {
-      height: 3rem;
-    }
-
-    .title {
-      width: 200px;
-      text-align: right;
-    }
-
-    .status {
-      width: 200px;
-      text-align: center;
+    .el-form-item__label {
+      color: var(--theme-primary-color);
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 5e0624a9..b1d3b21f 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -45,7 +45,7 @@
             </el-button>
           </popper>
         </div>
-        <div class="icon">
+        <div class="icon" role="presentation">
           <FailoverImg :src="account.avatar" :alt="`Avatar of ${account.username}`" />
         </div>
         <div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index d10c0d1b..7f1f3a69 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -1,6 +1,8 @@
 <template>
-<div id="header_menu">
-  <div class="channel">{{ title }}</div>
+<nav id="header_menu" :aria-label="title">
+  <div class="channel">
+    <h1>{{ title }}</h1>
+  </div>
   <div class="tools">
     <el-button type="text" class="action" @click="openNewTootModal" :title="$t('header_menu.new_toot')">
       <icon name="regular/edit" scale="1.1"></icon>
@@ -15,23 +17,25 @@
       trigger="click"
       v-model="filterVisible">
       <div>
-        <el-form role="form">
-          <el-form-item :label="$t('header_menu.filter.title')">
-            <div class="input-wrapper">
+        <el-form role="form" label-position="left" label-width="125px" size="medium">
+          <el-form-item for="filter" :label="$t('header_menu.filter.title')">
+            <div class="el-input">
               <input
+                id="filter"
+                class="el-input__inner"
                 v-model="filter"
                 :placeholder="$t('header_menu.filter.placeholder')"
                 v-shortkey.avoid
-                aria-label="filter words"
-                tilte="filter"
-                ></input>
+                :aria-label="$t('header_menu.filter.placeholder')"
+                :title="$t('header_menu.filter.placeholder')"
+                >
             </div>
           </el-form-item>
-          <el-form-item :label="$t('header_menu.filter.show_reblogs')" v-if="extrasFilterable()">
-            <el-checkbox v-model="showReblogs"></el-checkbox>
+          <el-form-item for="show-reblogs" :label="$t('header_menu.filter.show_reblogs')" v-if="extrasFilterable()">
+            <el-checkbox id="show-reblogs" v-model="showReblogs"></el-checkbox>
           </el-form-item>
-          <el-form-item :label="$t('header_menu.filter.show_replies')" v-if="extrasFilterable()">
-            <el-checkbox v-model="showReplies"></el-checkbox>
+          <el-form-item for="show-replies" :label="$t('header_menu.filter.show_replies')" v-if="extrasFilterable()">
+            <el-checkbox id="show-replies" v-model="showReplies"></el-checkbox>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="applyFilter(filter)">{{ $t('header_menu.filter.apply') }}</el-button>
@@ -46,7 +50,7 @@
       <icon name="cog" scale="1.1"></icon>
     </el-button>
   </div>
-</div>
+</nav>
 </template>
 
 <script>
@@ -258,16 +262,19 @@ export default {
 <style lang="scss" scoped>
 #header_menu {
   background-color: var(--theme-background-color);
-  padding: 12px 24px;
+  padding: 10px 20px;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  align-items: stretch;
+  align-items: center;
+  user-select: none;
 
   .channel {
-    font-weight: bold;
-    font-size: 18px;
     margin-right: auto;
+
+    h1 {
+      margin: 0;
+    }
   }
 
   .tools {
@@ -289,7 +296,7 @@ export default {
   position: relative;
   font-size: 14px;
   display: inline-block;
-  width: 100%;
+  max-width: 100%;
 
   input {
     background-color: #fff;
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index 6a0cf592..201e01d5 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -1,11 +1,11 @@
 <template>
 <transition name="image-viewer">
-  <div id="image" v-show="modalOpen" @click="close">
+  <div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
     <div class="image-wrapper" v-shortkey="modalOpen ? {close: ['esc']} : {}" @shortkey="closeHandle">
       <div class="image-header">
         <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
       </div>
-      <div class="image-content">
+      <div class="image-content" role="presentation">
         <span class="button-area"><el-button type="text" v-show="showLeft" v-shortkey="['arrowleft']" @shortkey.native="decrementIndex()"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
         <Media :src="imageURL" :type="imageType"></Media>
         <span class="button-area"><el-button type="text" v-show="showRight" v-shortkey="['arrowright']" @shortkey.native="incrementIndex()"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
diff --git a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
index 17228aaf..9916c957 100644
--- a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
+++ b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
@@ -5,12 +5,11 @@
   width="400px"
   custom-class="mute-confirm"
   >
-  <div class="description">
-    <span class="label">
-      {{ $t('modals.mute_confirm.body') }}
-    </span>
-    <el-switch v-model="notify"></el-switch>
-  </div>
+  <el-form class="description">
+    <el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
+      <el-switch id="notify" v-model="notify"></el-switch>
+    </el-form-item>
+  </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
     <el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
@@ -56,11 +55,5 @@ export default {
 <style lang="scss" scoped>
 .description {
   text-align: center;
-
-  .label {
-    font-size: 14px;
-    color: #606266;
-    padding: 0 32px 0 0;
-  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index e0995b70..62424c0e 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -67,24 +67,24 @@
         </el-dropdown>
       </div>
       <div class="sensitive" v-show="attachedMedias.length > 0">
-        <el-button size="small" type="text" @click="changeSensitive" :title="$t('modals.new_toot.change_sensitive')">
+        <el-button size="small" type="text" @click="changeSensitive" :title="$t('modals.new_toot.change_sensitive')" :aria-pressed="sensitive">
           <icon name="eye-slash" v-show="!sensitive"></icon>
           <icon name="eye" v-show="sensitive"></icon>
         </el-button>
       </div>
       <div class="content-warning">
-        <el-button size="small" type="text" @click="showContentWarning = !showContentWarning" :title="$t('modals.new_toot.add_cw')" :class="showContentWarning? '' : 'clickable'">
+        <el-button size="small" type="text" @click="showContentWarning = !showContentWarning" :title="$t('modals.new_toot.add_cw')" :class="showContentWarning? '' : 'clickable'" :aria-pressed="showContentWarning">
           <span class="cw-text">CW</span>
         </el-button>
       </div>
       <div class="pined-hashtag">
-        <el-button size="small" type="text" @click="pinedHashtag = !pinedHashtag" :title="$t('modals.new_toot.pined_hashtag')" :class="pinedHashtag? '' : 'clickable'">
+        <el-button size="small" type="text" @click="pinedHashtag = !pinedHashtag" :title="$t('modals.new_toot.pined_hashtag')" :class="pinedHashtag? '' : 'clickable'" :aria-pressed="pinedHashtag">
           <icon name="hashtag"></icon>
         </el-button>
       </div>
       <span class="text-count">{{ tootMax - status.length }}</span>
       <el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
-      <el-button class="toot-action" size="small" type="primary" @click="toot" v-loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
+      <el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
       <div class="clearfix"></div>
     </div>
   </el-dialog>
diff --git a/src/renderer/components/molecules/Notification/Favourite.vue b/src/renderer/components/molecules/Notification/Favourite.vue
index 9405546f..03359770 100644
--- a/src/renderer/components/molecules/Notification/Favourite.vue
+++ b/src/renderer/components/molecules/Notification/Favourite.vue
@@ -20,14 +20,14 @@
       <div class="action-detail">
         <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> favourited your status
       </div>
-      <div class="action-icon">
+      <div class="action-icon" role="presentation">
         <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
       </div>
     </div>
     <div class="clearfix"></div>
     <div class="target" v-on:dblclick="openDetail(message.status)">
       <div class="icon" @click="openUser(message.status.account)">
-        <FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
+        <FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
       </div>
       <div class="detail">
         <div class="toot-header">
@@ -59,8 +59,8 @@
             <el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
               <icon name="eye" class="hide"></icon>
             </el-button>
-            <div class="media" v-for="media in mediaAttachments(message.status)">
-              <FailoverImg :src="media.preview_url" alt="attached media" />
+            <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
+              <FailoverImg :src="media.preview_url" :title="media.description" />
               <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
               <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
             </div>
diff --git a/src/renderer/components/molecules/Notification/Follow.vue b/src/renderer/components/molecules/Notification/Follow.vue
index 3412be54..b39c1b07 100644
--- a/src/renderer/components/molecules/Notification/Follow.vue
+++ b/src/renderer/components/molecules/Notification/Follow.vue
@@ -16,7 +16,7 @@
     <div class="action-detail">
       <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> is now following you
     </div>
-    <div class="action-icon">
+    <div class="action-icon" role="presentation">
       <FailoverImg :src="message.account.avatar" />
     </div>
   </div>
diff --git a/src/renderer/components/molecules/Notification/Reblog.vue b/src/renderer/components/molecules/Notification/Reblog.vue
index c4bc98f2..ed45a4b4 100644
--- a/src/renderer/components/molecules/Notification/Reblog.vue
+++ b/src/renderer/components/molecules/Notification/Reblog.vue
@@ -20,13 +20,13 @@
       <div class="action-detail">
         <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> boosted your status
       </div>
-      <div class="action-icon">
+      <div class="action-icon" role="presentation">
         <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
       </div>
     </div>
     <div class="clearfix"></div>
     <div class="target" v-on:dblclick="openDetail(message.status)">
-      <div class="icon" @click="openUser(message.status.account)">
+      <div class="icon" @click="openUser(message.status.account)" role="presentation">
         <FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
       </div>
       <div class="detail">
@@ -61,8 +61,8 @@
             <el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
               <icon name="eye" class="hide"></icon>
             </el-button>
-            <div class="media" v-for="media in mediaAttachments(message.status)">
-              <FailoverImg :src="media.preview_url" alt="attached media" />
+            <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
+              <FailoverImg :src="media.preview_url" :title="media.description" />
               <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
               <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
             </div>
diff --git a/src/renderer/components/molecules/Toot.vue b/src/renderer/components/molecules/Toot.vue
index 8d6f964f..06cc1369 100644
--- a/src/renderer/components/molecules/Toot.vue
+++ b/src/renderer/components/molecules/Toot.vue
@@ -13,7 +13,7 @@
     Filtered
   </div>
   <div v-show="!filtered(message)" class="toot">
-    <div class="icon">
+    <div class="icon" role="presentation">
       <FailoverImg
         :src="originalMessage(message).account.avatar"
         @click="openUser(originalMessage(message).account)"
@@ -63,7 +63,7 @@
       </div>
       <div class="reblogger" v-show="message.reblog !== null">
         <icon name="retweet"></icon>
-        <span class="reblogger-icon" @click="openUser(message.account)">
+        <span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
           <FailoverImg
             :src="message.account.avatar"
             :alt="`Avatar of ${message.account.username}`" />
@@ -73,7 +73,7 @@
         </span>
       </div>
       <div class="tool-box">
-        <el-button type="text" @click="openReply(message)" class="reply" :title="$t('cards.toot.reply')">
+        <el-button type="text" @click="openReply(message)" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
           <icon name="reply" scale="0.9"></icon>
         </el-button>
         <el-button v-show="locked(message)" type="text" class="locked">
@@ -88,13 +88,13 @@
         <span class="count">
           {{ reblogsCount(message) }}
         </span>
-        <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited animated bounceIn' : 'favourite'" :title="$t('cards.toot.fav')">
+        <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited animated bounceIn' : 'favourite'" :title="$t('cards.toot.fav')" :aria-label="$t('cards.toot.fav')">
           <icon name="star" scale="0.9"></icon>
         </el-button>
         <span class="count">
           {{ favouritesCount(message) }}
         </span>
-        <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" v-show="pinned">
+        <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
           <icon name="thumbtack" scale="0.9"></icon>
         </el-button>
         <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
diff --git a/src/renderer/components/molecules/User.vue b/src/renderer/components/molecules/User.vue
index ab0eb3e0..09e6733d 100644
--- a/src/renderer/components/molecules/User.vue
+++ b/src/renderer/components/molecules/User.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="user" @click="openUser(user)" aria-label="user">
-  <div class="icon">
+  <div class="icon" role="presentation">
     <FailoverImg :src="user.avatar" :alt="`Avatar of ${user.username}`" />
   </div>
   <div class="name">