diff --git a/public/app.js b/public/app.js
index ee8101f..9cb5436 100644
--- a/public/app.js
+++ b/public/app.js
@@ -94,6 +94,18 @@ new Vue({
         });
       }
     },
+    toggleMenu: function () {
+      if (document.querySelector('.fullScreenMenu').style.display === "none") {
+        document.querySelector('.fullScreenMenu').style.display = "";
+        this.animateCSS('.fullScreenMenu', 'rotateIn');
+      } else {
+        Promise.all([
+          this.animateCSS('.fullScreenMenu', 'rotateOut'),
+        ]).then(data => {
+          document.querySelector('.fullScreenMenu').style.display = "none"
+        });
+      }
+    },
     animateCSS: function (element, animation, prefix = 'animate__') {
       // We create a Promise and return it
       return new Promise((resolve, reject) => {
@@ -112,6 +124,10 @@ new Vue({
 
         node.addEventListener('animationend', handleAnimationEnd);
       })
+    },
+    interfaceClick: function () {
+      clearTimeout(this.controlsTimeout)
+      this.controlsTimeout = setTimeout(() => this.toggleControls(), 5000);
     }
   },
   mounted() {
diff --git a/public/index.css b/public/index.css
index a3e3672..ea5dd2d 100644
--- a/public/index.css
+++ b/public/index.css
@@ -37,7 +37,7 @@ body {
 }
 
 #app .touchCanvas {
-  z-index: 9;
+  z-index: 5;
 }
 
 #app .content {
@@ -123,3 +123,19 @@ body {
   text-align: center;
   margin-top: 48vh;
 }
+
+/* menu */
+
+#app .fullScreenMenu {
+  width: 100vw;
+  height: 100vh;
+  z-index: 15;
+  background: white;
+  position: fixed;
+}
+
+#app .fullScreenMenu .closeBtn {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+}
diff --git a/public/index.html b/public/index.html
index 6031e43..b04847d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,23 +16,32 @@
             <!-- controls -->
             <div class="controls">
                 <div class="floatBar top">
-                    <div class="btn right" v-on:click="toggleCarousel()">
+                    <div class="btn right" v-on:click="toggleMenu();interfaceClick()">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor"/> <path d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z" fill="currentColor"/> <path d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z" fill="currentColor"/></svg>
                     </div>
                 </div>
-                <div class="btn floatBtn left" v-on:click="prevClick()">
+                <div class="btn floatBtn left" v-on:click="prevClick();interfaceClick()">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
                 </div>
-                <div class="btn floatBtn right" v-on:click="nextClick()">
+                <div class="btn floatBtn right" v-on:click="nextClick();interfaceClick()">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
                 </div>
                 <div class="floatBar bottom">
-                    <div class="btn" v-on:click="toggleCarousel()">
+                    <div class="btn" v-on:click="toggleCarousel();interfaceClick()">
                         <svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
                         <svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
                     </div>
                 </div>
             </div>
+            <!-- menu -->
+            <div class="fullScreenMenu" style="display: none;">
+                <div class="closeBtn">
+                    <div class="btn" v-on:click="toggleMenu()">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" fill="currentColor" /> </svg>
+                    </div>
+                </div>
+
+            </div>
             <!-- touch canvas -->
             <div class="touchCanvas" v-on:click="toggleControls()"></div>
             <!-- content -->