diff --git a/src/app/components/network/network-legend/network-legend.component.html b/src/app/components/network/network-legend/network-legend.component.html
index f2e488ed086b8dca0649f0e4ac1454b15ae9bd94..9958f3dd231d50464f6746f0d017d7d664634f03 100644
--- a/src/app/components/network/network-legend/network-legend.component.html
+++ b/src/app/components/network/network-legend/network-legend.component.html
@@ -7,11 +7,9 @@
   <!-- default legend in html -->
   <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"
-      >
-        <ng-container
+      <ng-container *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue">
+        <tr
+          class="list-item"
           *ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)"
         >
           <ng-container *ngIf="nodeGroup.value.image">
@@ -84,8 +82,8 @@
             </th>
             <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
-        </ng-container>
-      </tr>
+        </tr>
+      </ng-container>
     </ng-container>
 
     <ng-container *ngIf="this.config.showLegendEdges">
diff --git a/src/index.html b/src/index.html
index 347102d5275f6fe70b9a40d98b7c46df8e6be227..d6e6656c27efc193d1db8a9f7d2b4882e28477d2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
 <!--  <link rel="stylesheet" type="text/css" href="./stylesheets/theme.css">-->
+<style>
+  :root {
+    --drgstn-primary: #e234ee;
+    --drgstn-secondary: #fd6818;
+    --drgstn-success: #48C774;
+    --drgstn-warning: #ffdd00;
+    --drgstn-danger: #f14668;
+    --drgstn-background: #ffffff;
+    --drgstn-panel: #f7f7f7;
+    --drgstn-info: #61c43d;
+    --drgstn-text-primary: #020202;
+    --drgstn-text-secondary: #eeeeee;
+    --drgstn-border: rgba(0, 0, 0, 0.2);
+    --drgstn-tooltip: rgba(74, 74, 74, 0.9);
+    --drgstn-panel-secondary: #fafafa;
+    --drgstn-height: 600px;
+  }
+  </style>
 </head>
 <body>
 
@@ -50,9 +68,10 @@
 
   <drugst-one id="netexp1"
               pluginId="2"
-              groups='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#000000"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#000000"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"#000000","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}}}'
+              groups='{"nodeGroups":{"node":{"type":"Gene","color":"#0000FF","font":{"color":"#ffffff"},"groupName":"Node","shape":"ellipse"}, "gene":{"type":"Gene","color":"#CD5C5C","font":{"color":"#000000"},"groupName":"Gene","shape":"ellipse"}}}'
               config='{"physicsOn":false,"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
-              network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'
+              network='{"nodes":[{id: "PTEN", group: "gene"}, {id: "Node2", group: "node"}, {id: "Node3", group: "node"}, {id: "Node4", group: "node"}],
+              "edges":[{"from": "PTENP1", "to": "Node2"}, {"from": "PTEN", "to": "Node3"}, {"from": "PTEN", "to": "Node4"}]}'
    >
 </drugst-one>
 </div>
diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss
index 63a68518fc5bc7f495e7ff457479568da2fccdc0..2c09f9a93bd8af17ec04730f180c70fc161b2be4 100644
--- a/src/stylesheets/theme-styles.scss
+++ b/src/stylesheets/theme-styles.scss
@@ -1,17 +1,18 @@
 :root {
-  --drgstn-primary: #347eee;
+  --drgstn-primary: #0000FF;
   --drgstn-secondary: #fd6818;
   --drgstn-success: #48C774;
   --drgstn-warning: #ffdd00;
   --drgstn-danger: #f14668;
   --drgstn-background: #ffffff;
-  --drgstn-panel: #f7f7f7;
+  --drgstn-panel: #F0FFFF;
   --drgstn-info: #61c43d;
   --drgstn-text-primary: #020202;
   --drgstn-text-secondary: #eeeeee;
   --drgstn-border: rgba(0, 0, 0, 0.2);
   --drgstn-tooltip: rgba(74, 74, 74, 0.9);
-  --drgstn-panel-secondary: #fafafa
+  --drgstn-panel-secondary: #F0FFFF;
+  --drgstn-height: 600px;
 }
 
 // :root {