diff --git a/templates/list.html b/templates/list.html
index ad5a99a..0b48eac 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -91,24 +91,12 @@
       white-space: pre-wrap;
     }
 
-    .like-button {
-      font-size: 16px;
-      font-family: 'Noto Serif SC', serif;
-      margin: 0 5px;
-    }
-
-    .like-button a {
-      padding: 1px 3px;
-      margin-right: 0px;
-      border: 2px #000 solid;
+    .like {
+      fill: #fff;
     }
 
-    .liked,
-    .liked:hover {
-      background: #000;
-      color: #fff;
-      text-decoration: none;
-      pointer-events: none;
+    .liked {
+      fill: #000;
     }
 
     .timeago {
@@ -240,10 +228,20 @@
         {% endif %}
         <div style="text-align:right">
           <time class="timeago" datetime="{{c.time}}"></time>
-          <span class="like-button" id="like-{{c.toot}}">
-            <a href="##" class="{{c.liked}}" onClick="like('{{c.toot}}')">赞</a>
-            <span>{{c.likeNum}}</span>
-          </span>
+          <a href="##" class="btn btn-link" id="like-{{c.toot}}" onClick="like('{{c.toot}}')" style="text-decoration: none;">
+            <svg viewBox="-20 0 552 512" width="20" class="{{c.liked}}">
+              <path stroke="#000" stroke-width="30" d="M474.644,74.27C449.391,45.616,414.358,29.836,376,29.836c-53.948,0-88.103,32.22-107.255,59.25
+                            c-4.969,7.014-9.196,14.047-12.745,20.665c-3.549-6.618-7.775-13.651-12.745-20.665c-19.152-27.03-53.307-59.25-107.255-59.25
+                            c-38.358,0-73.391,15.781-98.645,44.435C13.267,101.605,0,138.213,0,177.351c0,42.603,16.633,82.228,52.345,124.7
+                            c31.917,37.96,77.834,77.088,131.005,122.397c19.813,16.884,40.302,34.344,62.115,53.429l0.655,0.574
+                            c2.828,2.476,6.354,3.713,9.88,3.713s7.052-1.238,9.88-3.713l0.655-0.574c21.813-19.085,42.302-36.544,62.118-53.431
+                            c53.168-45.306,99.085-84.434,131.002-122.395C495.367,259.578,512,219.954,512,177.351
+                            C512,138.213,498.733,101.605,474.644,74.27z" />
+            </svg>
+            <span>
+              {{c.likeNum}}
+            </span>
+          </a>
           <a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{c.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{c.toot}}">
             <svg fill="#000" viewBox="0 12 24 36" width="24">
               <path d="m0 24 l12 18 l12 -18 z"></path>
@@ -291,7 +289,7 @@
   $('.timeago').timeago();
 
   function like(toot) {
-    if ($(`#like-${toot} a`).hasClass("liked"))
+    if ($(`#like-${toot} svg`).hasClass("liked"))
       return;
     $.ajax({
       type: 'POST',
@@ -299,7 +297,7 @@
       success: (result, status, xhr) => {
         console.log(result + ' : ' + status);
         $(`#like-${toot} span`).text(result);
-        $(`#like-${toot} a`).toggleClass("like liked");
+        $(`#like-${toot} svg`).toggleClass("like liked");
       },
       error: (xhr, status, error) => {
         alert(error + ': ' + xhr.responseText);