diff --git a/docs/bpmn-support.adoc b/docs/bpmn-support.adoc
index c51eb3e6dd..f556e37e1b 100644
--- a/docs/bpmn-support.adoc
+++ b/docs/bpmn-support.adoc
@@ -140,8 +140,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke width may be adjusted
 
 |Message End Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 
 |===
 
diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts
index 0f599082ba..018b430336 100644
--- a/src/component/mxgraph/shape/event-shapes.ts
+++ b/src/component/mxgraph/shape/event-shapes.ts
@@ -29,7 +29,7 @@ abstract class EventShape extends mxEllipse {
     [ShapeBpmnEventKind.MESSAGE, (c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number) => this.paintMessageIcon(c, x, y, w, h)],
     [ShapeBpmnEventKind.TERMINATE, (c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number) => this.paintTerminateIcon(c, x, y, w, h)],
   ]);
-  protected isUsingThrowIcons = false;
+  protected withFilledIcon = false;
 
   protected constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth: number) {
     super(bounds, fill, stroke, strokewidth);
@@ -48,7 +48,7 @@ abstract class EventShape extends mxEllipse {
       c.setFillColor('green');
       c.setFillAlpha(0.3);
     } // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    else if (eventKind == ShapeBpmnEventKind.MESSAGE && (this instanceof StartEventShape || this instanceof EndEventShape)) {
+    else if (eventKind == ShapeBpmnEventKind.MESSAGE && this instanceof StartEventShape) {
       c.setFillColor('yellow');
       c.setFillAlpha(0.3);
     }
@@ -77,10 +77,10 @@ abstract class EventShape extends mxEllipse {
   // https://github.com/jgraph/drawio/blob/0e19be6b42755790a749af30450c78c0d83be765/src/main/webapp/shapes/bpmn/mxBpmnShape2.js#L465
   private paintMessageIcon(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    if (!(this instanceof IntermediateEventShape)) {
+    if (!(this instanceof IntermediateEventShape || this instanceof EndEventShape)) {
       return;
     }
-    const isInverse = this.isUsingThrowIcons;
+    const isInverse = this.withFilledIcon;
     // Change the coordinate referential
     c.translate(x + w * 0.24, y + h * 0.34);
     w = w * 0.52;
@@ -157,6 +157,7 @@ export class StartEventShape extends EventShape {
 export class EndEventShape extends EventShape {
   public constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth: number = StyleConstant.STROKE_WIDTH_THICK) {
     super(bounds, fill, stroke, strokewidth);
+    this.withFilledIcon = true;
   }
 }
 
@@ -186,6 +187,6 @@ export class CatchIntermediateEventShape extends IntermediateEventShape {
 export class ThrowIntermediateEventShape extends IntermediateEventShape {
   public constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth?: number) {
     super(bounds, fill, stroke, strokewidth);
-    this.isUsingThrowIcons = true;
+    this.withFilledIcon = true;
   }
 }
diff --git a/test/e2e/View.test.ts b/test/e2e/View.test.ts
index 0c4358a6a7..d089a35a7e 100644
--- a/test/e2e/View.test.ts
+++ b/test/e2e/View.test.ts
@@ -70,6 +70,9 @@ describe('BPMN Visualization JS', () => {
         <semantic:endEvent name="End Event" id="endEvent_1">
             <semantic:incoming>_8e8fe679-eb3b-4c43-a4d6-891e7087ff80</semantic:incoming>
             <semantic:terminateEventDefinition/>
+        </semantic:endEvent>
+         <semantic:endEvent name="Message End Event" id="messageEndEvent">
+            <semantic:messageEventDefinition/>
         </semantic:endEvent>
         <semantic:sequenceFlow sourceRef="startEvent_1" targetRef="task_1" name="" id="_e16564d7-0c4c-413e-95f6-f668a3f851fb"/>
         <semantic:sequenceFlow sourceRef="task_1" targetRef="serviceTask_2" name="" id="_d77dd5ec-e4e7-420e-bbe7-8ac9cd1df599"/>
@@ -126,6 +129,9 @@ describe('BPMN Visualization JS', () => {
                     <dc:Bounds height="12.804751171875008" width="94.93333333333335" x="616.5963254593177" y="372.3333333333333"/>
                 </bpmndi:BPMNLabel>
             </bpmndi:BPMNShape>
+            <bpmndi:BPMNShape bpmnElement="messageEndEvent" id="S1373649849862_messageEndEvent">
+	           <dc:Bounds height="32.0" width="32.0" x="87.0" y="335.0" />
+	        </bpmndi:BPMNShape>
             <bpmndi:BPMNShape id="shape_IntermediateCatchEvent_Timer_01" bpmnElement="IntermediateCatchEvent_Timer_01">
                 <dc:Bounds x="272" y="293" width="36" height="36" />
                 <bpmndi:BPMNLabel>
@@ -206,6 +212,7 @@ describe('BPMN Visualization JS', () => {
     expectModelContainsBpmnEvent('startEvent_1', ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventKind.NONE);
     expectModelContainsBpmnEvent('startEvent_2_timer', ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventKind.TIMER);
     expectModelContainsBpmnEvent('endEvent_1', ShapeBpmnElementKind.EVENT_END, ShapeBpmnEventKind.TERMINATE);
+    expectModelContainsBpmnEvent('messageEndEvent', ShapeBpmnElementKind.EVENT_END, ShapeBpmnEventKind.MESSAGE);
     expectModelContainsBpmnEvent('noneIntermediateThrowEvent', ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ShapeBpmnEventKind.NONE);
     expectModelContainsBpmnEvent('messageIntermediateThrowEvent', ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ShapeBpmnEventKind.MESSAGE);
     expectModelContainsBpmnEvent('messageIntermediateCatchEvent', ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, ShapeBpmnEventKind.MESSAGE);