diff --git a/docs/_includes/gallery.html b/docs/_includes/gallery.html
index a0765bc..6bf4b17 100644
--- a/docs/_includes/gallery.html
+++ b/docs/_includes/gallery.html
@@ -198,11 +198,14 @@
             document.writeln("</div>");
             document.writeln("<div id='galleryArrows' style='position: absolute; width: "
                 + frameWidth + "px; height: " + frameHeight
-                + "px; left: 0px; top: 0px; opacity: 0.0;"
+                + "px; left: 0px; top: 0px; opacity: 0.0; padding-left: 12px; padding-right: 8px"
                 + " display: flex; flex-flow: row none; justify-content: space-between;align-items: end; padding:20; opacity: 0.8;'>");
             {
-                document.writeln("<div><span style='cursor: default;font-size: 52px;color: #444;'><img src='img/arrow_back.svg'/></span></div>");
-                document.writeln("<div><span style='cursor: default;font-size: 52px;color: #444;'><img src='img/arrow_forward.svg'/></span></div>");
+                document.writeln("<div style='width: 32px; height: 32px; border-radius: 10px; background: #FFFFFF80;cursor: default;font-size: 52px;color: #444; display: flex; flex-flow: row none; justify-content: center;align-items: center; ' >");
+                document.writeln("<img src='img/arrow_back.svg'/></div>");
+
+                document.writeln("<div style='width: 32px; height: 32px; border-radius: 10px; background: #FFFFFF80;cursor: default;font-size: 52px;color: #444; display: flex; flex-flow: row none; justify-content: center;align-items: center; ' >");
+                document.writeln(<img src='img/arrow_forward.svg'/></span></div>");
             }
 
             document.writeln("</div>");