diff --git a/static/js/pw.js b/static/js/pw.js
index 59abe8cc..2bfc2c79 100644
--- a/static/js/pw.js
+++ b/static/js/pw.js
@@ -154,6 +154,10 @@ function draw(pathway, elem) {
         });
 
         node.attr("transform", d => `translate(${d.x},${d.y})`);
+
+        linkText
+         .attr("x", d => (d.source.x + d.target.x) / 2)
+         .attr("y", d => (d.source.y + d.target.y) / 2);
     }
 
     function dragstarted(event, d) {
@@ -647,21 +651,32 @@ function draw(pathway, elem) {
         .on("tick", ticked);
 
     // Kanten zeichnen
-    const link = zoomable.append("g")
-        .selectAll("path")
-        .data(links)
-        .enter().append("path")
-        // Check if target is pseudo and draw marker only if not pseudo
-        .attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
-        .attr("marker-end", d => {
-            if (d.target.pseudo) return '';
-            if (d.source.id === d.target.id) return 'url(#curve-arrow)'; // Use curve arrow for self-loops
-            return d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)';
-        })
-        .attr("fill", "none")
-        .on("click", function(event, d) {
+    const linkGroup = zoomable.append("g")
+      .selectAll("g")
+      .data(links)
+      .enter()
+      .append("g")
+      .attr("class", "link-group");
+
+
+    const link = linkGroup
+      .append("path")
+      .attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
+      .attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)")
+      .attr("fill", "none")
+
+      // Check if target is pseudo and draw marker only if not pseudo
+      .attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
+      .attr("marker-end", d => {
+        if (d.target.pseudo) return '';
+        if (d.source.id === d.target.id) return 'url(#curve-arrow)'; // Use curve arrow for self-loops
+          return d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)';
+        }
+      )
+      .attr("fill", "none")
+      .on("click", function(event, d) {
           const wasHighlighted = d3.select(this).classed("highlighted");
-	      d3.selectAll("path").classed("highlighted", false);
+          d3.selectAll("path").classed("highlighted", false);
           if (!wasHighlighted) {
             const toHighlight = [];
             toHighlight.push(d.el);
@@ -688,6 +703,18 @@ function draw(pathway, elem) {
           }
         });
 
+    const linkText = linkGroup
+      .append("text")
+      .attr("class", "link-label")
+      .attr("text-anchor", "middle")
+      .attr("dy", -6)
+      .style("font-size", "4px")
+      .style("pointer-events", "none")
+      .style("display", "none")
+      .text(d => d.name)
+      .attr("x", d => (d.source.x + d.target.x) / 2)
+      .attr("y", d => (d.source.y + d.target.y) / 2);
+
     // add element to links array
     link.each(function (d) {
         d.el = this;  // attach the DOM element to the data object
diff --git a/templates/objects/pathway.html b/templates/objects/pathway.html
index 1ebfab4c..7474c380 100644
--- a/templates/objects/pathway.html
+++ b/templates/objects/pathway.html
@@ -177,6 +177,52 @@
                   tabindex="0"
                   class="dropdown-content menu bg-base-100 rounded-box z-50 w-60 p-2"
                 >
+                  <li>
+                    <a id="compound-names-toggle-button" class="cursor-pointer">
+                      <svg
+                          id="compound-names-icon"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="lucide lucide-eye"
+                        >
+                          <path
+                            d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
+                          />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
+                      Compound Names
+                    </a>
+                  </li>
+                  <li>
+                    <a id="reaction-names-toggle-button" class="cursor-pointer">
+                      <svg
+                          id="reaction-names-icon"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="lucide lucide-eye"
+                        >
+                          <path
+                            d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
+                          />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
+                      Reaction Names
+                    </a>
+                  </li>
                   {% if pathway.setting.model.app_domain %}
                     <li>
                       <a id="app-domain-toggle-button" class="cursor-pointer">
@@ -497,6 +543,10 @@
   {{ pathway.d3_json|json_script:"pathway" }}
 
   <script>
+    // Global switch for compound names view
+    var compoundNamesViewEnabled = false;
+    // Gloabl switch for reaction names view
+    var reactionNamesViewEnabled = false;
     // Global switch for app domain view
     var appDomainViewEnabled = false;
     // Global switch for timeseries view
@@ -532,6 +582,67 @@
         descContent.innerHTML = newDesc;
       }
 
+      const compoundNamesBtn = document.getElementById("compound-names-toggle-button");
+      if (compoundNamesBtn) {
+        compoundNamesBtn.addEventListener("click", function () {
+          compoundNamesViewEnabled = !compoundNamesViewEnabled;
+          const icon = document.getElementById("compound-names-icon");
+
+          if (compoundNamesViewEnabled) {
+            // Change to eye-off icon
+            icon.innerHTML =
+              '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
+
+            nodes.forEach((x) => {
+              if (x.name) {
+                d3.select(x.el)
+                  .append("text")
+                  .text(d => d.name)
+                  .attr("text-anchor", "middle")
+                  .attr("y", -20)
+                  .style("font-size", "4px");
+              }
+            });
+          } else {
+            // Change back to eye icon
+            icon.innerHTML =
+              '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
+
+            nodes.forEach((x) => {
+              d3.select(x.el)
+                .select("text")
+                .remove()
+            })
+          }
+        });
+      }
+
+      const reactionNamesBtn = document.getElementById("reaction-names-toggle-button");
+      if (reactionNamesBtn) {
+        reactionNamesBtn.addEventListener("click", function () {
+          reactionNamesViewEnabled = !reactionNamesViewEnabled;
+          const icon = document.getElementById("reaction-names-icon");
+
+          if (reactionNamesViewEnabled) {
+            // Change to eye-off icon
+            icon.innerHTML =
+              '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
+
+              d3.selectAll(".link-label")
+                .style("display", null);
+
+          } else {
+            // Change back to eye icon
+            icon.innerHTML =
+              '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
+
+            d3.selectAll(".link-label")
+                .style("display", "none");
+
+          }
+        });
+      }
+
       // App domain toggle
       const appDomainBtn = document.getElementById("app-domain-toggle-button");
       if (appDomainBtn) {