diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index ab8bbb4e14090f7600eb3cdc1f6c11c74ea9c22f..83a8441433f2b006bf91ee44b8de8411df429776 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -31,7 +31,7 @@ import {NetworkSettings} from '../../network-settings';
 import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
 import {defaultConfig, IConfig} from 'src/app/config';
 import { mapCustomEdge, mapCustomNode } from 'src/app/main-network';
-import { downLoadFile, removeDuplicateObjectsFromList } from 'src/app/utils';
+import { downLoadFile, pieChartContextRenderer, removeDuplicateObjectsFromList } from 'src/app/utils';
 
 
 declare var vis: any;
@@ -801,7 +801,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
               isSeed,
               this.analysis.inSelection(wrapper),
               this.gradientMap[netexId]));
-          node.gradient = this.gradientMap[netexId];
+          node.shape = 'custom';
+          node.ctxRenderer = pieChartContextRenderer;
           updatedNodes.push(node);
         }
         this.nodeData.nodes.update(updatedNodes);
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 2ea6812fc1e54cec65c1f45b363c3cd4e90f82c1..820607444e86fa731387b669e56bd0d8c4fddf45 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -803,7 +803,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
               gradient));
 
           // try out custom ctx renderer
-          // node.gradient = gradient;
           node.shape = 'custom';
           node.ctxRenderer = pieChartContextRenderer;
           updatedNodes.push(node);
diff --git a/src/app/utils.ts b/src/app/utils.ts
index 4fbbd0c13321f74d27a72c5eb34f713439fa78da..d9a52735c69bd8280eb1ed85cb9a8dbde88545f6 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -101,7 +101,7 @@ export function rgbToHex(rgb) {
 }
 
 // https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes/47355187#47355187
-export function standardize_color(str){
+export function standardizeColor(str){
 	var ctx = document.createElement("canvas").getContext("2d");
 	ctx.fillStyle = str;
 	return ctx.fillStyle.toString();
@@ -133,8 +133,22 @@ export function downLoadFile(data: any, type: string, fmt: string) {
   a.click();
 }
 
+export function RGBAtoRGB(rgbaString) {
+  const rgbaStringSplit = rgbaString.slice(5, -1).split(",");
+  const RGBA = {red: rgbaStringSplit[0], green: rgbaStringSplit[1], blue: rgbaStringSplit[2], alpha: rgbaStringSplit[3]};
+  // assume white background
+  const bg = {red: 255, green: 255, blue: 255};
+  const RGB = {red: undefined, green: undefined, blue: undefined};
+  const alpha = 1 - RGBA.alpha;
+  RGB.red = Math.round((RGBA.alpha * (RGBA.red / 255) + (alpha * (bg.red / 255))) * 255);
+  RGB.green = Math.round((RGBA.alpha * (RGBA.green / 255) + (alpha * (bg.green / 255))) * 255);
+  RGB.blue = Math.round((RGBA.alpha * (RGBA.blue / 255) + (alpha * (bg.blue / 255))) * 255);
+  return `rgb(${RGB.red},${RGB.green},${RGB.blue})`;
+}
+
 export function pieChartContextRenderer({ ctx, x, y, state: { selected, hover }, style, label }) {
-    ctx.drawPieLabel = function(style, x, y, label) {
+  console.log(style)
+  ctx.drawPieLabel = function(style, x, y, label) {
     ctx.font = "normal 12px sans-serif";
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
@@ -144,7 +158,6 @@ export function pieChartContextRenderer({ ctx, x, y, state: { selected, hover },
 
   ctx.drawPie = function(style, x, y) {
     const total = 1;
-    let lastend = 0;
 
     // draw shadow
     if (style.shadow) {
@@ -154,13 +167,16 @@ export function pieChartContextRenderer({ ctx, x, y, state: { selected, hover },
       ctx.shadowBlur = 10;
     }
 
-    ctx.fillStyle = style.color ? style.color : "red";
+    ctx.fillStyle = style.color ? style.color : 'rgba(255, 0, 0, 1)';
+    // set alpha value to 1
+    // ctx.fillStyle = ctx.fillStyle.replace(/[^,]+(?=\))/, '1')
+    ctx.fillStyle = RGBAtoRGB(ctx.fillStyle)
     ctx.strokeStyle = "black";
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(x, y);
-    var len = style.opacity/total * 2 * Math.PI;
-    ctx.arc(x , y, style.size, lastend, lastend + len, false);
+    const len = style.opacity/total * 2 * Math.PI;
+    ctx.arc(x , y, style.size, 0, 0 + len, false);
     ctx.lineTo(x, y);
     ctx.fill();
     if (style.opacity !== total) {
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index db064d85ec7b02edfb6707eebf8456c49b1193da..aa5e9f9a1f17d77e3bf76af1fdd1821e89bb197b 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -108,7 +108,7 @@
     height: $height;
     overflow-y: auto;
     overflow-x: hidden;
-    max-width: $sidebar-max-width;
+    max-width: $sidebar-width;
     min-width: $sidebar-min-width;
     height: 100%;
     /* Hide scrollbar for Chrome, Safari and Opera */
@@ -118,6 +118,9 @@
     /* Hide scrollbar for IE, Edge and Firefox */
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
+    @media only screen and (min-width: #{$screen-lg}) {
+      max-width: 350px;
+    }
   }
 
   div.card.bar-small {
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 7931dc94beac2b62d00848624520c27840816dbb..306031991e35f555e4234ef775e07217ac2beeb8 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -1,3 +1,6 @@
+// media queries
+$screen-lg: 1400px;
+
 $row-data-selector-height: auto;
 $network-header-height: 3rem;
 $network-footer-height: 4rem;
@@ -34,7 +37,7 @@ $legend-diamond-size: 25px;
 
 $height: 100%;
 
-$sidebar-max-width: 25%;
+$sidebar-width: 25%;
 $sidebar-min-width: 240px;
 
 // settings for different screen sizes