diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index e90c6498465b622822a86043cb805719c0fe3cd6..ae48c09bd28e5c4dedf1b79fe28c2f47765a23d9 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -25,6 +25,10 @@
               <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
               </span>
             </td>
+            <td *ngSwitchCase="'triangleDown'">
+              <span class="node {{ nodeGroup.value.shape }}" [style.border-top-color]=nodeGroup.value.color>
+              </span>
+            </td>
             <td *ngSwitchCase="'diamond'">
               <span class="node {{ nodeGroup.value.shape }}" 
                     [style.background-color]=nodeGroup.value.color
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index 7e5d263b85e737353ecac6373cd85f8086b3bc27..a540d034dc7741f0fe0eaef09eede03bfd840c03 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -58,11 +58,19 @@ div.legend {
       .triangle{
         width: 0;
         height: 0;
-        border-left: calc(#{$legend-circle-size} / 2) solid transparent;
-        border-right: calc(#{$legend-circle-size} / 2) solid transparent;
-        border-bottom: $legend-circle-size solid black;
+        border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-bottom: $legend-triangle-height solid black;  // default color will be changed by user input
         display: inline-block;
       }
+      .triangleDown {
+        width: 0;
+        height: 0;
+        border-left: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
+        border-top: $legend-triangle-height solid black;  // default color will be changed by user input
+        display: inline-block;
+      }  
       .star {
         position: relative;
         display: inline-block;
@@ -100,8 +108,8 @@ div.legend {
         display: inline-block;
       }
       .legend-icon {
-        width: $legend-circle-size;
-        height: $legend-circle-size;
+        width: $legend-row-height;
+        height: $legend-row-height;
       }
       hr.edge{
         width: $legend-edge-width;
diff --git a/src/index.html b/src/index.html
index b36d924c9537d9df4a42dfad11c272ee681458c5..522fd620b44b612b9061f57e7cc5a51bdd78b47d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -36,7 +36,7 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}},
+                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "triangleDown"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "triangle"}},
                       "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol"
                     }'
diff --git a/src/variables.scss b/src/variables.scss
index 359e096511a5a770e2b8d249a2edfebc516b864f..2170d7aa3517552cb59a5147a0e6741caf649ea1 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,17 +1,21 @@
 $row-data-selector-height: auto;
 $network-footer-height: 90px;
 
+// Settings Legend
 $legend-default-background-color: #143d1f;
-$legend-circle-size: 35px;
+$legend-row-height: 35px;
+$legend-circle-size: $legend-row-height;
 $legend-star-size: 20px;
-$legend-square-width: 35px;
+$legend-square-width: $legend-row-height;
 $legend-edge-width: 20px;
 $legend-edge-height: 3px;
 $legend-star-color: #FC0;
+$legend-triangle-size: $legend-row-height;
+$legend-triangle-height: 29px;
 
 $height: 100%;
 
-
+// Settings Interface Components
 $sidebar-right-width: 25%;
 $sidebar-right-min-width: 210px;
 $sidebar-left-width: 18%;