diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index a737b297..79f609d9 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -11,6 +11,7 @@
   {{ template "diffTopbar" . }}
   {{ block "diffLayout" . }} {{ end }}
   {{ template "fragments/resizable" }}
+  {{ template "activeFileHighlight" }}
 {{ end }}
 
 {{ define "diffTopbar" }}
@@ -229,3 +230,48 @@
     });
   </script>
 {{ end }}
+
+{{ define "activeFileHighlight" }}
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const diffFiles = document.querySelectorAll('details[id^="file-"]');
+      const filetreeLinks = document.querySelectorAll('.filetree-link');
+      if (diffFiles.length === 0 || filetreeLinks.length === 0) return;
+
+      const linkMap = new Map();
+      filetreeLinks.forEach(link => {
+        const path = link.getAttribute('data-path');
+        if (path) linkMap.set('file-' + path, link);
+      });
+
+      let currentActive = null;
+      function setActive(link) {
+        if (link && link !== currentActive) {
+          if (currentActive) currentActive.classList.remove('font-bold');
+          link.classList.add('font-bold');
+          currentActive = link;
+        }
+      }
+
+      filetreeLinks.forEach(link => {
+        link.addEventListener('click', () => setActive(link));
+      });
+
+      const topbar = document.querySelector('.sticky.top-0.z-30');
+      const headerHeight = topbar ? topbar.offsetHeight : 0;
+
+      function updateActiveFile() {
+        for (const file of diffFiles) {
+          const rect = file.getBoundingClientRect();
+          if (rect.top <= headerHeight && rect.bottom > headerHeight) {
+            setActive(linkMap.get(file.id));
+            return;
+          }
+        }
+      }
+
+      document.addEventListener('scroll', updateActiveFile);
+      updateActiveFile();
+    });
+  </script>
+{{ end }}
diff --git a/appview/pages/templates/repo/fragments/fileTree.html b/appview/pages/templates/repo/fragments/fileTree.html
index 3453c208..b6c6e3a7 100644
--- a/appview/pages/templates/repo/fragments/fileTree.html
+++ b/appview/pages/templates/repo/fragments/fileTree.html
@@ -16,7 +16,7 @@
   {{ else if .Name }}
     <div class="tree-file flex items-center gap-2 pt-1">
       {{ i "file" "flex-shrink-0 size-4" }}
-      <a href="#file-{{ .Path }}" class="filename truncate text-black dark:text-white no-underline hover:underline">{{ .Name }}</a>
+      <a href="#file-{{ .Path }}" data-path="{{ .Path }}" class="filetree-link filename truncate text-black dark:text-white no-underline hover:underline">{{ .Name }}</a>
     </div>
   {{ else }}
     {{ range $child := .Children }}