diff --git a/components/list/Account.vue b/components/list/Account.vue
index acc2caaa6..c2f0560f5 100644
--- a/components/list/Account.vue
+++ b/components/list/Account.vue
@@ -37,7 +37,14 @@ async function edit() {
     />
     <div>
       <CommonTooltip :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')" :hover="isRemoved ? 'text-green' : 'text-red'">
-        <button :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" text-xl @click="edit" />
+        <button
+          text-sm p2 border-1 transition-colors
+          border-dark
+          btn-action-icon
+          @click="edit"
+        >
+          <span :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
+        </button>
       </CommonTooltip>
     </div>
   </div>
diff --git a/components/list/Lists.vue b/components/list/Lists.vue
index eb9482e1d..d5d3657fa 100644
--- a/components/list/Lists.vue
+++ b/components/list/Lists.vue
@@ -39,9 +39,13 @@ async function edit(listId: string) {
           :hover="indexOfUserInList(item.id) === -1 ? 'text-green' : 'text-red'"
         >
           <button
-            :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'"
-            text-xl @click="() => edit(item.id)"
-          />
+            text-sm p2 border-1 transition-colors
+            border-dark
+            btn-action-icon
+            @click="() => edit(item.id)"
+          >
+            <span :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
+          </button>
         </CommonTooltip>
       </div>
     </template>