diff --git a/css/main.css b/css/main.css
index 7a66d80..e15daf9 100755
--- a/css/main.css
+++ b/css/main.css
@@ -158,10 +158,13 @@ img { width: auto; max-width: 100%; height: auto; }
 .hide-mobile {
   display: none;
 }
+.hide-desktop {
+  display: initial;
+}
 
 @media (min-width: 40rem) {
   .hide-desktop { display: none }
-  .hide-mobile { }
+  .hide-mobile { display: initial }
 }
 
 /*****************************************************************************/
@@ -439,9 +442,9 @@ a.no-decoration:hover {
 /*
 /*****************************************************************************/
 
-i.icon {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+div.controls-tab button {
+  width: 28px;
+  height: 28px;
 }
 
 div.options-panel {
diff --git a/magic/index.html b/magic/index.html
index 704d11a..2667b23 100644
--- a/magic/index.html
+++ b/magic/index.html
@@ -8,7 +8,8 @@ title: Tyler Hallada
     window.magicObj = new Magic({{site.data.magic | jsonify}});
     magicObj.draw();
     document.getElementById("play-pause").addEventListener("click", togglePlay);
-    document.getElementById("hide-show").addEventListener("click", togglePanel);
+    document.getElementById("hide-show-mobile").addEventListener("click", togglePanel);
+    document.getElementById("hide-show-desktop").addEventListener("click", togglePanel);
     document.getElementById("clear").addEventListener("click", clear);
   }
 
@@ -16,8 +17,8 @@ title: Tyler Hallada
     magicObj[key] = value;
   }
 
-  function findParentWithId(el, id) {
-    while (el.getAttribute('id') !== id) {
+  function findParentWithIds(el, ids) {
+    while (ids.indexOf(el.getAttribute('id')) === -1) {
       el = el.parentElement;
     }
     return el;
@@ -25,8 +26,8 @@ title: Tyler Hallada
 
   function togglePanel(event) {
     var options = document.getElementById("options");
-    var button = findParentWithId(event.target, "hide-show");
-    if (options.style.display === "none") {  // hidden
+    var button = findParentWithIds(event.target, ["hide-show-desktop", "hide-show-mobile"]);
+    if (options.offsetParent === null) {  // hidden
       options.style.display = "block";
       button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
     } else {  // shown
@@ -36,7 +37,7 @@ title: Tyler Hallada
   }
 
   function togglePlay(event) {
-    var button = findParentWithId(event.target, "play-pause");
+    var button = findParentWithIds(event.target, ["play-pause"]);
     if (magicObj.paused) {
       magicObj.paused = false;
       button.innerHTML = "<i class=\"icon ion-pause\"></i>";
@@ -55,10 +56,11 @@ title: Tyler Hallada
     <div class="controls">
       <button id="play-pause"><i class="icon ion-pause"></i></button>
       <button id="clear"><i class="icon ion-refresh"></i></button>
-      <button id="hide-show"><i class="icon ion-chevron-down"></i></button>
+      <button id="hide-show-mobile" class="hide-desktop"><i class="icon ion-chevron-up"></i></button>
+      <button id="hide-show-desktop" class="hide-mobile"><i class="icon ion-chevron-down"></i></button>
     </div>
   </div>
-  <div id="options" class="container-full" style="display:block;">
+  <div id="options" class="container-full hide-mobile">
     <div class="row clearfix">
       <div class="column fourth">
         <form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">