diff --git a/app.js b/app.js
new file mode 100644
index 0000000..77871be
--- /dev/null
+++ b/app.js
@@ -0,0 +1,8 @@
+const valueBlock = document.getElementById("value-expanded");
+
+document.querySelector('.value-block').addEventListener('toggle', function() {
+  if (this.open) {
+    // Code to execute when the details are opened
+    valueBlock.scrollIntoView({ behavior: "smooth" });
+  }
+});
diff --git a/index.html b/index.html
index 83c8724..d1a4f48 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
               <a class="button button-metagamerscore" href="https://metagamerscore.com/profile/25193" rel="noopener" role="button" itemprop="sameAs"><img class="icon" aria-hidden="true" src="images/icons/generic-game-controller.svg" alt="">MetaGamerScore</a>
               
               <details class="value-block">
-    		          <summary>
+    		          <summary id="value-expanded">
                   <!-- Value for Value -->
                   <span class="button button-v4v" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-bolt-icon.svg" alt="">Value for Value</a>
                 </summary>
@@ -76,6 +76,8 @@
     </div>
   </div>
 
+<script src="app.js"></script>
+
 </body>
 
 </html>