diff --git a/src/component/mxgraph/ShapeConfigurator.ts b/src/component/mxgraph/ShapeConfigurator.ts
index 394f68d0c4..a0330aff3f 100644
--- a/src/component/mxgraph/ShapeConfigurator.ts
+++ b/src/component/mxgraph/ShapeConfigurator.ts
@@ -17,7 +17,7 @@ import { MxGraphFactoryService } from '../../service/MxGraphFactoryService';
 import { mxgraph } from 'ts-mxgraph';
 import { ShapeBpmnElementKind } from '../../model/bpmn/shape/ShapeBpmnElementKind';
 import { EndEventShape, StartEventShape, ThrowIntermediateEventShape, CatchIntermediateEventShape } from './shape/event-shapes';
-import { ExclusiveGatewayShape, ParallelGatewayShape } from './shape/gateway-shapes';
+import { ExclusiveGatewayShape, ParallelGatewayShape, InclusiveGatewayShape } from './shape/gateway-shapes';
 import { ServiceTaskShape, TaskShape, UserTaskShape } from './shape/task-shapes';
 
 export default class ShapeConfigurator {
@@ -38,6 +38,7 @@ export default class ShapeConfigurator {
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, CatchIntermediateEventShape);
     // gateways
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape);
+    this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape);
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape);
     // tasks
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape);
diff --git a/src/component/mxgraph/StyleConfigurator.ts b/src/component/mxgraph/StyleConfigurator.ts
index b799496571..b1738e6cfa 100644
--- a/src/component/mxgraph/StyleConfigurator.ts
+++ b/src/component/mxgraph/StyleConfigurator.ts
@@ -139,19 +139,6 @@ export default class StyleConfigurator {
 
       this.putCellStyle(kind, style);
     });
-    // TODO: this is temporary rendering - to be removed with proper rendering implementation
-    const temporaryStyle = this.cloneDefaultVertexStyle();
-    temporaryStyle[this.mxConstants.STYLE_SHAPE] = this.mxConstants.SHAPE_RHOMBUS;
-    temporaryStyle[this.mxConstants.STYLE_PERIMETER] = this.mxPerimeter.RhombusPerimeter;
-    temporaryStyle[this.mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
-    temporaryStyle[this.mxConstants.STYLE_STROKECOLOR] = '#f00';
-    temporaryStyle[this.mxConstants.STYLE_STROKEWIDTH] = 2;
-    temporaryStyle[this.mxConstants.STYLE_FILLCOLOR] = '#f00';
-    temporaryStyle[this.mxConstants.STYLE_FILL_OPACITY] = 25;
-
-    temporaryStyle[this.mxConstants.STYLE_SPACING_TOP] = 55;
-    temporaryStyle[this.mxConstants.STYLE_SPACING_RIGHT] = 110;
-    this.putCellStyle(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, temporaryStyle);
   }
 
   private configureSequenceFlowsStyle(): void {
diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts
index 73b1f53d80..10d76e24fb 100644
--- a/src/component/mxgraph/shape/gateway-shapes.ts
+++ b/src/component/mxgraph/shape/gateway-shapes.ts
@@ -110,3 +110,31 @@ export class ParallelGatewayShape extends GatewayShape {
     canvas.fillAndStroke();
   }
 }
+
+export class InclusiveGatewayShape extends GatewayShape {
+  public constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth: number = StyleConstant.STROKE_WIDTH_THIN) {
+    super(bounds, fill, stroke, strokewidth);
+  }
+
+  protected paintInnerShape(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void {
+    this.addInclusiveGatewaySymbol(c, x, y, w, h);
+  }
+
+  private addInclusiveGatewaySymbol(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void {
+    const canvas = this.configureCanvasForIcon(c, w, h, 0.5);
+    this.translateToStartingIconPosition(c, x, y, w, h);
+    c.setFillColor(this.fill);
+    c.setStrokeWidth(StyleConstant.STROKE_WIDTH_THICK);
+
+    const arcRay = 1 / 6;
+    const arcX = 1 / 6;
+    const arcY = 1 / 6;
+    canvas.begin();
+    canvas.moveTo(arcX, arcY);
+    canvas.arcTo(arcRay, arcRay, 0, 0, 0, 5 * arcX, 5 * arcY);
+    canvas.arcTo(arcRay, arcRay, 0, 0, 0, arcX, arcY);
+    canvas.close();
+
+    canvas.fillAndStroke();
+  }
+}
diff --git a/test/e2e/View.test.ts b/test/e2e/View.test.ts
index 0e4ec2705d..fd96f95885 100644
--- a/test/e2e/View.test.ts
+++ b/test/e2e/View.test.ts
@@ -85,6 +85,8 @@ describe('BPMN Visualization JS', () => {
         <semantic:sequenceFlow sourceRef="noneIntermediateThrowEvent" targetRef="messageIntermediateThrowEvent" name="" id="_8e8fe679-eb3b-4c43-a4d6-891e7087ff22" />
         <semantic:sequenceFlow sourceRef="messageIntermediateThrowEvent" targetRef="endEvent_1" name="" id="_8e8fe679-eb3b-4c43-a4d6-891e7087ff33" />
         <semantic:sequenceFlow id="Flow_028jkgv" sourceRef="startEvent_2_timer" targetRef="IntermediateCatchEvent_Timer_01" />
+        <semantic:inclusiveGateway id="inclusiveGateway_1" name="Inclusive Gateway 1">
+        </semantic:inclusiveGateway>
     </semantic:process>
     <bpmndi:BPMNDiagram documentation="" id="Trisotech_Visio-_6" name="A.1.0" resolution="96.00000267028808">
         <bpmndi:BPMNPlane bpmnElement="WFP-6-">
@@ -145,6 +147,12 @@ describe('BPMN Visualization JS', () => {
                     <dc:Bounds x="259" y="336" width="62" height="40" />
                 </bpmndi:BPMNLabel>
             </bpmndi:BPMNShape>
+            <bpmndi:BPMNShape id="shape_inclusiveGateway_1" bpmnElement="inclusiveGateway_1">
+              <dc:Bounds x="905" y="265" width="50" height="50" />
+              <bpmndi:BPMNLabel>
+                <dc:Bounds x="885" y="322" width="90" height="14" />
+              </bpmndi:BPMNLabel>
+            </bpmndi:BPMNShape>
             <bpmndi:BPMNEdge bpmnElement="default_sequence_flow_id" id="E1373649849864_default_sequence_flow_id">
                 <di:waypoint x="342.0" y="351.0"/>
                 <di:waypoint x="390.0" y="351.0"/>
@@ -250,6 +258,7 @@ describe('BPMN Visualization JS', () => {
     expectModelContainsShape('userTask_3', ShapeBpmnElementKind.TASK_USER);
     expectModelContainsEdge('default_sequence_flow_id', SequenceFlowKind.DEFAULT);
     expectModelContainsEdge('normal_sequence_flow_id', SequenceFlowKind.NORMAL);
+    expectModelContainsShape('inclusiveGateway_1', ShapeBpmnElementKind.GATEWAY_INCLUSIVE);
   });
 
   function expectModelContainsCellWithGeometry(cellId: string, parentId: string, geometry: mxgraph.mxGeometry): void {