diff --git a/lib/features/context-pad/ContextPadProvider.js b/lib/features/context-pad/ContextPadProvider.js
index b33a1b2c69..2ca337dd7b 100644
--- a/lib/features/context-pad/ContextPadProvider.js
+++ b/lib/features/context-pad/ContextPadProvider.js
@@ -110,6 +110,10 @@ export default function ContextPadProvider(
       entries.replace.action.click(event, shape);
     }
   });
+
+  eventBus.on('contextPad.close', function() {
+    appendPreview.cleanUp();
+  });
 }
 
 ContextPadProvider.$inject = [
@@ -244,16 +248,12 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       create.start(event, shape, {
         source: element
       });
-
-      appendPreview.cleanUp();
     }
 
     var append = autoPlace ? function(_, element) {
       var shape = elementFactory.createShape(assign({ type: type }, options));
 
       autoPlace.append(element, shape);
-
-      appendPreview.cleanUp();
     } : appendStart;
 
     var previewAppend = autoPlace ? function(_, element) {
@@ -487,7 +487,6 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         'bpmn-icon-text-annotation',
         translate('Add text annotation')
       ),
-
       'connect': {
         group: 'connect',
         className: 'bpmn-icon-connection-multi',
diff --git a/lib/features/modeling/cmd/SetColorHandler.js b/lib/features/modeling/cmd/SetColorHandler.js
index 3e5e2b78c2..aa28269714 100644
--- a/lib/features/modeling/cmd/SetColorHandler.js
+++ b/lib/features/modeling/cmd/SetColorHandler.js
@@ -52,7 +52,7 @@ export default function SetColorHandler(commandStack) {
       }
     }
 
-    throw new Error('invalid color value: ' + color);
+    throw new Error(`invalid color value: ${ color }`);
   };
 }
 
diff --git a/lib/features/modeling/cmd/SplitLaneHandler.js b/lib/features/modeling/cmd/SplitLaneHandler.js
index d3579701be..97b5d9bcf0 100644
--- a/lib/features/modeling/cmd/SplitLaneHandler.js
+++ b/lib/features/modeling/cmd/SplitLaneHandler.js
@@ -41,7 +41,7 @@ SplitLaneHandler.prototype.preExecute = function(context) {
       existingLanesCount = childLanes.length;
 
   if (existingLanesCount > newLanesCount) {
-    throw new Error(`more than <${newLanesCount}> child lanes`);
+    throw new Error(`more than <${ newLanesCount }> child lanes`);
   }
 
   var isHorizontalLane = isHorizontal(shape);
diff --git a/lib/features/ordering/BpmnOrderingProvider.js b/lib/features/ordering/BpmnOrderingProvider.js
index 30059674a7..ff42b5caa8 100644
--- a/lib/features/ordering/BpmnOrderingProvider.js
+++ b/lib/features/ordering/BpmnOrderingProvider.js
@@ -113,7 +113,7 @@ export default function BpmnOrderingProvider(eventBus, canvas) {
     }
 
     if (!order) {
-      throw new Error('no order for <' + element.id + '>');
+      throw new Error(`no order for <${ element.id }>`);
     }
 
     return order;
@@ -133,7 +133,7 @@ export default function BpmnOrderingProvider(eventBus, canvas) {
     }
 
     if (!actualParent) {
-      throw new Error('no parent for <' + element.id + '> in <' + (newParent && newParent.id) + '>');
+      throw new Error(`no parent for <${ element.id }> in <${ newParent && newParent.id }>`);
     }
 
     return actualParent;
diff --git a/lib/import/BpmnTreeWalker.js b/lib/import/BpmnTreeWalker.js
index d908c2d4a2..1287c9bf10 100644
--- a/lib/import/BpmnTreeWalker.js
+++ b/lib/import/BpmnTreeWalker.js
@@ -80,7 +80,7 @@ export default function BpmnTreeWalker(handler) {
     // avoid multiple rendering of elements
     if (gfx) {
       throw new Error(
-        'already rendered ${ elementToString(element) }'
+        `already rendered ${ elementToString(element) }`
       );
     }
 
diff --git a/rollup.config.js b/rollup.config.js
index 7a0ba30cc1..aa3e57234c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -131,7 +131,7 @@ function processTemplate(str, args) {
     var replacement = args[n];
 
     if (!replacement) {
-      throw new Error('unknown template {{ ' + n + '}}');
+      throw new Error(`unknown template {{ ${ n } }}`);
     }
 
     return replacement;
diff --git a/test/spec/features/context-pad/ContextPadProviderSpec.js b/test/spec/features/context-pad/ContextPadProviderSpec.js
index 530557a856..45d8553d91 100644
--- a/test/spec/features/context-pad/ContextPadProviderSpec.js
+++ b/test/spec/features/context-pad/ContextPadProviderSpec.js
@@ -737,6 +737,29 @@ describe('features - context-pad', function() {
       expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(2);
     }));
 
+
+    it('should remove append preview on close', inject(function(canvas, elementRegistry, contextPad) {
+
+      // given
+      var element = elementRegistry.get('Task_1');
+
+      contextPad.open(element);
+
+      // mock event
+      var event = padEvent('append.gateway');
+
+      contextPad.trigger('hover', event);
+
+      expect(canvas.getLayer('complex-preview')).to.exist;
+      expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(2);
+
+      // when
+      contextPad.close();
+
+      // then
+      expect(domQueryAll('.djs-dragger', canvas.getLayer('complex-preview'))).to.have.length(0);
+    }));
+
   });
 
 });
diff --git a/test/spec/features/ordering/Helper.js b/test/spec/features/ordering/Helper.js
index 3094221b68..f45bd81c1c 100644
--- a/test/spec/features/ordering/Helper.js
+++ b/test/spec/features/ordering/Helper.js
@@ -206,7 +206,7 @@ export function expectZOrder() {
 
     if (next && compareZOrder(e, next) !== -1) {
       throw new Error(
-        'expected <element#' + (next.id || next) + '> to be in front of <element#' + (e.id || e) + '>'
+        `expected <element#${ next.id || next }> to be in front of <element#${ e.id || e }>`
       );
     }
   });