diff --git a/src/pages/overall/overall-course/unread-entry/unread-entry.scss b/src/pages/overall/overall-course/unread-entry/unread-entry.scss
index 7f76275..a342123 100644
--- a/src/pages/overall/overall-course/unread-entry/unread-entry.scss
+++ b/src/pages/overall/overall-course/unread-entry/unread-entry.scss
@@ -82,7 +82,7 @@
         }
 
         // Mark as read
-        span.mark-as-read
+        button.mark-as-read
         {
             background: #eee;
             color: #aaa;
diff --git a/src/pages/overall/overall-course/unread-entry/unread-entry.vue b/src/pages/overall/overall-course/unread-entry/unread-entry.vue
index 9197fb2..fb3e0e0 100644
--- a/src/pages/overall/overall-course/unread-entry/unread-entry.vue
+++ b/src/pages/overall/overall-course/unread-entry/unread-entry.vue
@@ -19,7 +19,7 @@
                 </span>
                 <span class="score entry-box">{{assignment.score}}</span>
                 <span class="max entry-box">{{assignment.scoreMax}}</span>
-                <span class="mark-as-read entry-box">x</span>
+                <el-button class="mark-as-read" icon="el-icon-close"></el-button>
             </el-col>
         </el-row>
     </div>