diff --git a/assets/arTab/ar1.html b/assets/arTab/ar1.html
index 55b549a..54dc012 100644
--- a/assets/arTab/ar1.html
+++ b/assets/arTab/ar1.html
@@ -12,7 +12,9 @@
         <a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box>
 
       </a-marker>
-      <a-entity id="smoothed-box" position="0 0 0" scale="2 2 2" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity>
+      <a-entity id="smoothed-box" position="0 0 0" scale="5 5 5">
+        <a-entity rotation="0 0 0" gltf-model="cup_of_cappuccino/scene.gltf" rotation-limiter ></a-entity>
+      </a-entity>
       <a-entity camera></a-entity>
       
     </a-scene>
diff --git a/assets/arTab/ar2.html b/assets/arTab/ar2.html
index 3cdbe2a..043de6c 100644
--- a/assets/arTab/ar2.html
+++ b/assets/arTab/ar2.html
@@ -6,15 +6,27 @@
     <script src="smooth_script.js"></script>
   </head>
   <body id="gamed" style="margin: 0px; overflow: hidden">
-    <a-scene embedded arjs='patternRatio:0.8;'>
-
-      <a-marker lerpsmooth id="marker" type="pattern" url="pattern-WebAR_QR.patt">
-        <a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box>
-
+    <a-scene embedded arjs="patternRatio:0.8;">
+      <a-marker
+        lerpsmooth
+        id="marker"
+        type="pattern"
+        url="pattern-WebAR_QR.patt"
+      >
+        <a-box
+          id="second-box-as-comparison"
+          position="0 0 0"
+          material="opacity: 0"
+        ></a-box>
       </a-marker>
-      <a-entity id="smoothed-box" position="0 0 0" scale="5 5 5" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity>
+      <a-entity id="smoothed-box" position="0 0 0" scale="5 5 5">
+        <a-entity
+          rotation="0 0 0"
+          gltf-model="cup_of_cappuccino/scene.gltf"
+          rotation-limiter
+        ></a-entity>
+      </a-entity>
       <a-entity camera></a-entity>
-      
     </a-scene>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/arTab/ar3.html b/assets/arTab/ar3.html
index 796f887..043de6c 100644
--- a/assets/arTab/ar3.html
+++ b/assets/arTab/ar3.html
@@ -6,15 +6,27 @@
     <script src="smooth_script.js"></script>
   </head>
   <body id="gamed" style="margin: 0px; overflow: hidden">
-    <a-scene embedded arjs='patternRatio:0.8;'>
-
-      <a-marker lerpsmooth id="marker" type="pattern" url="pattern-WebAR_QR.patt">
-        <a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box>
-
+    <a-scene embedded arjs="patternRatio:0.8;">
+      <a-marker
+        lerpsmooth
+        id="marker"
+        type="pattern"
+        url="pattern-WebAR_QR.patt"
+      >
+        <a-box
+          id="second-box-as-comparison"
+          position="0 0 0"
+          material="opacity: 0"
+        ></a-box>
       </a-marker>
-      <a-entity id="smoothed-box" position="0 0 0" scale="8 8 8" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity>
+      <a-entity id="smoothed-box" position="0 0 0" scale="5 5 5">
+        <a-entity
+          rotation="0 0 0"
+          gltf-model="cup_of_cappuccino/scene.gltf"
+          rotation-limiter
+        ></a-entity>
+      </a-entity>
       <a-entity camera></a-entity>
-      
     </a-scene>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 598bf38..ef42720 100644
--- a/index.html
+++ b/index.html
@@ -1,68 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AR Menu</title>
     <!-- <link rel="stylesheet" href="assets/style/style.css">    </link> -->
-    <style>html,
-        body {
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-            margin: 0px;
-            padding: 0px;
-            border: none;
-        }
-        
-        iframe {
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-            margin: 0px;
-            padding: 0px;
-            border: none;
-        }
-        
-        .menu-item {
-            border: 1px solid #ccc;
-            padding: 10px;
-            margin: 10px;
-            display: inline-block;
-            cursor: pointer;
-        }
-        
-        .menu-item img {
-            width: 100px;
-            height: 100px;
-            display: block;
-        }
-        
-        #iframe-container {
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-            margin: 0px;
-            padding: 0px;
-            border: none;
-            display: none;
-        }</style>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        margin: 0px;
+        padding: 0px;
+        border: none;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        margin: 0px;
+        padding: 0px;
+        border: none;
+      }
+
+      .menu-item {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin: 10px;
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      .menu-item img {
+        width: 100px;
+        height: 100px;
+        display: block;
+      }
+
+      #iframe-container {
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        margin: 0px;
+        padding: 0px;
+        border: none;
+        display: none;
+      }
+    </style>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
     <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.min.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="iframe-container">
-        <button id="button" onclick="closeSelf()" style="background-color: aqua; z-index: 3;">Go Back</button>
-        <iframe id="ar-frame" src="" width="300" height="200"></iframe>
+      <button
+        id="button"
+        onclick="closeSelf()"
+        style="background-color: aqua; z-index: 3"
+      >
+        Go Back
+      </button>
+      <iframe id="ar-frame" src="" width="300" height="200"></iframe>
     </div>
     <div id="menu">
-        <!-- Menu items will be inserted here -->
+      <!-- Menu items will be inserted here -->
     </div>
     <script src="script.js"></script>
-
-
-</body>
-
-</html>
\ No newline at end of file
+    <script src="rotation_limit.js"></script>
+  </body>
+</html>
diff --git a/rotation_limit.js b/rotation_limit.js
new file mode 100644
index 0000000..2c1ff4d
--- /dev/null
+++ b/rotation_limit.js
@@ -0,0 +1,12 @@
+AFRAME.registerComponent('rotation-limiter', {
+  tick: function () {
+    var el = this.el;
+    var rotation = el.getAttribute('rotation');
+
+    rotation.x = Math.max(0, Math.min(90, rotation.x));
+    rotation.y = Math.max(0, Math.min(90, rotation.y));
+    rotation.z = Math.max(0, Math.min(90, rotation.z));
+
+    el.setAttribute('rotation', rotation);
+  }
+});
\ No newline at end of file
