diff --git a/esbuild.config.js b/esbuild.config.js
index 2389e644..1e780b8d 100644
--- a/esbuild.config.js
+++ b/esbuild.config.js
@@ -37,7 +37,15 @@ await esbuild.build({
 });
 
 await Promise.all([
-  ...["github-mark.png", "github-black.png", "npm-icon.svg", "nodejs.png", "snyk.png", "sonatype.png", "avatar-default.png"]
-    .map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
+  ...[
+    "github-mark.png",
+    "github-black.png",
+    "npm-icon.svg",
+    "nodejs.png",
+    "snyk.png",
+    "sonatype.png",
+    "avatar-default.png",
+    "ext-link.svg"
+  ].map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
   fs.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico"))
 ]);
diff --git a/public/css/components/package-info.css b/public/css/components/package-info.css
index 5d7dfd96..b656fab0 100644
--- a/public/css/components/package-info.css
+++ b/public/css/components/package-info.css
@@ -338,6 +338,18 @@ section#package-info ul li.clickable:hover {
   font-size: 18px;
 }
 
+#pan-scorecard .score-header .visualizer a {
+  color: #cfd8dc;
+  margin-top: 6px;
+}
+
+#pan-scorecard .score-header .visualizer .logo {
+  vertical-align: sub;
+  width: 21px;
+  /* https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(99%) sepia(36%) saturate(748%) hue-rotate(170deg) brightness(93%) contrast(84%);
+}
+
 #pan-scorecard .check {
   display: flex;
   height: 26px;
diff --git a/public/img/ext-link.svg b/public/img/ext-link.svg
new file mode 100644
index 00000000..e2396e7b
--- /dev/null
+++ b/public/img/ext-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="30px" height="30px"><path d="M 25.980469 2.9902344 A 1.0001 1.0001 0 0 0 25.869141 3 L 20 3 A 1.0001 1.0001 0 1 0 20 5 L 23.585938 5 L 13.292969 15.292969 A 1.0001 1.0001 0 1 0 14.707031 16.707031 L 25 6.4140625 L 25 10 A 1.0001 1.0001 0 1 0 27 10 L 27 4.1269531 A 1.0001 1.0001 0 0 0 25.980469 2.9902344 z M 6 7 C 4.9069372 7 4 7.9069372 4 9 L 4 24 C 4 25.093063 4.9069372 26 6 26 L 21 26 C 22.093063 26 23 25.093063 23 24 L 23 14 L 23 11.421875 L 21 13.421875 L 21 16 L 21 24 L 6 24 L 6 9 L 14 9 L 16 9 L 16.578125 9 L 18.578125 7 L 16 7 L 14 7 L 6 7 z"/></svg>
\ No newline at end of file
diff --git a/public/js/components/package.info.js b/public/js/components/package.info.js
index aeb5822c..3935c66b 100644
--- a/public/js/components/package.info.js
+++ b/public/js/components/package.info.js
@@ -10,6 +10,7 @@ import { UnpkgCodeFetcher } from "./unpkgCodeFetcher.js";
 
 const kSocketDevLink = 'https://socket.dev/npm/package/';
 const kSnykAdvisorLink = 'https://snyk.io/advisor/npm-package/';
+const kScorecardVisualizer = (repo) => `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/github.com/${repo}`;
 
 export class PackageInfo {
   static DOMElementName = "package-info";
@@ -751,6 +752,7 @@ export class PackageInfo {
 
     document.getElementById('ossf-score').innerText = score;
     document.getElementById('head-score').innerText = score;
+    document.querySelector(".score-header .visualizer a").setAttribute('href', kScorecardVisualizer(repoName));
 
     const checksNodes = checksContainerElement.childNodes;
     checksNodes.forEach((check, checkKey) => {
diff --git a/views/index.html b/views/index.html
index e782d2e1..feb8a9c0 100644
--- a/views/index.html
+++ b/views/index.html
@@ -433,6 +433,9 @@ <h1><i class="icon-cog"></i>General</h1>
         <span class="score-value">
           <span id="head-score"></span>/10
         </span>
+        <span class="visualizer">
+          <a target="_blank"><img src="ext-link.svg" class="logo"> OpenSSF Scorecard Monitor Visualizer</a>
+        </span>
       </div>
     </div>
   </div>