diff --git a/packages/ketcher-core/src/application/editor/actions/template.ts b/packages/ketcher-core/src/application/editor/actions/template.ts
index 5e8bd93f51..c41e02e18e 100644
--- a/packages/ketcher-core/src/application/editor/actions/template.ts
+++ b/packages/ketcher-core/src/application/editor/actions/template.ts
@@ -27,13 +27,8 @@ import { fromPaste } from './paste'
 import utils from '../shared/utils'
 import { fromSgroupAddition } from './sgroup'
 
-export function fromTemplateOnCanvas(restruct, template, pos, angle) {
-  const [action, pasteItems] = fromPaste(
-    restruct,
-    template.molecule,
-    pos,
-    angle
-  )
+export function fromTemplateOnCanvas(restruct, molecule, pos, angle) {
+  const [action, pasteItems] = fromPaste(restruct, molecule, pos, angle)
 
   action.addOp(new CalcImplicitH(pasteItems.atoms).perform(restruct))
 
diff --git a/packages/ketcher-react/src/script/editor/tool/insert.ts b/packages/ketcher-react/src/script/editor/tool/insert.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/ketcher-react/src/script/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
index 1145c0a9cf..867b84d2fa 100644
--- a/packages/ketcher-react/src/script/editor/tool/template.ts
+++ b/packages/ketcher-react/src/script/editor/tool/template.ts
@@ -50,7 +50,7 @@ class TemplateTool {
       bid: parseInt(tmpl.bid) || 0
     }
 
-    const frag = tmpl.struct
+    const frag = tmpl.struct as Struct
     frag.rescale()
 
     const xy0 = new Vec2()
@@ -178,6 +178,7 @@ class TemplateTool {
 
     this.dragCtx = {
       xy0: this.editor.render.page2obj(event),
+      // TODO: it's closest item, need to rename for transparency
       ...(ci && { item: ci })
     }
 
@@ -245,7 +246,7 @@ class TemplateTool {
         this.followAction.perform(this.editor.render.ctab)
       }
 
-      const [followAction /* followItems */] = fromPaste(
+      const [followAction] = fromPaste(
         this.editor.render.ctab,
         this.template.molecule,
         this.editor.render.page2obj(event)
@@ -255,18 +256,29 @@ class TemplateTool {
       this.editor.update(followAction, true)
 
       const ci = this.editor.findItem(event, this.findItems)
-      this.editor.hover(ci, null, event)
+
+      if (ci) {
+        this.editor.hover(ci)
+      } else {
+        this.editor.hover(null)
+      }
+
       return true
     }
 
+    /* ⬇⬇⬇ drag functionality ⬇⬇⬇ */
+
     const dragCtx = this.dragCtx
     const ci = dragCtx.item
+
+    if (!ci || !['atoms', 'bonds'].includes(ci.map)) return true
+
     let pos0: Vec2 | null | undefined = null
     const pos1 = this.editor.render.page2obj(event)
     const struct = restruct.molecule
 
     /* moving when attached to bond */
-    if (ci && ci.map === 'bonds' && this.mode !== 'fg') {
+    if (ci.map === 'bonds' && this.mode !== 'fg') {
       const bond = struct.bonds.get(ci.id)
       let sign = getSign(struct, bond, pos1)
 
@@ -299,18 +311,12 @@ class TemplateTool {
     }
     /* end */
 
-    let extraBond: boolean | null = null
-    // calc initial pos and is extra bond needed
-    if (!ci) {
-      //  ci.type == 'Canvas'
-      pos0 = dragCtx.xy0
-    } else if (ci.map === 'atoms') {
-      pos0 = struct.atoms.get(ci.id)?.pp
+    /* moving when attached to atom */
 
-      if (pos0) {
-        extraBond = this.mode === 'fg' ? true : Vec2.dist(pos0, pos1) > 1
-      }
-    }
+    // calc initial position
+    pos0 = struct.atoms.get(ci.id)?.pp
+
+    const extraBond = ci && isExtraBondNeeded(this.mode, pos0, pos1)
 
     // calc angle
     let angle = utils.calcAngle(pos0, pos1)
@@ -323,13 +329,14 @@ class TemplateTool {
 
     // check if anything changed since last time
     if (
-      // eslint-disable-next-line no-prototype-builtins
+      // same angle
       dragCtx.hasOwnProperty('angle') &&
       dragCtx.angle === degrees &&
-      // eslint-disable-next-line no-prototype-builtins
+      // AND no bond OR same bond
       (!dragCtx.hasOwnProperty('extra_bond') ||
         dragCtx.extra_bond === extraBond)
     ) {
+      // nothing changed
       return true
     }
 
@@ -418,7 +425,7 @@ class TemplateTool {
         //  ci.type == 'Canvas'
         ;[action, pasteItems] = fromTemplateOnCanvas(
           restruct,
-          this.template,
+          this.template.molecule,
           dragCtx.xy0,
           0
         )
@@ -514,11 +521,16 @@ class TemplateTool {
 
 function addSaltsAndSolventsOnCanvasWithoutMerge(
   restruct: ReStruct,
-  template: Struct,
+  template: any,
   dragCtx,
   editor: Editor
 ) {
-  const [action] = fromTemplateOnCanvas(restruct, template, dragCtx.xy0, 0)
+  const [action] = fromTemplateOnCanvas(
+    restruct,
+    template.molecule,
+    dragCtx.xy0,
+    0
+  )
   editor.update(action)
   editor.selection(null)
   editor.hover(null)
@@ -527,6 +539,12 @@ function addSaltsAndSolventsOnCanvasWithoutMerge(
   })
 }
 
+function isExtraBondNeeded(mode: string, pos0, pos1): boolean {
+  if (mode === 'fg') return true
+  if (!pos0 || !pos1) return false
+  return Vec2.dist(pos0, pos1) > 1
+}
+
 function getSign(molecule, bond, v) {
   const begin = molecule.atoms.get(bond.begin).pp
   const end = molecule.atoms.get(bond.end).pp