diff --git a/model-viewer/index.html b/model-viewer/index.html
index 2b70b2f58f595d3c8e766018bebae92dcb935c42..e53853199c3c99e27a22daa23ba34694eeb4c72b 100644
--- a/model-viewer/index.html
+++ b/model-viewer/index.html
@@ -5,15 +5,51 @@
       type="module"
       src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"
     ></script>
+    <style>
+      div {
+        height: 100svh;
+        width: 100svw;
+      }
+      model-viewer {
+        height: inherit;
+        width: inherit;
+      }
+      .button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 9px 12px;
+        gap: 8px;
+        height: 40px;
+        width: 172px;
+        border: none;
+        background: #ff2849;
+        border-radius: 20px;
+        cursor: pointer;
+      }
+
+      .lable {
+        line-height: 22px;
+        font-size: 17px;
+        color: #fff;
+        font-family: sans-serif;
+        letter-spacing: 1px;
+      }
+    </style>
   </head>
   <body>
-    <model-viewer
-      src="deer/scene.gltf"
-      ar
-      shadow-intensity="1"
-      camera-controls
-      touch-action="none"
-    >
-    </model-viewer>
+    <div>
+      <model-viewer
+        src="deer/scene.gltf"
+        ar
+        shadow-intensity="1"
+        camera-controls
+        touch-action="none"
+      >
+        <div class="button" slot="ar-button">
+          <span class="lable">Go to AR</span>
+        </div>
+      </model-viewer>
+    </div>
   </body>
 </html>