diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js
index 170a847..cf8f3a9 100644
--- a/app/assets/javascripts/theater.js
+++ b/app/assets/javascripts/theater.js
@@ -47,6 +47,27 @@ var GalleryTheater = function(){
       var id = window.location.hash.split("#")[1];
       gt.createTheater("/xhr/galleries/theater/" + id);
     }
+    var addButton = function () {
+      $('.theaterButton').remove();
+      $('<button id ="theaterPreviousButton" class="theaterButton">' + '<' + ' </button> <button id ="theaterNextButton" class="theaterButton">' + '>' + ' </button>').insertAfter($('img.gal-active'));
+      if (!$(".gal-prev").length) { $('#theaterPreviousButton').remove(); }
+      if (!$(".gal-next").length) { $('#theaterNextButton').remove(); }
+
+      $('#theaterPreviousButton').click(function () {
+        gt.previousPic();
+      });
+      $('#theaterNextButton').click(function () {
+        gt.nextPic();
+      });
+    }
+
+    addButton();
+    function locationHashChanged() {
+      addButton();
+    }
+
+    window.onhashchange = locationHashChanged;
+
   }
 
   var bindHandler = function(){
diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css
index 230a204..ca912d0 100644
--- a/app/assets/stylesheets/theater.css
+++ b/app/assets/stylesheets/theater.css
@@ -455,3 +455,37 @@ body {
     bottom: 0;
   }
 }
+
+/* CSS for button */
+
+@media(max-width: 769px){
+  .gallery .gallery-thumb-toggle{
+    display: none;
+  }
+ }
+
+/* 相本裡的左右控制鍵 */
+.theaterButton{
+position: absolute;
+text-align: center;
+width: 45%;
+bottom: 50px;
+background-color: transparent;
+border: none;
+color: white;
+padding: 15px 32px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 2.2rem;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 5px;
+}
+
+#theaterNextButton{
+right:0;
+}
+#theaterPreviousButton{
+left:0;
+}
\ No newline at end of file