diff --git a/boneset-api/package-lock.json b/boneset-api/package-lock.json
index 8452b629..0d07fffa 100644
--- a/boneset-api/package-lock.json
+++ b/boneset-api/package-lock.json
@@ -11,11 +11,31 @@
       "dependencies": {
         "axios": "^1.8.4",
         "cors": "^2.8.5",
+        "digitalbonesbox": "file:..",
         "dotenv": "^16.4.7",
         "express": "^4.21.2",
         "express-rate-limit": "^8.1.0"
       }
     },
+    "..": {
+      "name": "digitalbonesbox",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "axios": "^1.8.4",
+        "body-parser": "^1.20.3",
+        "cors": "^2.8.5",
+        "express": "^4.21.2",
+        "simple-git": "^3.27.0"
+      },
+      "devDependencies": {
+        "concurrently": "^9.2.1",
+        "eslint": "^9.24.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "live-server": "^1.2.2"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -198,6 +218,10 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/digitalbonesbox": {
+      "resolved": "..",
+      "link": true
+    },
     "node_modules/dotenv": {
       "version": "16.4.7",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
diff --git a/boneset-api/package.json b/boneset-api/package.json
index 06265763..1d2f7fda 100644
--- a/boneset-api/package.json
+++ b/boneset-api/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.8.4",
     "cors": "^2.8.5",
+    "digitalbonesbox": "file:..",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-rate-limit": "^8.1.0"
diff --git a/templates/boneset.html b/templates/boneset.html
index 41273cd7..c8b05336 100644
--- a/templates/boneset.html
+++ b/templates/boneset.html
@@ -194,6 +194,12 @@ <h2 id="quiz-question-text">What bone is this?</h2>
                 <button id="next-question-btn" style="display: none;">Next Question</button>
             </div>
         </div>
+        <button id="backToTopBtn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708z"/>
+                <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
+            </svg>
+        </button>
     </div>
     
     <!-- NEW Help Modal - Clean Version -->
@@ -245,6 +251,7 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
     <!-- Scripts -->
     <script type="module" src="js/sidebar.js"></script>
     <script type="module" src="js/main.js"></script>
+    <script type="module" src="js/BackToTopButton.js"></script>
     <script type="module" src="js/imageDisplay.js"></script>
     <script type="module" src="js/annotationOverlay.js"></script>
     <script type="module" src="js/imageCaptions.js"></script>
diff --git a/templates/js/BackToTopButton.js b/templates/js/BackToTopButton.js
new file mode 100644
index 00000000..126077c0
--- /dev/null
+++ b/templates/js/BackToTopButton.js
@@ -0,0 +1,16 @@
+const backToTopBtn = document.getElementById("backToTopBtn");
+
+window.addEventListener("scroll", () => {
+  if (document.documentElement.scrollTop > 20) {
+    backToTopBtn.classList.add("show");
+  } else {
+    backToTopBtn.classList.remove("show");
+  }
+});
+
+backToTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
diff --git a/templates/style.css b/templates/style.css
index df980b4a..c57aaa0a 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -1990,6 +1990,37 @@ button:disabled {
     overflow-y: auto;
 }
 
+/* Back To Top */
+
+#backToTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 10px;
+  transition: opacity 0.3s ease, bottom 0.3s ease;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+#backToTopBtn.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#backToTopBtn:hover {
+  bottom: 15px;
+/* ─── Single image layout ─────────────────────────────────────────────────── */
+.single-image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 800px;
 #quiz-modal.active {
     display: flex;
 }