diff --git a/app/views/publications/_viewer.html.erb b/app/views/publications/_viewer.html.erb
index 6936f26..b76646d 100644
--- a/app/views/publications/_viewer.html.erb
+++ b/app/views/publications/_viewer.html.erb
@@ -1,14 +1,17 @@
-<div id="magazine">
+<div class="publication">
+    <div id="magazine">
+    </div>
+    <ul class="button-mid">
+        <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
+        <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
+    </ul>
 </div>
 <%= stylesheet_link_tag "publications/pdf-turn.css" %>
 <%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
 <%= javascript_include_tag "publications/pdf/pdf.js" %>
 <%= javascript_include_tag "publications/turn.min.js" %>
 <%= javascript_include_tag "publications/pdf-turn.js" %>
-<div class="flip-control">
-    <a href="#" id="prev"> Previous </a>
-    <a href="#" id="next"> Next </a>
-</div>
+
 <style type="text/css">
 div.flip-control {
   width: 400px;
@@ -19,39 +22,42 @@ div.flip-control a {
   margin-left: 10px;
 }
 #magazine {
-      margin: auto;
-      width: 100%;
-    }
+  margin: auto;
+  width: 100%;
+}
 
-    #magazine .turn-page {
-      background-color: #ccc;
-      background-size: 100% 100%;
-    }
+#magazine .turn-page {
+  background-color: #ccc;
+  background-size: 100% 100%;
+}
 
-    #magazine .loader {
-      background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
-      width: 24px;
-      height: 24px;
-      display: block;
-      position: absolute;
-      top: 238px;
-      left: 188px;
-    }
+#magazine .loader {
+  background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
+  width: 24px;
+  height: 24px;
+  display: block;
+  position: absolute;
+  top: 238px;
+  left: 188px;
+}
 
-    #magazine .odd {
-      background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
-      background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
-      background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
-      background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
+#magazine .odd {
+  background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
+  background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
+  background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
+  background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
 
-    }
+}
 
-    #magazine .even {
-      background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
-      background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
-      background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
-      background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
-    }
+#magazine .even {
+  background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
+  background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
+  background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
+  background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
+}
+.publication .button-mid {
+  display: block;
+}
 </style>
 <script type="text/javascript">
   $(document).ready(function(){
@@ -169,11 +175,11 @@ div.flip-control a {
             $('#magazine').turn('next');
 
     });
-    $('#prev').click(function(){
+    $('.publication .prev-button').click(function(){
         $('#magazine').turn('previous');
         return false;
     });
-    $('#next').click(function(){
+    $('.publication .next-button').click(function(){
         $('#magazine').turn('next');
         return false;
     });