diff --git a/www/css/style.css b/www/css/style.css
index eadaa62..ccacde9 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -9,6 +9,12 @@
   --block-description-bg: #f8f9fa;
   --block-miner-color: rgb(122, 122, 122);
   --node-indicatior-stroke: black;
+
+  --tip-status-color-active: #79FF00;
+  --tip-status-color-invalid: #CC203B;
+  --tip-status-color-valid-fork: #3CACB5;
+  --tip-status-color-valid-headers: #FF69B4;
+  --tip-status-color-headers-only: #FF8800;
 }
 
 /* automatic dark mode */
@@ -22,6 +28,12 @@
     --block-description-bg: #f8f9fa;
     --node-indicatior-stroke: black;
     --block-miner-color: rgb(172, 172, 172);
+
+    --tip-status-color-active: #79FF00;
+    --tip-status-color-invalid: #CC203B;
+    --tip-status-color-valid-fork: #3CACB5;
+    --tip-status-color-valid-headers: #FF69B4;
+    --tip-status-color-headers-only: #FF8800;
   }
   svg.invert, img.invert, .btn-close {
     -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
@@ -39,6 +51,12 @@
   --block-description-bg: #f8f9fa;
   --node-indicatior-stroke: black;
   --block-miner-color: rgb(172, 172, 172);
+
+  --tip-status-color-active: #79FF00;
+  --tip-status-color-invalid: #CC203B;
+  --tip-status-color-valid-fork: #3CACB5;
+  --tip-status-color-valid-headers: #FF69B4;
+  --tip-status-color-headers-only: #FF8800;
   svg.invert, img.invert, .btn-close {
     -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
     filter: invert(100%);
@@ -118,13 +136,25 @@ text.block-miner {
  fill: black;
 }
 
-.tip-status-color-fill-active { fill: #79FF00; color: #79FF00 }
-.tip-status-color-fill-invalid { fill: #CC203B; color: #CC203B }
-.tip-status-color-fill-valid-fork { fill: #3CACB5; color: #3CACB5 }
-.tip-status-color-fill-valid-headers { fill: #FF69B4; color: #FF69B4 }
-.tip-status-color-fill-headers-only { fill: #FF8800; color: #FF8800 }
+/* For the legend */ 
+.legend-item {
+  color: black;
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+
+.tip-status-color-background-active { background-color: var(--tip-status-color-active); }
+.tip-status-color-background-invalid { background-color: var(--tip-status-color-invalid); color: }
+.tip-status-color-background-valid-fork { background-color: var(--tip-status-color-valid-fork); }
+.tip-status-color-background-valid-headers { background-color: var(--tip-status-color-valid-headers); }
+.tip-status-color-background-headers-only { background-color: var(--tip-status-color-headers-only); }
+
 
-/* Connection status CSS */ 
+.tip-status-color-fill-active { fill: var(--tip-status-color-active); color: var(--tip-status-color-active); }
+.tip-status-color-fill-invalid { fill: var(--tip-status-color-invalid); color: var(--tip-status-color-invalid); }
+.tip-status-color-fill-valid-fork { fill: var(--tip-status-color-valid-fork); color: var(--tip-status-color-valid-fork); }
+.tip-status-color-fill-valid-headers { fill: var(--tip-status-color-valid-headers); color: var(--tip-status-color-valid-headers); }
+.tip-status-color-fill-headers-only { fill: var(--tip-status-color-headers-only); color: var(--tip-status-color-headers-only); }
 
 #connection-status {
   animation: pulse infinite 5s;
diff --git a/www/index.html b/www/index.html
index 65ab927..28af3ba 100644
--- a/www/index.html
+++ b/www/index.html
@@ -65,9 +65,18 @@ <h3>Network: <span id="network_info_name"></span></h3>
           </details>
         </p>
         <div>
-          <label>Orientation <select name="orientation" id="orientation"></select></label>
+          <label>orientation <select name="orientation" id="orientation"></select></label>
         </div>
-        <svg style="flex:1; flex-basis: 75vh; height:75vh;" class="border" id="drawing-area"></svg>
+        <svg style="flex:1; flex-basis: 75vh; height:75vh;" class="border" id="drawing-area">
+          <foreignobject id="legend" x="0" y="5" width="150" height="300" style="text-align: right;">
+            <label>tip status</label><br>
+            <span class="tip-status-color-background-active legend-item"><abbr title="This is the tip of the active main chain, which is certainly valid">active</abbr></span><br>
+            <span class="tip-status-color-background-valid-fork legend-item"><abbr title="This branch is not part of the active chain, but is fully validated">valid-fork</abbr></span><br>
+            <span class="tip-status-color-background-valid-headers legend-item"><abbr title="All blocks are available for this branch, but they were never fully validated">valid-headers</abbr></span><br>
+            <span class="tip-status-color-background-headers-only legend-item"><abbr title="Not all blocks for this branch are available, but the headers are valid">headers-only</abbr></span><br>
+            <span class="tip-status-color-background-invalid legend-item"><abbr title="This branch contains at least one invalid block">invalid</abbr></span><br>
+          </foreignobject>
+        </svg>
       </div>
     </main>
     <hr>
diff --git a/www/js/blocktree.js b/www/js/blocktree.js
index 29a328b..03f58e0 100644
--- a/www/js/blocktree.js
+++ b/www/js/blocktree.js
@@ -315,6 +315,9 @@ function draw() {
   zoom.scaleBy(svg, 1);
   let svgSize = d3.select("#drawing-area").node().getBoundingClientRect();
   zoom.translateTo(svg.transition(d3.transition().duration(initialDraw ? 0 : 750)), offset_x, offset_y, [(svgSize.width)/2, (svgSize.height)/2])
+  
+  svg.select("#legend").attr("x", svg.node().clientWidth - 150 - 10)
+  
   initialDraw = false
 }