diff --git a/docs/css/styles.css b/docs/css/styles.css
index 8192e60..3f1e9eb 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -33,6 +33,12 @@ canvas {
   /* height: 100vh; */
   background-color: rgb(189, 189, 189);
 }
+.button{
+  display:block;
+  position: absolute;
+  right: 20px;
+  z-index: 100;
+}
 
 
 .controls{
diff --git a/docs/index.html b/docs/index.html
index 0c5fce6..2c386ec 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,7 +5,7 @@
   <title>Document</title>
   <link rel="stylesheet" href="./css/styles.css">
 </head>
-<body style="margin:0;" onclick="manualToggleSettings()">
+<body style="margin:0;" >
   <canvas id="myCanvas"
     style="display: block;box-sizing: border-box;" ></canvas>
   <div id="toolbar">
@@ -33,6 +33,9 @@
       <button onclick="ForwardFrame()">></button>
     </div>
   </div>
+  <div>
+    <button onclick="manualToggleSettings()" class="button">Show/hide</button>
+  </div>
 </body>
 <script src="./js/helper.js" type="text/javascript"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
