diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index fb7fbeaf89aaac69f7b05c648c2474722e204363..313e903d6725a1c8facc565fc0999015bf024337 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -1,7 +1,11 @@
+
+
 <div class="legend" [class.right]="this.config.legendPos === 'right'" [ngClass]="{ 'legend-small': smallStyle }">
+  <div class="legend-background">
 
+  </div>
   <!-- default legend in html -->
-  <table *ngIf="!this.config.legendUrl.length">
+  <table *ngIf="!this.config.legendUrl.length" class="legend-table">
     <ng-container *ngIf="this.config.showLegendNodes">
       <tr *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue" class="list-item">
 
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index cbe91cfc8aa0330460eaa6ce4561d40c360c2c0c..c090b6d97266f56c477839c29d532956f3a25998 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -1,5 +1,18 @@
 @import "src/stylesheets/variables";
 
+div.legend-background {
+  /* Fit to the legend size */
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  /* Add the blur effect */
+  opacity: 0.8;
+  background-color: var(--drgstn-panel);
+
+  border-radius: 1rem;
+}
+
 div.legend {
   position: absolute;
   bottom: 0;
@@ -7,6 +20,8 @@ div.legend {
   width: auto;
   max-width: 11rem;
   z-index: $explorer-networklegend-z;
+  // border size below legend
+  margin-bottom: 2px;
   &.right {
     right: 0;
   }
@@ -15,10 +30,14 @@ div.legend {
     zoom: 0.8;
     -moz-transform: scale(0.8);
   }
-  table tr:first-child {
-    // no border line on top of first element
-    border-top: none;
-  }
+  table {
+    z-index: $explorer-networklegend-foreground-z;
+    position: relative;
+    tr:first-child {
+      // no border line on top of first element
+      border-top: none;
+    }
+  }  
   img {
     max-width: 20vw;
     // margin-bottom: 1rem;
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 306031991e35f555e4234ef775e07217ac2beeb8..906ac7c99d02db6321b5c75e1d5b18aad81a02c4 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -9,6 +9,7 @@ $network-footer-space-button-to-border: 0.5rem;
 
 $explorer-network-z: 10;
 $explorer-networklegend-z: 20;
+$explorer-networklegend-foreground-z: 21;
 $explorer-network-toolbar-dropdown-z: 20;
 
 $analysis-view-z: 30;