diff --git a/src/renderer/components/Authorize.vue b/src/renderer/components/Authorize.vue
index 9539b4c8..210f6862 100644
--- a/src/renderer/components/Authorize.vue
+++ b/src/renderer/components/Authorize.vue
@@ -4,7 +4,7 @@
       <el-header>
         <el-row>
           <el-col :span="24" class="close">
-            <el-button type="text" @click="close" class="close-button">
+            <el-button class="close-button" link @click="close">
               <font-awesome-icon icon="xmark"></font-awesome-icon>
             </el-button>
           </el-col>
diff --git a/src/renderer/components/Login.vue b/src/renderer/components/Login.vue
index e36e0395..b4ff3cea 100644
--- a/src/renderer/components/Login.vue
+++ b/src/renderer/components/Login.vue
@@ -3,7 +3,7 @@
     <el-header>
       <el-row>
         <el-col :span="24" class="close">
-          <el-button type="text" @click="close" class="close-button">
+          <el-button class="close-button" link @click="close">
             <font-awesome-icon icon="xmark" />
           </el-button>
         </el-col>
diff --git a/src/renderer/components/Preferences.vue b/src/renderer/components/Preferences.vue
index ee8b5e73..39d08f80 100644
--- a/src/renderer/components/Preferences.vue
+++ b/src/renderer/components/Preferences.vue
@@ -6,7 +6,7 @@
           <h1>{{ $t('preferences.title') }}</h1>
         </el-col>
         <el-col :span="1" class="close-area">
-          <el-button type="text" @click="close" class="close-button" role="button">
+          <el-button class="close-button" link role="button" @click="close">
             <font-awesome-icon icon="xmark" />
           </el-button>
         </el-col>
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index 43a9d29f..cd851ab4 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -16,7 +16,7 @@
           <el-table-column prop="domain" :label="$t('preferences.account.domain')"> </el-table-column>
           <el-table-column :label="$t('preferences.account.association')">
             <template #default="scope">
-              <el-button @click.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
+              <el-button class="action" link @click.prevent="removeAccount(scope.$index, accounts)">
                 <font-awesome-icon icon="xmark" />
                 {{ $t('preferences.account.remove_association') }}
               </el-button>
@@ -25,12 +25,12 @@
           <el-table-column :label="$t('preferences.account.order')" width="60">
             <template #default="scope">
               <div class="allow-up">
-                <el-button class="arrow-up action" type="text" @click.prevent="forward(scope.$index, accounts)">
+                <el-button class="arrow-up action" link @click.prevent="forward(scope.$index, accounts)">
                   <font-awesome-icon icon="arrow-up" />
                 </el-button>
               </div>
               <div class="allow-down">
-                <el-button class="arrow-down action" type="text" @click.prevent="backward(scope.$index, accounts)">
+                <el-button class="arrow-down action" link @click.prevent="backward(scope.$index, accounts)">
                   <font-awesome-icon icon="arrow-down" />
                 </el-button>
               </div>
diff --git a/src/renderer/components/Preferences/Appearance/Toot.vue b/src/renderer/components/Preferences/Appearance/Toot.vue
index 2ac71f96..61979db6 100644
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@@ -19,16 +19,16 @@
           <div class="content" v-html="status"></div>
         </div>
         <div class="tool-box">
-          <el-button type="text" class="reply" :title="$t('cards.toot.reply')">
+          <el-button link class="reply" :title="$t('cards.toot.reply')">
             <font-awesome-icon icon="reply" size="sm" />
           </el-button>
-          <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
+          <el-button link class="reblog" :title="$t('cards.toot.reblog')">
             <font-awesome-icon icon="retweet" size="sm" />
           </el-button>
           <span class="count">
             {{ reblogsCount }}
           </span>
-          <el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
+          <el-button link class="favourite" :title="$t('cards.toot.fav')">
             <font-awesome-icon icon="star" size="sm" />
           </el-button>
           <span class="count">
diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
index bd023c96..b5c411be 100644
--- a/src/renderer/components/Settings.vue
+++ b/src/renderer/components/Settings.vue
@@ -6,7 +6,7 @@
           <h1>{{ $t('settings.title') }}</h1>
         </el-col>
         <el-col :span="1" class="close-area">
-          <el-button type="text" @click="close" class="close-button" role="button">
+          <el-button class="close-button" link role="button" @click="close">
             <font-awesome-icon icon="xmark" />
           </el-button>
         </el-col>
diff --git a/src/renderer/components/Settings/Filters.vue b/src/renderer/components/Settings/Filters.vue
index c576542a..013f84e4 100644
--- a/src/renderer/components/Settings/Filters.vue
+++ b/src/renderer/components/Settings/Filters.vue
@@ -25,7 +25,7 @@
       <el-table-column prop="expires_at" label="Expires" width="180"> </el-table-column>
       <el-table-column width="80">
         <template #default="scope">
-          <el-button type="text">
+          <el-button link>
             <router-link tag="span" :to="`/${id}/settings/filters/${filters[scope.$index].id}/edit`">
               {{ $t('settings.filters.edit.title') }}
             </router-link>
@@ -34,7 +34,7 @@
       </el-table-column>
       <el-table-column width="80">
         <template #default="scope">
-          <el-button type="text" @click="deleteFilter(filters[scope.$index].id)">
+          <el-button link @click="deleteFilter(filters[scope.$index].id)">
             {{ $t('settings.filters.delete.title') }}
           </el-button>
         </template>
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
index b08e41f6..e73a5fa8 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
@@ -4,7 +4,7 @@
       <el-form>
         <div class="form-wrapper">
           <div class="form-item" v-show="tagPage">
-            <el-button type="text" @click="back">
+            <el-button link @click="back">
               <font-awesome-icon icon="chevron-left" />
             </el-button>
           </div>
@@ -12,7 +12,7 @@
             <input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-on:keyup.enter="search" autofocus />
           </div>
           <div class="form-item" v-show="tagPage">
-            <el-button type="text" @click="save" :title="$t('hashtag.save_tag')">
+            <el-button link :title="$t('hashtag.save_tag')" @click="save">
               <font-awesome-icon icon="thumbtack" />
             </el-button>
           </div>
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
index f29a3d9d..0dba2e38 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
@@ -7,7 +7,7 @@
             {{ tag.tagName }}
           </td>
           <td class="action">
-            <el-button type="text" @click.stop="deleteTag(tag)" :title="$t('hashtag.delete_tag')">
+            <el-button link :title="$t('hashtag.delete_tag')" @click.stop="deleteTag(tag)">
               <font-awesome-icon :icon="['far', 'trash-can']" />
             </el-button>
           </td>
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
index ad5ea159..8dc68447 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="members">
     <div class="add-account">
-      <el-button type="text" class="add-button" @click="addAccount">
+      <el-button link class="add-button" @click="addAccount">
         <font-awesome-icon icon="plus" />
       </el-button>
     </div>
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index c1fc777a..c4b9b162 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -3,7 +3,7 @@
     <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
       <el-form :inline="true">
         <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
-        <el-button type="text" class="create" @click="createList">
+        <el-button link class="create" @click="createList">
           <font-awesome-icon icon="plus" />
         </el-button>
       </el-form>
@@ -13,10 +13,10 @@
         {{ list.title }}
       </router-link>
       <div class="tools">
-        <el-button type="text" @click="edit(list)">
+        <el-button link @click="edit(list)">
           <font-awesome-icon :icon="['far', 'pen-to-square']" />
         </el-button>
-        <el-button type="text" @click="del(list)">
+        <el-button link @click="del(list)">
           <font-awesome-icon :icon="['far', 'trash-can']" />
         </el-button>
       </div>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
index 6d33d4eb..4e00285e 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="side-bar" v-if="openSideBar">
     <div class="header">
-      <el-button type="text" @click="reload" class="action">
+      <el-button class="action" link @click="reload">
         <font-awesome-icon icon="rotate" />
       </el-button>
-      <el-button type="text" @click="close" class="action">
+      <el-button link class="action" @click="close">
         <font-awesome-icon icon="xmark" />
       </el-button>
     </div>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 1e0f95e9..606de577 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -55,7 +55,7 @@
               </ul>
 
               <template #reference>
-                <el-button type="text" :title="$t('side_bar.account_profile.detail')">
+                <el-button link :title="$t('side_bar.account_profile.detail')">
                   <font-awesome-icon icon="gear" size="xl" />
                 </el-button>
               </template>
@@ -103,19 +103,19 @@
     </div>
     <el-row class="basic-info">
       <el-col :span="8" :class="activeTab === 1 ? 'info info-active' : 'info'">
-        <el-button type="text" class="tab" @click="changeTab(1)">
+        <el-button link class="tab" @click="changeTab(1)">
           <div class="title">{{ $t('side_bar.account_profile.toots') }}</div>
           <div class="count">{{ account?.statuses_count }}</div>
         </el-button>
       </el-col>
       <el-col :span="8" :class="activeTab === 2 ? 'info info-active' : 'info'">
-        <el-button type="text" class="tab" @click="changeTab(2)">
+        <el-button link class="tab" @click="changeTab(2)">
           <div class="title">{{ $t('side_bar.account_profile.follows') }}</div>
           <div class="count">{{ account?.following_count }}</div>
         </el-button>
       </el-col>
       <el-col :span="8" :class="activeTab === 3 ? 'info info-active' : 'info'">
-        <el-button type="text" class="tab" @click="changeTab(3)">
+        <el-button link class="tab" @click="changeTab(3)">
           <div class="title">
             {{ $t('side_bar.account_profile.followers') }}
           </div>
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index d52a65fc..8c5c7e2a 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -5,10 +5,10 @@
     </div>
     <div class="tools">
       <img src="../../assets/images/loading-spinner-wide.svg" v-show="loading" class="header-loading" />
-      <el-button type="text" class="action" @click="openNewTootModal" :title="$t('header_menu.new_toot')">
+      <el-button class="action" link :title="$t('header_menu.new_toot')" @click="openNewTootModal">
         <font-awesome-icon :icon="['far', 'pen-to-square']" />
       </el-button>
-      <el-button v-show="reloadable()" type="text" class="action" @click="reload" :title="$t('header_menu.reload')">
+      <el-button v-show="reloadable()" link class="action" :title="$t('header_menu.reload')" @click="reload">
         <font-awesome-icon icon="rotate" />
       </el-button>
       <el-popover v-if="TLOption()" placement="left-start" width="180" popper-class="theme-popover" trigger="click">
@@ -24,12 +24,12 @@
           </el-form>
         </div>
         <template #reference>
-          <el-button type="text" class="action" :title="$t('header_menu.option.title')">
+          <el-button link class="action" :title="$t('header_menu.option.title')">
             <font-awesome-icon icon="sliders" />
           </el-button>
         </template>
       </el-popover>
-      <el-button type="text" class="action" @click="settings" :title="$t('header_menu.settings')">
+      <el-button class="action" link :title="$t('header_menu.settings')" @click="settings">
         <font-awesome-icon icon="gear" />
       </el-button>
     </div>
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index ed99168f..842f7d8e 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -4,7 +4,7 @@
       <div class="search-account" :element-loading-background="loadingBackground">
         <el-form :inline="true">
           <input v-model="name" placeholder="Account name" class="account-name" autofocus />
-          <el-button type="text" class="search" @click="search">
+          <el-button link class="search" @click="search">
             <font-awesome-icon icon="magnifying-glass" />
           </el-button>
         </el-form>
@@ -21,7 +21,7 @@
                 <div class="acct">@{{ user.acct }}</div>
               </div>
               <div class="add">
-                <el-button type="text" @click="add(user)">
+                <el-button link @click="add(user)">
                   <font-awesome-icon icon="plus" />
                 </el-button>
               </div>
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index 4d8b3b58..b8b72465 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -3,17 +3,17 @@
     <div id="image" v-show="modalOpen" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
       <div class="image-wrapper">
         <div class="image-header">
-          <el-button type="text" @click="close" class="close-button">
+          <el-button class="close-button" link @click="close">
             <font-awesome-icon icon="xmark" />
           </el-button>
         </div>
         <div class="image-content" role="presentation" @click.self="close">
           <span class="button-area"
-            ><el-button type="text" v-show="showLeft" @click="decrementIndex()"> <font-awesome-icon icon="angle-left" /> </el-button
+            ><el-button v-show="showLeft" link @click="decrementIndex()"> <font-awesome-icon icon="angle-left" /> </el-button
           ></span>
           <Media :src="imageURL" :imageType="imageType"></Media>
           <span class="button-area"
-            ><el-button type="text" v-show="showRight" @click="incrementIndex()"> <font-awesome-icon icon="angle-right" /> </el-button
+            ><el-button v-show="showRight" link @click="incrementIndex()"> <font-awesome-icon icon="angle-right" /> </el-button
           ></span>
         </div>
       </div>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 17cce5bf..86c0221d 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -40,7 +40,7 @@
       <div class="preview" ref="previewRef">
         <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
           <img :src="media.preview_url" class="preview-image" />
-          <el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
+          <el-button class="remove-image" link @click="removeAttachment(media)"><font-awesome-icon icon="circle-xmark" /></el-button>
           <textarea
             maxlength="420"
             class="image-description"
@@ -57,19 +57,19 @@
       <template #footer>
         <div class="dialog-footer">
           <div class="upload-image">
-            <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
+            <el-button size="default" link :title="$t('modals.new_toot.footer.add_image')" @click="selectImage">
               <font-awesome-icon icon="camera" />
             </el-button>
             <input name="image" type="file" class="image-input" ref="imageRef" @change="onChangeImage" />
           </div>
           <div class="poll">
-            <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
+            <el-button size="default" link :title="$t('modals.new_toot.footer.poll')" @click="togglePollForm">
               <font-awesome-icon icon="square-poll-horizontal" />
             </el-button>
           </div>
           <div class="privacy">
             <el-dropdown trigger="click" @command="changeVisibility">
-              <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
+              <el-button size="default" link :title="$t('modals.new_toot.footer.change_visibility')">
                 <font-awesome-icon :icon="visibilityIcon" />
               </el-button>
               <template #dropdown>
@@ -97,7 +97,7 @@
           <div class="sensitive" v-show="attachedMedias.length > 0">
             <el-button
               size="default"
-              type="text"
+              link
               @click="changeSensitive"
               :title="$t('modals.new_toot.footer.change_sensitive')"
               :aria-pressed="sensitive"
@@ -109,7 +109,7 @@
           <div class="content-warning">
             <el-button
               size="default"
-              type="text"
+              link
               @click="toggleContentWarning()"
               :title="$t('modals.new_toot.footer.add_cw')"
               :class="showContentWarning ? '' : 'clickable'"
@@ -121,7 +121,7 @@
           <div class="pined-hashtag">
             <el-button
               size="default"
-              type="text"
+              link
               @click="pinedHashtag = !pinedHashtag"
               :title="$t('modals.new_toot.footer.pined_hashtag')"
               :class="pinedHashtag ? '' : 'clickable'"
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
index eb570a45..334a5b9e 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
@@ -4,7 +4,7 @@
       <li class="poll-option" v-for="(option, id) in polls" v-bind:key="id">
         <el-radio :disabled="true" :label="id">
           <el-input :placeholder="`choice ${id}`" :modelValue="option" @input="polls[id] = $event" size="small"></el-input>
-          <el-button class="remove-poll" type="text" @click="removePoll(id)" size="small"><font-awesome-icon icon="xmark" /></el-button>
+          <el-button class="remove-poll" link size="small" @click="removePoll(id)"><font-awesome-icon icon="xmark" /></el-button>
         </el-radio>
       </li>
     </ul>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
index 591e2cea..10bef3de 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -59,7 +59,7 @@
           :emojiTooltip="true"
         />
         <template #reference>
-          <el-button class="emoji-selector" type="text">
+          <el-button class="emoji-selector" link>
             <font-awesome-icon :icon="['far', 'face-smile']" size="lg" />
           </el-button>
         </template>
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index dda60bc1..32972b46 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -25,10 +25,10 @@
         </div>
       </div>
       <div class="collapse">
-        <el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')">
+        <el-button v-if="collapse" link class="release-collapse" :title="$t('side_menu.expand')" @click="releaseCollapse">
           <font-awesome-icon :icon="['fa', 'angles-right']" />
         </el-button>
-        <el-button type="text" class="do-collapse" @click="doCollapse" v-else :title="$t('side_menu.collapse')">
+        <el-button v-else link class="do-collapse" :title="$t('side_menu.collapse')" @click="doCollapse">
           <font-awesome-icon :icon="['fa', 'angles-left']" />
         </el-button>
       </div>
@@ -253,10 +253,10 @@
         </template>
       </template>
     </el-menu>
-    <el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)">
+    <el-button v-if="hideGlobalHeader" class="global-header-control" link @click="changeGlobalHeader(false)">
       <font-awesome-icon icon="angles-right" />
     </el-button>
-    <el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)">
+    <el-button v-else class="global-header-control" link @click="changeGlobalHeader(true)">
       <font-awesome-icon icon="angles-left" />
     </el-button>
   </div>
diff --git a/src/renderer/components/molecules/Toot/Poll.vue b/src/renderer/components/molecules/Toot/Poll.vue
index 3a89ffcf..a5533851 100644
--- a/src/renderer/components/molecules/Toot/Poll.vue
+++ b/src/renderer/components/molecules/Toot/Poll.vue
@@ -20,7 +20,7 @@
       <el-button v-if="!poll.voted" type="success" size="small" @click="vote" :disabled="pollRadio === null">{{
         $t('cards.toot.poll.vote')
       }}</el-button>
-      <el-button v-else type="text" @click="refresh">{{ $t('cards.toot.poll.refresh') }}</el-button>
+      <el-button v-else link @click="refresh">{{ $t('cards.toot.poll.refresh') }}</el-button>
       <span class="votes-count">{{ poll.votes_count }} {{ $t('cards.toot.poll.votes_count') }},</span>
       <span class="until">{{ parseDatetime(poll.expires_at, now) }}</span>
     </template>
diff --git a/src/renderer/components/molecules/User.vue b/src/renderer/components/molecules/User.vue
index d4a3b8ce..8a567d5b 100644
--- a/src/renderer/components/molecules/User.vue
+++ b/src/renderer/components/molecules/User.vue
@@ -10,7 +10,7 @@
       <div class="acct">@{{ user.acct }}</div>
     </div>
     <div class="tool" v-if="remove">
-      <el-button type="text" @click.stop.prevent="removeAccount(user)">
+      <el-button link @click.stop.prevent="removeAccount(user)">
         <font-awesome-icon icon="xmark" />
       </el-button>
     </div>
@@ -18,19 +18,19 @@
       <el-button
         v-if="relationship.following"
         class="unfollow"
-        type="text"
+        link
         @click.stop.prevent="unfollowAccount(user)"
         :title="$t('side_bar.account_profile.unfollow')"
       >
         <font-awesome-icon icon="user-xmark" />
       </el-button>
-      <el-button v-else-if="relationship.requested" class="requested" type="text" :title="$t('side_bar.account_profile.follow_requested')">
+      <el-button v-else-if="relationship.requested" class="requested" link :title="$t('side_bar.account_profile.follow_requested')">
         <font-awesome-icon icon="hourglass" />
       </el-button>
       <el-button
         v-else-if="!relationship.following"
         class="follow"
-        type="text"
+        link
         @click.stop.prevent="followAccount(user)"
         :title="$t('side_bar.account_profile.follow')"
       >
@@ -38,10 +38,10 @@
       </el-button>
     </div>
     <div class="tool" v-else-if="request">
-      <el-button class="accept" type="text" @click.stop.prevent="acceptRequest(user)" :title="$t('follow_requests.accept')">
+      <el-button class="accept" link :title="$t('follow_requests.accept')" @click.stop.prevent="acceptRequest(user)">
         <font-awesome-icon icon="check" />
       </el-button>
-      <el-button class="reject" type="text" @click.stop.prevent="rejectRequest(user)" :tilte="$t('follow_requests.reject')">
+      <el-button class="reject" link :tilte="$t('follow_requests.reject')" @click.stop.prevent="rejectRequest(user)">
         <font-awesome-icon icon="xmark" />
       </el-button>
     </div>
diff --git a/src/renderer/components/organisms/Notification/StatusReaction.vue b/src/renderer/components/organisms/Notification/StatusReaction.vue
index 32d4f6dd..187882f9 100644
--- a/src/renderer/components/organisms/Notification/StatusReaction.vue
+++ b/src/renderer/components/organisms/Notification/StatusReaction.vue
@@ -64,7 +64,7 @@
               <el-button
                 v-show="sensitive && isShowAttachments"
                 class="hide-sensitive"
-                type="text"
+                link
                 @click="showAttachments = false"
                 :title="$t('cards.toot.hide')"
               >
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 4a341cb0..741237d0 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -59,13 +59,7 @@
             {{ $t('cards.toot.sensitive') }}
           </el-button>
           <div v-if="isShowAttachments">
-            <el-button
-              v-if="sensitive && isShowAttachments"
-              class="hide-sensitive"
-              type="text"
-              @click="toggleCW()"
-              :title="$t('cards.toot.hide')"
-            >
+            <el-button v-if="sensitive && isShowAttachments" class="hide-sensitive" link :title="$t('cards.toot.hide')" @click="toggleCW()">
               <font-awesome-icon icon="eye" class="hide" />
             </el-button>
             <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
@@ -98,29 +92,29 @@
           :url="originalMessage.card.url"
         />
         <div class="emoji-reactions">
-          <template v-for="reaction in originalMessage.emoji_reactions">
+          <template v-for="reaction in originalMessage.emoji_reactions" :key="reaction.name">
             <el-button v-if="reaction.me" type="success" size="default" class="reaction" @click="removeReaction(reaction.name)"
               >{{ reaction.name }} {{ reaction.count }}</el-button
             >
-            <el-button v-else type="text" size="default" class="reaction" @click="addReaction(reaction.name)"
+            <el-button v-else link size="default" class="reaction" @click="addReaction(reaction.name)"
               >{{ reaction.name }} {{ reaction.count }}</el-button
             >
           </template>
         </div>
         <div class="toot-footer">
           <div class="tool-box">
-            <el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
+            <el-button link class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')" @click="openReply()">
               <font-awesome-icon icon="reply" size="sm" />
             </el-button>
-            <el-button v-if="locked" type="text" class="locked">
+            <el-button v-if="locked" link class="locked">
               <font-awesome-icon icon="lock" size="sm" />
             </el-button>
-            <el-button v-else-if="directed" type="text" class="directed">
+            <el-button v-else-if="directed" link class="directed">
               <font-awesome-icon icon="envelope" size="sm" />
             </el-button>
             <el-button
               v-else
-              type="text"
+              link
               @click="changeReblog(originalMessage)"
               :class="originalMessage.reblogged ? 'reblogged' : 'reblog'"
               :title="$t('cards.toot.reblog')"
@@ -131,7 +125,7 @@
               {{ reblogsCount }}
             </div>
             <el-button
-              type="text"
+              link
               @click="changeFavourite(originalMessage)"
               :class="originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'"
               :title="$t('cards.toot.fav')"
@@ -143,16 +137,16 @@
               {{ favouritesCount }}
             </div>
             <el-button
-              @click="changeBookmark(originalMessage)"
+              v-if="bookmarkSupported"
               :class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'"
-              type="text"
+              link
               :title="$t('cards.toot.bookmark')"
               :aria-label="$t('cards.toot.bookmark')"
-              v-if="bookmarkSupported"
+              @click="changeBookmark(originalMessage)"
             >
               <font-awesome-icon icon="bookmark" size="sm" />
             </el-button>
-            <el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()">
+            <el-button v-if="quoteSupported" link class="quote-btn" @click="openQuote()">
               <font-awesome-icon icon="quote-right" size="sm" />
             </el-button>
             <template v-if="sns !== 'mastodon'">
@@ -178,13 +172,13 @@
                   :emojiTooltip="true"
                 />
                 <template #reference>
-                  <el-button class="emoji" type="text">
+                  <el-button class="emoji" link>
                     <font-awesome-icon :icon="['far', 'face-smile']" size="sm" />
                   </el-button>
                 </template>
               </el-popover>
             </template>
-            <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-if="pinned">
+            <el-button v-if="pinned" class="pinned" link :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')">
               <font-awesome-icon icon="thumbtack" size="sm" />
             </el-button>
             <el-popover
@@ -219,7 +213,7 @@
                 </li>
               </ul>
               <template #reference>
-                <el-button type="text" :title="$t('cards.toot.detail')">
+                <el-button link :title="$t('cards.toot.detail')">
                   <font-awesome-icon icon="ellipsis" size="sm" />
                 </el-button>
               </template>