diff --git a/misc/pinout-gen/script.js b/misc/pinout-gen/script.js
index 397da9a232..9fc2cf05b7 100644
--- a/misc/pinout-gen/script.js
+++ b/misc/pinout-gen/script.js
@@ -57,6 +57,7 @@ function adjustMarkers() {
     pins[i].style.width = height + "px";
     pins[i].style.marginTop = "-" + (height * 0.5) + "px";
     pins[i].style.marginLeft = "-" + (height * 0.5) + "px";
+    pins[i].style.fontSize = (height * 0.5) + "px";
   }
 }
 
@@ -82,6 +83,7 @@ window.addEventListener('load', function() {
       var img = document.getElementById("connector-img");
       var imgHeight = img.naturalHeight;
       var imgWidth = img.naturalWidth;
+      pdiv.textContent = pinfo.pin;
       pdiv.style.top = ((pinfo.y / imgHeight) * 100) + "%";
       pdiv.style.left = ((pinfo.x / imgWidth) * 100) + "%";
       pdiv.dataset.type = pin.type;
diff --git a/misc/pinout-gen/style.css b/misc/pinout-gen/style.css
index 594b6d8398..8775d66b23 100644
--- a/misc/pinout-gen/style.css
+++ b/misc/pinout-gen/style.css
@@ -5,10 +5,14 @@
   background-color: white;
   border: 2px blue solid;
   cursor: pointer;
+  color: black;
+  text-align: center;
+  line-height: 200%;
 }
 
 .pin-marker:hover {
   background-color: #f15a24;
+  color: white;
 }
 
 .pin-marker.highlight {