diff --git a/packages/ketcher-core/src/application/actions/action.types.ts b/packages/ketcher-core/src/application/actions/action.types.ts
index 394d0f87f7..d77e83c5c5 100644
--- a/packages/ketcher-core/src/application/actions/action.types.ts
+++ b/packages/ketcher-core/src/application/actions/action.types.ts
@@ -14,6 +14,13 @@
  * limitations under the License.
  ***************************************************************************/
 
+// import { Operation } from "application/operations"
+// import { ReStruct } from "application/render"
+
 export interface Action {
   perform: () => void
+  // operations: Array<Operation>
+  // mergeWith(action: Action): Action
+  // addOp(operation: Operation, restruct?: ReStruct): Operation
+  // isDummy(restruct?: ReStruct): boolean
 }
diff --git a/packages/ketcher-core/src/application/editor/editor.types.ts b/packages/ketcher-core/src/application/editor/editor.types.ts
index 436f43180e..35497fcbc4 100644
--- a/packages/ketcher-core/src/application/editor/editor.types.ts
+++ b/packages/ketcher-core/src/application/editor/editor.types.ts
@@ -52,4 +52,5 @@ export interface Editor {
   setOptions: (opts: string) => any
   zoom: (value?: any) => any
   structSelected: () => Struct
+  // update: (action: Action | true, ignoreHistory?: boolean) => void
 }
diff --git a/packages/ketcher-core/src/application/formatters/formatProperties.ts b/packages/ketcher-core/src/application/formatters/formatProperties.ts
index 6091eec922..8f34ca8d92 100644
--- a/packages/ketcher-core/src/application/formatters/formatProperties.ts
+++ b/packages/ketcher-core/src/application/formatters/formatProperties.ts
@@ -100,6 +100,12 @@ const formatProperties: FormatPropertiesMap = {
     ChemicalMimeType.CDX,
     ['.cdx'],
     true
+  ),
+  unknown: new SupportedFormatProperties(
+    'Unknown',
+    ChemicalMimeType.UNKNOWN,
+    ['.'],
+    true
   )
 }
 
diff --git a/packages/ketcher-core/src/application/formatters/formatterFactory.ts b/packages/ketcher-core/src/application/formatters/formatterFactory.ts
index 76d7a810a7..1eb8cd2992 100644
--- a/packages/ketcher-core/src/application/formatters/formatterFactory.ts
+++ b/packages/ketcher-core/src/application/formatters/formatterFactory.ts
@@ -92,6 +92,7 @@ export class FormatterFactory {
       case SupportedFormat.smarts:
       case SupportedFormat.cdxml:
       case SupportedFormat.cdx:
+      case SupportedFormat.unknown:
       default:
         formatter = new ServerFormatter(
           this.#structService,
diff --git a/packages/ketcher-core/src/application/formatters/identifyStructFormat.ts b/packages/ketcher-core/src/application/formatters/identifyStructFormat.ts
index cad099b4a7..883903bd68 100644
--- a/packages/ketcher-core/src/application/formatters/identifyStructFormat.ts
+++ b/packages/ketcher-core/src/application/formatters/identifyStructFormat.ts
@@ -32,6 +32,10 @@ export function identifyStructFormat(
     return SupportedFormat.rxn
   }
 
+  if (sanitizedString.indexOf('V2000') !== -1) {
+    return SupportedFormat.mol
+  }
+
   if (sanitizedString.indexOf('V3000') !== -1) {
     return SupportedFormat.molV3000
   }
@@ -55,12 +59,16 @@ export function identifyStructFormat(
     return SupportedFormat.cml
   }
 
-  const clearStr = sanitizedString.replace(/\s/g, '')
-  const anyLetterAnyDigitContainsSlashesEndsWithEqualSign =
-    /^[a-zA-Z0-9+/]*={0,2}$/
+  const clearStr = sanitizedString
+    .replace(/\s/g, '')
+    .replace(/(\\r)|(\\n)/g, '')
+  const isBase64String =
+    /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/
+  const cdxHeader = 'VjCD0100'
   if (
-    anyLetterAnyDigitContainsSlashesEndsWithEqualSign.test(clearStr) &&
-    clearStr.length % 4 === 0
+    clearStr.length % 4 === 0 &&
+    isBase64String.test(clearStr) &&
+    window.atob(clearStr).startsWith(cdxHeader)
   ) {
     return SupportedFormat.cdx
   }
@@ -69,10 +77,7 @@ export function identifyStructFormat(
     return SupportedFormat.inChI
   }
 
-  if (
-    sanitizedString.indexOf('\n') === -1 &&
-    sanitizedString === sanitizedString.toUpperCase()
-  ) {
+  if (sanitizedString.indexOf('\n') === -1) {
     // TODO: smiles regexp
     return SupportedFormat.smiles
   }
@@ -80,6 +85,6 @@ export function identifyStructFormat(
   if (sanitizedString.indexOf('<CDXML') !== -1) {
     return SupportedFormat.cdxml
   }
-  // Molfile by default as Indigo does
-  return SupportedFormat.mol
+
+  return SupportedFormat.unknown
 }
diff --git a/packages/ketcher-core/src/application/formatters/structFormatter.types.ts b/packages/ketcher-core/src/application/formatters/structFormatter.types.ts
index 1ebb32651e..62e6fee943 100644
--- a/packages/ketcher-core/src/application/formatters/structFormatter.types.ts
+++ b/packages/ketcher-core/src/application/formatters/structFormatter.types.ts
@@ -37,7 +37,8 @@ export enum SupportedFormat {
   cml = 'cml',
   ket = 'ket',
   cdxml = 'cdxml',
-  cdx = 'cdx'
+  cdx = 'cdx',
+  unknown = 'unknown'
 }
 
 export type FormatterFactoryOptions = Partial<
diff --git a/packages/ketcher-core/src/application/operations/index.ts b/packages/ketcher-core/src/application/operations/index.ts
index 90a41a9494..99fd45c1f0 100644
--- a/packages/ketcher-core/src/application/operations/index.ts
+++ b/packages/ketcher-core/src/application/operations/index.ts
@@ -25,3 +25,4 @@ export * from './rxnPlus'
 export * from './sgroup'
 export * from './simpleObject'
 export * from './text'
+export * from './baseOperation'
diff --git a/packages/ketcher-core/src/application/operations/operations.types.ts b/packages/ketcher-core/src/application/operations/operations.types.ts
index 9eba6cd35e..f62a6d7545 100644
--- a/packages/ketcher-core/src/application/operations/operations.types.ts
+++ b/packages/ketcher-core/src/application/operations/operations.types.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
+import { ReStruct } from 'application/render'
 import { Struct } from 'domain/entities'
 
 export type OperationType =
@@ -70,8 +71,13 @@ export type OperationType =
 export interface Operation {
   readonly type: OperationType
   readonly priority: number
+  readonly _inverted: OperationType | undefined
+  data: any
   // eslint-disable-next-line no-use-before-define
   perform: (struct: Struct) => PerformOperationResult
+  invert(): Operation
+  isDummy(_restruct: ReStruct): boolean
+  execute(_restruct: ReStruct): void
 }
 
 export type PerformOperationResult = {
diff --git a/packages/ketcher-core/src/application/render/restruct/restruct.ts b/packages/ketcher-core/src/application/render/restruct/restruct.ts
index 1f875b7944..8ae3d79bd8 100644
--- a/packages/ketcher-core/src/application/render/restruct/restruct.ts
+++ b/packages/ketcher-core/src/application/render/restruct/restruct.ts
@@ -605,10 +605,14 @@ class ReStruct {
             item.selected = sGroupAtoms.length > 0 && sGroupAtoms[0].selected
           }
 
-          const selected = selection?.[map]
+          let selected = selection?.[map]
             ? selection[map].indexOf(id) > -1
             : item.selected
 
+          if (selection === null) {
+            selected = false
+          }
+
           this.showItemSelection(item, selected)
         })
       }
diff --git a/packages/ketcher-core/src/domain/entities/functionalGroup.ts b/packages/ketcher-core/src/domain/entities/functionalGroup.ts
index 22ad8860f6..bb1c2424c5 100644
--- a/packages/ketcher-core/src/domain/entities/functionalGroup.ts
+++ b/packages/ketcher-core/src/domain/entities/functionalGroup.ts
@@ -60,9 +60,14 @@ export class FunctionalGroup {
   static getFunctionalGroupByName(searchName: string): Struct | null {
     const provider = FunctionalGroupsProvider.getInstance()
     const functionalGroups = provider.getFunctionalGroupsList()
-    const foundGroup = functionalGroups.find(({ name, abbreviation }) => {
-      return name === searchName || abbreviation === searchName
-    })
+
+    let foundGroup
+    if (searchName) {
+      foundGroup = functionalGroups.find(({ name, abbreviation }) => {
+        return name === searchName || abbreviation === searchName
+      })
+    }
+
     return foundGroup || null
   }
 
diff --git a/packages/ketcher-core/src/domain/services/struct/structService.types.ts b/packages/ketcher-core/src/domain/services/struct/structService.types.ts
index cce91b2ac4..7d26c019f9 100644
--- a/packages/ketcher-core/src/domain/services/struct/structService.types.ts
+++ b/packages/ketcher-core/src/domain/services/struct/structService.types.ts
@@ -25,7 +25,8 @@ export enum ChemicalMimeType {
   CDX = 'chemical/x-cdx',
   CDXML = 'chemical/x-cdxml',
   CML = 'chemical/x-cml',
-  KET = 'chemical/x-indigo-ket'
+  KET = 'chemical/x-indigo-ket',
+  UNKNOWN = 'chemical/x-unknown'
 }
 
 export interface WithStruct {
diff --git a/packages/ketcher-react/package.json b/packages/ketcher-react/package.json
index c3f91fe803..f55aa7bc93 100644
--- a/packages/ketcher-react/package.json
+++ b/packages/ketcher-react/package.json
@@ -126,6 +126,7 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "stylelint": "13.13.1",
diff --git a/packages/ketcher-react/rollup.config.js b/packages/ketcher-react/rollup.config.js
index a85bc85c35..8d313b9e6d 100644
--- a/packages/ketcher-react/rollup.config.js
+++ b/packages/ketcher-react/rollup.config.js
@@ -16,6 +16,7 @@ import strip from '@rollup/plugin-strip'
 import svgr from '@svgr/rollup'
 import typescript from 'rollup-plugin-typescript2'
 import { license } from '../../license.ts'
+import { string } from 'rollup-plugin-string'
 
 const mode = {
   PRODUCTION: 'production',
@@ -98,7 +99,10 @@ const config = {
       comments: 'none',
       include: includePattern
     }),
-    ...(isProduction ? [strip({ include: includePattern })] : [])
+    ...(isProduction ? [strip({ include: includePattern })] : []),
+    string({
+      include: '**/*.sdf'
+    })
   ]
 }
 
diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
index 8ddbf03fed..b2026a67b9 100644
--- a/packages/ketcher-react/src/script/editor/Editor.ts
+++ b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -387,7 +387,7 @@ class Editor implements KetcherEditor {
     }
   }
 
-  update(action: Action | true, ignoreHistory?) {
+  update(action: Action | true, ignoreHistory?: boolean) {
     if (action === true) {
       this.render.update(true) // force
     } else {
@@ -606,6 +606,10 @@ function domEventSetup(editor: Editor, clientArea) {
       editor.lastEvent = event
       if (EditorTool && eventName in EditorTool) {
         EditorTool[eventName](event)
+        return true
+      }
+      if (eventName === 'mouseup') {
+        editor.selection(null)
       }
       return true
     }, -1)
diff --git a/packages/ketcher-react/src/script/editor/tool/bond.ts b/packages/ketcher-react/src/script/editor/tool/bond.ts
index ea58033434..5107da7f8a 100644
--- a/packages/ketcher-react/src/script/editor/tool/bond.ts
+++ b/packages/ketcher-react/src/script/editor/tool/bond.ts
@@ -284,7 +284,7 @@ class BondTool {
 
         this.editor.update(bondAddition[0])
       } else if (dragCtx.item.map === 'atoms') {
-        // when does it hapend?
+        // click on atom
         this.editor.update(
           fromBondAddition(
             rnd.ctab,
diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
index 091dae5897..acebb0b07b 100644
--- a/packages/ketcher-react/src/script/editor/tool/select.ts
+++ b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -34,7 +34,7 @@ import {
 
 import LassoHelper from './helper/lasso'
 import { atomLongtapEvent } from './atom'
-import { sgroupDialog } from './sgroup'
+import SGroupTool from './sgroup'
 import utils from '../shared/utils'
 import { xor } from 'lodash/fp'
 import { Editor } from '../Editor'
@@ -193,6 +193,7 @@ class SelectTool {
     if (event.shiftKey) {
       this.editor.selection(selMerge(sel, selection, true))
     } else {
+      this.editor.selection(null)
       this.editor.selection(isSelected(selection, ci) ? selection : sel)
     }
     return true
@@ -535,7 +536,7 @@ class SelectTool {
       ci.map === 'sgroupData'
     ) {
       editor.selection(closestToSel(ci))
-      sgroupDialog(editor, ci.id, null)
+      SGroupTool.sgroupDialog(editor, ci.id, null)
     } else if (ci.map === 'texts') {
       editor.selection(closestToSel(ci))
       const text = molecule.texts.get(ci.id)
diff --git a/packages/ketcher-react/src/script/editor/tool/sgroup.ts b/packages/ketcher-react/src/script/editor/tool/sgroup.ts
index 5ffb47dfe9..4be43ec1f9 100644
--- a/packages/ketcher-react/src/script/editor/tool/sgroup.ts
+++ b/packages/ketcher-react/src/script/editor/tool/sgroup.ts
@@ -143,7 +143,7 @@ class SGroupTool {
         return
       }
 
-      sgroupDialog(this.editor, id !== undefined ? id : null, this.type)
+      SGroupTool.sgroupDialog(this.editor, id ?? null, this.type)
       this.isNotActiveTool = true
     }
   }
@@ -443,7 +443,7 @@ class SGroupTool {
 
     // TODO: handle click on an existing group?
     if (id !== null || (selection && selection.atoms))
-      sgroupDialog(this.editor, id, this.type)
+      SGroupTool.sgroupDialog(this.editor, id, this.type)
   }
 
   cancel() {
@@ -452,75 +452,75 @@ class SGroupTool {
     }
     this.editor.selection(null)
   }
-}
 
-export function sgroupDialog(editor, id, defaultType) {
-  const restruct = editor.render.ctab
-  const struct = restruct.molecule
-  const selection = editor.selection() || {}
-  const sg = id !== null ? struct.sgroups.get(id) : null
-  const type = sg ? sg.type : defaultType
-  const eventName = type === 'DAT' ? 'sdataEdit' : 'sgroupEdit'
-
-  if (!selection.atoms && !selection.bonds && !sg) {
-    console.info('There is no selection or sgroup')
-    return
-  }
+  static sgroupDialog(editor, id, defaultType) {
+    const restruct = editor.render.ctab
+    const struct = restruct.molecule
+    const selection = editor.selection() || {}
+    const sg = id !== null ? struct.sgroups.get(id) : null
+    const type = sg ? sg.type : defaultType
+    const eventName = type === 'DAT' ? 'sdataEdit' : 'sgroupEdit'
 
-  let attrs
-  if (sg) {
-    attrs = sg.getAttrs()
-    if (!attrs.context) attrs.context = getContextBySgroup(restruct, sg.atoms)
-  } else {
-    attrs = {
-      context: getContextBySelection(restruct, selection)
+    if (!selection.atoms && !selection.bonds && !sg) {
+      console.info('There is no selection or sgroup')
+      return
     }
-  }
 
-  const res = editor.event[eventName].dispatch({
-    type,
-    attrs
-  })
+    let attrs
+    if (sg) {
+      attrs = sg.getAttrs()
+      if (!attrs.context) attrs.context = getContextBySgroup(restruct, sg.atoms)
+    } else {
+      attrs = {
+        context: getContextBySelection(restruct, selection)
+      }
+    }
 
-  Promise.resolve(res)
-    .then((newSg) => {
-      // TODO: check before signal
-      if (
-        newSg.type !== 'DAT' && // when data s-group separates
-        checkOverlapping(struct, selection.atoms || [])
-      ) {
-        editor.event.message.dispatch({
-          error: 'Partial S-group overlapping is not allowed.'
-        })
-      } else {
+    const res = editor.event[eventName].dispatch({
+      type,
+      attrs
+    })
+
+    Promise.resolve(res)
+      .then((newSg) => {
+        // TODO: check before signal
         if (
-          !sg &&
-          newSg.type !== 'DAT' &&
-          (!selection.atoms || selection.atoms.length === 0)
-        )
-          return
+          newSg.type !== 'DAT' && // when data s-group separates
+          checkOverlapping(struct, selection.atoms || [])
+        ) {
+          editor.event.message.dispatch({
+            error: 'Partial S-group overlapping is not allowed.'
+          })
+        } else {
+          if (
+            !sg &&
+            newSg.type !== 'DAT' &&
+            (!selection.atoms || selection.atoms.length === 0)
+          )
+            return
 
-        const isDataSg = sg && sg.getAttrs().context === newSg.attrs.context
+          const isDataSg = sg && sg.getAttrs().context === newSg.attrs.context
 
-        if (isDataSg) {
-          const action = fromSeveralSgroupAddition(
-            restruct,
-            newSg.type,
-            sg.atoms,
-            newSg.attrs
-          ).mergeWith(fromSgroupDeletion(restruct, id))
+          if (isDataSg) {
+            const action = fromSeveralSgroupAddition(
+              restruct,
+              newSg.type,
+              sg.atoms,
+              newSg.attrs
+            ).mergeWith(fromSgroupDeletion(restruct, id))
 
-          editor.update(action)
-          editor.selection(selection)
-          return
-        }
+            editor.update(action)
+            editor.selection(selection)
+            return
+          }
 
-        const result = fromContextType(id, editor, newSg, selection)
-        editor.update(result.action)
-        editor.selection(null)
-      }
-    })
-    .catch(() => null)
+          const result = fromContextType(id, editor, newSg, selection)
+          editor.update(result.action)
+          editor.selection(null)
+        }
+      })
+      .catch(() => null)
+  }
 }
 
 function getContextBySgroup(restruct, sgAtoms) {
diff --git a/packages/ketcher-react/src/script/ui/App/App.tsx b/packages/ketcher-react/src/script/ui/App/App.tsx
index cc1b5b1a85..ae43126354 100644
--- a/packages/ketcher-react/src/script/ui/App/App.tsx
+++ b/packages/ketcher-react/src/script/ui/App/App.tsx
@@ -30,7 +30,7 @@ import Editor from '../views/Editor'
 import classes from './App.module.less'
 import { initFGTemplates } from '../state/functionalGroups'
 import { initSaltsAndSolventsTemplates } from '../state/saltsAndSolvents'
-import { useSettingsContext, useSubscriptionOnEvents } from '../../../hooks'
+import { useSubscriptionOnEvents } from '../../../hooks'
 
 interface AppCallProps {
   checkServer: () => void
@@ -51,14 +51,13 @@ type Props = AppCallProps
 const App = (props: Props) => {
   const dispatch = useDispatch()
   const { checkServer } = props
-  const { staticResourcesUrl } = useSettingsContext()
 
   useSubscriptionOnEvents()
 
   useEffect(() => {
     checkServer()
-    dispatch(initFGTemplates(staticResourcesUrl))
-    dispatch(initSaltsAndSolventsTemplates(staticResourcesUrl))
+    dispatch(initFGTemplates())
+    dispatch(initSaltsAndSolventsTemplates())
     window.scrollTo(0, 0)
   }, [])
 
diff --git a/packages/ketcher-react/src/script/ui/action/tools.js b/packages/ketcher-react/src/script/ui/action/tools.js
index 6d16db26f6..1ae087fb04 100644
--- a/packages/ketcher-react/src/script/ui/action/tools.js
+++ b/packages/ketcher-react/src/script/ui/action/tools.js
@@ -23,7 +23,7 @@ import { toBondType } from '../data/convert/structconv'
 const toolActions = {
   hand: {
     title: 'Hand tool',
-    shortcut: 'Mod+h',
+    shortcut: 'Mod+Alt+h',
     action: { tool: 'hand' },
     hidden: (options) => isHidden(options, 'hand')
   },
diff --git a/packages/ketcher-react/src/script/ui/component/form/input.jsx b/packages/ketcher-react/src/script/ui/component/form/input.tsx
similarity index 74%
rename from packages/ketcher-react/src/script/ui/component/form/input.jsx
rename to packages/ketcher-react/src/script/ui/component/form/input.tsx
index 4178a04b70..024ab42c35 100644
--- a/packages/ketcher-react/src/script/ui/component/form/input.jsx
+++ b/packages/ketcher-react/src/script/ui/component/form/input.tsx
@@ -14,23 +14,46 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Component, useRef, useEffect } from 'react'
+import React, { PureComponent, ComponentType, useRef, useEffect } from 'react'
 
-import { omit } from 'lodash/fp'
 import classes from './input.module.less'
 import clsx from 'clsx'
 
+type Props = {
+  component?: ComponentType
+  children?: React.ReactNode
+  className?: string
+  type: string
+  value: number | string | boolean
+  onChange: (val: any) => void
+  placeholder?: string
+  isFocused?: boolean
+  innerRef?: React.Ref<any>
+  schema?: any
+  multiple?: boolean
+}
+
 export function GenericInput({
   schema,
   value = '',
   onChange,
+  innerRef,
   type = 'text',
   isFocused = false,
   ...props
 }) {
-  const inputRef = useRef(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
   useEffect(() => {
-    if (inputRef.current && isFocused) inputRef.current.focus()
+    if (inputRef.current) {
+      innerRef.current = inputRef.current
+    }
+  }, [innerRef])
+
+  useEffect(() => {
+    if (inputRef.current && isFocused) {
+      inputRef.current.focus()
+    }
   }, [inputRef, isFocused])
 
   return (
@@ -72,7 +95,7 @@ function CheckBox({ schema, value = '', onChange, ...rest }) {
     <div className={classes.fieldSetItem}>
       <input
         type="checkbox"
-        checked={value}
+        checked={Boolean(value)}
         onClick={onChange}
         onChange={onChange}
         className={classes.input}
@@ -114,13 +137,15 @@ function Select({
 }
 
 Select.val = function (ev, schema) {
-  const select = ev.target
+  const select = ev.target as HTMLSelectElement
   if (!select.multiple) return enumSchema(schema, select.selectedIndex)
 
-  return [].reduce.call(
-    select.options,
-    (res, o, i) => (!o.selected ? res : [enumSchema(schema, i), ...res]),
-    []
+  const options = select.options
+
+  return Array.from(options).reduce(
+    (res, o: HTMLOptionElement, i) =>
+      !o.selected ? res : [enumSchema(schema, i), ...res],
+    [] as HTMLOptionElement[]
   )
 }
 
@@ -158,19 +183,29 @@ function FieldSet({
 }
 
 FieldSet.val = function (ev, schema) {
-  const input = ev.target
+  const input = ev.target as HTMLInputElement
+
   if (ev.target.tagName !== 'INPUT') {
     ev.stopPropagation()
     return undefined
   }
+
   // Hm.. looks like premature optimization
   //      should we inline this?
-  const fieldset = input.parentNode.parentNode.parentNode
-  const result = [].reduce.call(
-    fieldset.querySelectorAll('input'),
-    (res, inp, i) => (!inp.checked ? res : [enumSchema(schema, i), ...res]),
-    []
-  )
+
+  const fieldset = input?.parentNode?.parentNode?.parentNode
+  const inputCollection = fieldset?.querySelectorAll('input')
+  let result
+
+  if (inputCollection?.length) {
+    result = Array.from(inputCollection).reduce(
+      (res, inp: HTMLInputElement, i) =>
+        !inp.checked ? res : [enumSchema(schema, i), ...res],
+
+      [] as HTMLInputElement[]
+    )
+  }
+
   return input.type === 'radio' ? result[0] : result
 }
 
@@ -261,7 +296,8 @@ function multipleSelectCtrl(component, schema, onChange) {
   }
 }
 
-function ctrlMap(component, { schema, multiple, onChange }) {
+function ctrlMap(component, props: Props) {
+  const { schema, multiple, onChange } = props
   if (
     !schema ||
     (!schema.enum && !schema.items && !Array.isArray(schema)) ||
@@ -275,11 +311,8 @@ function ctrlMap(component, { schema, multiple, onChange }) {
   return singleSelectCtrl(component, schema, onChange)
 }
 
-function componentMap({ schema, type, multiple }) {
-  if (schema?.type === 'boolean' && schema?.description === 'slider') {
-    return Slider
-  }
-
+function componentMap(props: Props) {
+  const { schema, type, multiple } = props
   if (!schema || (!schema.enum && !schema.items && !Array.isArray(schema))) {
     if (type === 'checkbox' || (schema && schema.type === 'boolean')) {
       return CheckBox
@@ -287,35 +320,53 @@ function componentMap({ schema, type, multiple }) {
 
     return type === 'textarea' ? TextArea : GenericInput
   }
+
+  if (schema?.type === 'boolean' && schema?.description === 'slider') {
+    return Slider
+  }
+
   if (multiple || schema.type === 'array')
     return type === 'checkbox' ? FieldSet : Select
 
   return type === 'radio' ? FieldSet : Select
 }
 
-function shallowCompare(a, b) {
-  for (const key in a) {
-    if (!(key in b)) return true
-  }
-  for (const key in b) {
-    if (a[key] !== b[key]) return true
+class Input extends PureComponent<
+  Props & { innerRef: React.Ref<HTMLInputElement> }
+> {
+  component: any
+  ctrl: {
+    type?: string
+    onChange?: (val: any) => void
+    onSelect?: (ev, values) => void
+    selected?: (testVal: any, value: any) => boolean
+    multiple?: boolean
   }
-  return false
-}
 
-export default class Input extends Component {
-  shouldComponentUpdate({ children, onChange, style, ...nextProps }) {
-    const oldProps = omit(this.props, ['children', 'onChange', 'style'])
-    return shallowCompare(oldProps, nextProps)
+  constructor(props: Props & { innerRef: React.Ref<HTMLInputElement> }) {
+    super(props)
+    this.component = props.component || componentMap(props)
+    this.ctrl = ctrlMap(this.component, props)
   }
 
   render() {
-    const { component } = this.props
-    this.component = component || componentMap(this.props)
-    this.ctrl = ctrlMap(this.component, this.props)
-
-    const { children, onChange, ...props } = this.props
+    const { children, onChange, ...restProps } = this.props
     const Component = this.component
-    return <Component {...this.ctrl} {...props} />
+
+    const ComponentWithRef = React.forwardRef((props, ref) => (
+      <Component {...props} innerRef={ref} />
+    ))
+
+    return (
+      <ComponentWithRef
+        ref={this.props.innerRef}
+        {...this.ctrl}
+        {...restProps}
+      />
+    )
   }
 }
+
+export default React.forwardRef((props: Props, ref) => (
+  <Input innerRef={ref} {...props} />
+))
diff --git a/packages/ketcher-react/src/script/ui/component/structrender.tsx b/packages/ketcher-react/src/script/ui/component/structrender.tsx
index ddc47664b9..44844f5640 100644
--- a/packages/ketcher-react/src/script/ui/component/structrender.tsx
+++ b/packages/ketcher-react/src/script/ui/component/structrender.tsx
@@ -15,54 +15,8 @@
  ***************************************************************************/
 
 import { Component, ComponentType, createRef } from 'react'
-import { MolSerializer, Render, Struct } from 'ketcher-core'
-
-/**
- * for S-Groups we want to show expanded structure
- * without brackets
- */
-function prepareStruct(struct: Struct) {
-  if (struct.sgroups.size > 0) {
-    const newStruct = struct.clone()
-    newStruct.sgroups.delete(0)
-    return newStruct
-  }
-  return struct
-}
-
-/**
- * Is used to improve search and opening tab performance in Template Dialog
- * Rendering a lot of structures causes great delay
- */
-const renderCache = new Map()
-
-function renderStruct(
-  el: HTMLElement | null,
-  struct: Struct | null,
-  options: any = {}
-) {
-  if (el && struct) {
-    const { cachePrefix = '' } = options
-    const cacheKey = `${cachePrefix}${struct.name}`
-    if (renderCache.has(cacheKey)) {
-      el.innerHTML = renderCache.get(cacheKey)
-      return
-    }
-    const preparedStruct = prepareStruct(struct)
-    preparedStruct.initHalfBonds()
-    preparedStruct.initNeighbors()
-    preparedStruct.setImplicitHydrogen()
-    preparedStruct.markFragments()
-    const rnd = new Render(el, {
-      autoScale: true,
-      ...options
-    })
-    rnd.setMolecule(preparedStruct)
-    rnd.update(true, options.viewSz)
-    renderCache.set(cacheKey, rnd.clientArea.innerHTML)
-  }
-}
-
+import { MolSerializer, Struct } from 'ketcher-core'
+import { RenderStruct } from '../utils'
 interface StructRenderProps {
   struct: Struct
   options: any
@@ -100,7 +54,7 @@ class StructRender extends Component<StructRenderProps> {
     el?.childNodes.forEach((node) => {
       node.remove()
     })
-    renderStruct(el, parsedStruct, options)
+    RenderStruct.render(el, parsedStruct, options)
   }
 
   componentDidMount() {
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
index e6934530a4..17a53f1881 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
+++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -14,14 +14,15 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Dispatch, FC, useState, useEffect } from 'react'
+import { Dispatch, FC, useState, useEffect, useRef } from 'react'
 import TemplateTable, { Template } from './TemplateTable'
 import {
   changeFilter,
   changeGroup,
   deleteTmpl,
   editTmpl,
-  selectTmpl
+  selectTmpl,
+  changeTab
 } from '../../state/templates'
 import { filterLib, filterFGLib, greekify } from '../../utils'
 import Accordion from '@mui/material/Accordion'
@@ -44,6 +45,7 @@ import EmptySearchResult from '../../../ui/dialog/template/EmptySearchResult'
 
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
+import useSaltsAndSolvents from './useSaltsAndSolvets'
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props
@@ -74,7 +76,7 @@ interface TemplateLibProps {
   lib: Array<Template>
   selected: Template | null
   mode: string
-  initialTab: number
+  tab: number
   saltsAndSolvents: Template[]
 }
 
@@ -86,6 +88,7 @@ interface TemplateLibCallProps {
   onFilter: (filter: string) => void
   onOk: (res: any) => void
   onSelect: (res: any) => void
+  onTabChange: (tab: number) => void
   functionalGroups: Template[]
 }
 
@@ -104,7 +107,6 @@ const filterLibSelector = createSelector(
 )
 
 const FUNCTIONAL_GROUPS = 'Functional Groups'
-const SALTS_AND_SOLVENTS = 'Salts and Solvents'
 
 const HeaderContent = () => (
   <div className={classes.dialogHeader}>
@@ -148,25 +150,26 @@ const TemplateDialog: FC<Props> = (props) => {
   const {
     filter,
     onFilter,
+    onTabChange,
     onChangeGroup,
     mode,
-    initialTab,
+    tab,
     functionalGroups,
     lib: templateLib,
     saltsAndSolvents,
+    onSelect,
     ...rest
   } = props
 
-  const [tab, setTab] = useState(initialTab ?? TemplateTabs.TemplateLibrary)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
   const [expandedAccordions, setExpandedAccordions] = useState<string[]>([
     props.group
   ])
+  const filteredSaltsAndSolvents = useSaltsAndSolvents(saltsAndSolvents, filter)
   const [filteredFG, setFilteredFG] = useState(
     functionalGroups[FUNCTIONAL_GROUPS]
   )
-  const [filteredSaltsAndSolvents, setFilteredSaltsAndSolvents] = useState(
-    saltsAndSolvents[SALTS_AND_SOLVENTS]
-  )
 
   const filteredTemplateLib = filterLibSelector(props)
 
@@ -175,15 +178,9 @@ const TemplateDialog: FC<Props> = (props) => {
   }, [functionalGroups, filter])
 
   useEffect(() => {
-    setFilteredSaltsAndSolvents(
-      filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS]
-    )
-  }, [saltsAndSolvents, filter])
-
-  const handleTabChange = (_, tab) => {
-    setTab(tab)
-    props.onSelect(null)
-  }
+    searchInputRef.current?.focus()
+    onSelect(null)
+  }, [tab, onSelect])
 
   const handleAccordionChange = (accordion) => (_, isExpanded) => {
     setExpandedAccordions(
@@ -219,6 +216,7 @@ const TemplateDialog: FC<Props> = (props) => {
     >
       <div className={classes.inputContainer}>
         <Input
+          ref={searchInputRef}
           className={classes.input}
           type="search"
           value={filter}
@@ -228,7 +226,11 @@ const TemplateDialog: FC<Props> = (props) => {
         />
         <Icon name="search" className={classes.searchIcon} />
       </div>
-      <Tabs value={tab} onChange={handleTabChange} className={classes.tabs}>
+      <Tabs
+        value={tab}
+        onChange={(_, value) => onTabChange(value)}
+        className={classes.tabs}
+      >
         <Tab
           label="Template Library"
           {...a11yProps(TemplateTabs.TemplateLibrary)}
@@ -333,23 +335,31 @@ const TemplateDialog: FC<Props> = (props) => {
 const selectTemplate = (template, props, dispatch) => {
   dispatch(selectTmpl(null))
   if (!template) return
+  dispatch(changeFilter(''))
   dispatch(selectTmpl(template))
   dispatch(onAction({ tool: 'template', opts: template }))
   props.onOk(template)
 }
 
+const onModalClose = (props, dispatch) => {
+  dispatch(changeFilter(''))
+  props.onCancel()
+}
+
 export default connect(
   (store) => ({
     ...omit(['attach'], (store as any).templates),
-    initialTab: (store as any).modal?.prop?.tab,
+    initialTab: (store as any).modal?.prop?.tab || TemplateTabs.TemplateLibrary,
     functionalGroups: functionalGroupsSelector(store),
     saltsAndSolvents: saltsAndSolventsSelector(store)
   }),
   (dispatch: Dispatch<any>, props: Props) => ({
     onFilter: (filter) => dispatch(changeFilter(filter)),
+    onTabChange: (tab) => dispatch(changeTab(tab)),
     onSelect: (tmpl) => selectTemplate(tmpl, props, dispatch),
     onChangeGroup: (group) => dispatch(changeGroup(group)),
     onAttach: (tmpl) => dispatch(editTmpl(tmpl)),
+    onCancel: () => onModalClose(props, dispatch),
     onDelete: (tmpl) => dispatch(deleteTmpl(tmpl))
   })
 )(TemplateDialog)
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/template-lib.module.less b/packages/ketcher-react/src/script/ui/dialog/template/template-lib.module.less
index d9a3c10f06..b54facdc2c 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/template-lib.module.less
+++ b/packages/ketcher-react/src/script/ui/dialog/template/template-lib.module.less
@@ -57,12 +57,17 @@
   }
 
   & > footer {
+    min-height: 24px;
     box-shadow: 0 -6px 6px 0 @color-accordion-shadow;
     z-index: 10;
 
     & > input {
       min-width: 110px !important;
     }
+
+    & > span {
+      line-height: 24px;
+    }
   }
 
   .inputContainer {
@@ -81,7 +86,7 @@
       }
     }
 
-    .searchIcon { 
+    .searchIcon {
       width: 28px;
       height: 28px;
       position: absolute;
@@ -95,7 +100,7 @@
     flex-direction: row-reverse;
     font-size: 14px;
   }
-  
+
   .groupIcon {
     margin-left: 15px;
     margin-right: 8px;
@@ -104,13 +109,13 @@
   .expandIcon {
     width: 20px;
   }
-  
+
   .tabsContent {
     height: 50vh;
     background-color: @color-primary-light;
     overflow-y: auto;
     overflow-x: hidden;
-    
+
     .scrollbar();
   }
 
@@ -147,7 +152,7 @@
   :global(.MuiPaper-root.MuiAccordion-root) {
     box-shadow: none;
   }
-  
+
   :global(.MuiPaper-root.MuiAccordion-root::before),
   :global(.MuiPaper-root.MuiAccordion-root.Mui-expanded::before) {
     opacity: 0;
@@ -155,16 +160,16 @@
 
   :global(.MuiPaper-root) {
     &:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 1px;
-    width: 424px;
-    margin: 0 auto;
-    background-color: @color-grey-5;
-    opacity: 1;
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: 1px;
+      width: 424px;
+      margin: 0 auto;
+      background-color: @color-grey-5;
+      opacity: 1;
     }
   }
 
@@ -182,7 +187,7 @@
 
   .tabs {
     box-shadow: 0 6px 6px 0 @color-accordion-shadow;
-    z-index: 10;  
+    z-index: 10;
   }
 
   :global(.MuiButtonBase-root.MuiTab-root) {
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/useSaltsAndSolvets.ts b/packages/ketcher-react/src/script/ui/dialog/template/useSaltsAndSolvets.ts
new file mode 100644
index 0000000000..6f02bab217
--- /dev/null
+++ b/packages/ketcher-react/src/script/ui/dialog/template/useSaltsAndSolvets.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { filterFGLib } from '../../utils'
+import { Template } from './TemplateTable'
+
+const SALTS_AND_SOLVENTS = 'Salts and Solvents'
+const batchDelay = 300
+
+export default function useSaltsAndSolvents(
+  saltsAndSolvents: Template[],
+  filter: string
+) {
+  const [isFirstRender, setIsFirstRender] = useState(true)
+  const timerId = useRef<null | ReturnType<typeof setTimeout>>(null)
+  const [filteredSaltsAndSolvents, setFilteredSaltsAndSolvents] = useState(
+    saltsAndSolvents[SALTS_AND_SOLVENTS]
+  )
+
+  const addToSaSWithBatches = useCallback((fullFilteredArray) => {
+    const batchSize = 16
+    setFilteredSaltsAndSolvents((filteredSaltsAndSolvents) => [
+      ...(filteredSaltsAndSolvents ?? []),
+      ...fullFilteredArray.splice(0, batchSize)
+    ])
+    if (fullFilteredArray.length > 0) {
+      timerId.current = setTimeout(
+        () => addToSaSWithBatches(fullFilteredArray),
+        batchDelay
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    const filteredSaS =
+      filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS] ?? []
+    addToSaSWithBatches(filteredSaS)
+  }, [saltsAndSolvents, addToSaSWithBatches])
+
+  useEffect(() => {
+    if (isFirstRender) {
+      setIsFirstRender(false)
+      return
+    }
+    clearTimeout(timerId.current as unknown as number)
+    const filteredSaS = filterFGLib(saltsAndSolvents, filter)[
+      SALTS_AND_SOLVENTS
+    ]
+    setFilteredSaltsAndSolvents(filteredSaS)
+  }, [saltsAndSolvents, filter])
+
+  return filteredSaltsAndSolvents
+}
diff --git a/packages/ketcher-react/src/script/ui/state/functionalGroups/index.ts b/packages/ketcher-react/src/script/ui/state/functionalGroups/index.ts
index a11d92e1ee..9cb2a017ac 100644
--- a/packages/ketcher-react/src/script/ui/state/functionalGroups/index.ts
+++ b/packages/ketcher-react/src/script/ui/state/functionalGroups/index.ts
@@ -22,7 +22,7 @@ import {
   SdfSerializer,
   Struct
 } from 'ketcher-core'
-import { prefetchStatic } from '../templates/init-lib'
+import templatesRawData from '../../../../templates/fg.sdf'
 
 interface FGState {
   lib: []
@@ -62,14 +62,11 @@ export function highlightFG(dispatch, group: any) {
   dispatch(highlightFGroup(group))
 }
 
-export function initFGTemplates(baseUrl: string) {
+export function initFGTemplates() {
   return async (dispatch) => {
-    const fileName = 'fg.sdf'
-    const url = `${baseUrl}/templates/${fileName}`
     const provider = FunctionalGroupsProvider.getInstance()
     const sdfSerializer = new SdfSerializer()
-    const text = await prefetchStatic(url)
-    const templates = sdfSerializer.deserialize(text)
+    const templates = sdfSerializer.deserialize(templatesRawData)
     const functionalGroups = templates.reduce(
       (acc: Struct[], { struct }) => [...acc, struct],
       []
diff --git a/packages/ketcher-react/src/script/ui/state/handleHotkeysOverAtom.ts b/packages/ketcher-react/src/script/ui/state/handleHotkeysOverAtom.ts
new file mode 100644
index 0000000000..89be1857f9
--- /dev/null
+++ b/packages/ketcher-react/src/script/ui/state/handleHotkeysOverAtom.ts
@@ -0,0 +1,214 @@
+import {
+  fromAtomAddition,
+  fromAtomsAttrs,
+  fromBondAddition,
+  fromOneAtomDeletion,
+  FunctionalGroup,
+  SGroup,
+  Atom
+} from 'ketcher-core'
+import Tools from '../../editor/tool'
+import { onAction } from './shared'
+
+type hotkeyOverAtomHandler = {
+  hoveredItemId: number
+  newAction: {
+    tool: string
+    opts?: any
+  }
+  render: any
+  editor: any
+}
+
+export async function handleHotkeyOverAtom({
+  hoveredItemId,
+  newAction,
+  render,
+  editor,
+  dispatch
+}) {
+  const toolsMapping = {
+    atom: () => handleAtomTool({ hoveredItemId, newAction, render, editor }),
+    bond: () => handleBondTool({ hoveredItemId, newAction, render, editor }),
+    eraser: () =>
+      handleEraserTool({ hoveredItemId, newAction, render, editor }),
+    select: () =>
+      handleSelectionTool({ hoveredItemId, newAction, render, editor }),
+    charge: () =>
+      handleChargeTool({ hoveredItemId, newAction, render, editor }),
+    rgroupatom: () =>
+      handleRGroupAtomTool({ hoveredItemId, newAction, render, editor }),
+    sgroup: () => {
+      Tools.sgroup.sgroupDialog(editor, hoveredItemId, null)
+    },
+    hand: () =>
+      dispatch(
+        onAction({
+          tool: 'hand'
+        })
+      )
+  }
+  const toolHandler = toolsMapping[newAction.tool]
+  const isChangeStructureTool =
+    newAction.tool !== 'hand' || newAction.tool !== 'select'
+  if (toolHandler) {
+    const isFunctionalGroupChange = await isChangingFunctionalGroup({
+      hoveredItemId,
+      render,
+      editor,
+      newAction
+    })
+    if (!isFunctionalGroupChange && isChangeStructureTool) {
+      return
+    }
+    toolHandler()
+  }
+}
+
+function handleAtomTool({
+  hoveredItemId,
+  newAction,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  const atomProps = { ...newAction.opts }
+  const updatedAtoms = fromAtomsAttrs(
+    render.ctab,
+    hoveredItemId,
+    atomProps,
+    true
+  )
+  editor.update(updatedAtoms)
+}
+
+function handleBondTool({
+  hoveredItemId,
+  newAction,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  const newBond = fromBondAddition(
+    render.ctab,
+    newAction.opts,
+    hoveredItemId,
+    undefined
+  )[0]
+  editor.update(newBond)
+}
+
+function handleEraserTool({
+  hoveredItemId,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  editor.update(fromOneAtomDeletion(render.ctab, hoveredItemId))
+}
+
+function handleSelectionTool({ hoveredItemId, editor }: hotkeyOverAtomHandler) {
+  editor.selection({
+    atoms: [hoveredItemId]
+  })
+}
+
+function handleChargeTool({
+  hoveredItemId,
+  newAction,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  const existingAtom = render.ctab.atoms.get(hoveredItemId)?.a
+  if (existingAtom) {
+    const updatedAtom = fromAtomsAttrs(
+      render.ctab,
+      hoveredItemId,
+      {
+        charge: existingAtom.charge + newAction.opts
+      },
+      null
+    )
+    editor.update(updatedAtom)
+  }
+}
+
+async function handleRGroupAtomTool({
+  hoveredItemId,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  const struct = render.ctab.molecule
+  const atom =
+    hoveredItemId || hoveredItemId === 0
+      ? struct.atoms.get(hoveredItemId)
+      : null
+  const rglabel = atom ? atom.rglabel : 0
+  const label = atom ? atom.label : 'R#'
+
+  try {
+    let element = await editor.event.elementEdit.dispatch({
+      label: 'R#',
+      rglabel,
+      fragId: atom ? atom.fragment : null
+    })
+    element = Object.assign({}, Atom.attrlist, element)
+
+    if (!hoveredItemId && hoveredItemId !== 0 && element.rglabel) {
+      editor.update(fromAtomAddition(editor.render.ctab, null, element))
+    } else if (rglabel !== element.rglabel) {
+      if (!element.rglabel && label !== 'R#') {
+        element.label = label
+      }
+
+      editor.update(
+        fromAtomsAttrs(editor.render.ctab, hoveredItemId, element, false)
+      )
+    }
+  } catch (error) {} // w/o changes
+}
+
+async function isChangingFunctionalGroup({
+  hoveredItemId,
+  render,
+  editor
+}: hotkeyOverAtomHandler) {
+  const atomResult: number[] = []
+  const result: number[] = []
+  const atom = render.ctab.atoms.get(hoveredItemId)?.a
+  const molecule = render.ctab.molecule
+  const functionalGroups = molecule.functionalGroups
+  const sgroupsOnCanvas = Array.from(molecule.sgroups.values())
+  if (atom && functionalGroups) {
+    const atomId = FunctionalGroup.atomsInFunctionalGroup(
+      functionalGroups,
+      hoveredItemId
+    )
+
+    if (atomId !== null) {
+      atomResult.push(atomId)
+    }
+  }
+
+  const isFunctionalGroup = atomResult.length > 0
+
+  if (isFunctionalGroup) {
+    if (
+      SGroup.isAtomInSaltOrSolvent(
+        hoveredItemId as number,
+        sgroupsOnCanvas as SGroup[]
+      )
+    ) {
+      return false
+    }
+    for (const id of atomResult) {
+      const fgId = FunctionalGroup.findFunctionalGroupByAtom(
+        functionalGroups,
+        id
+      )
+
+      if (fgId !== null && !result.includes(fgId)) {
+        result.push(fgId)
+      }
+    }
+    return await editor.event.removeFG.dispatch({ fgIds: result })
+  }
+  return true
+}
diff --git a/packages/ketcher-react/src/script/ui/state/hotkeys.ts b/packages/ketcher-react/src/script/ui/state/hotkeys.ts
index 455b8ad551..1be9da6c13 100644
--- a/packages/ketcher-react/src/script/ui/state/hotkeys.ts
+++ b/packages/ketcher-react/src/script/ui/state/hotkeys.ts
@@ -21,7 +21,6 @@ import {
   MolSerializer,
   formatProperties,
   ChemicalMimeType,
-  fromAtomsAttrs,
   ReAtom
 } from 'ketcher-core'
 import { debounce, isEqual } from 'lodash/fp'
@@ -31,6 +30,7 @@ import actions from '../action'
 import keyNorm from '../data/convert/keynorm'
 import { openDialog } from './modal'
 import { isIE } from 'react-device-detect'
+import { handleHotkeyOverAtom } from './handleHotkeysOverAtom'
 
 export function initKeydownListener(element) {
   return function (dispatch, getState) {
@@ -74,20 +74,19 @@ function keyHandle(dispatch, state, hotKeys, event) {
     }
     if (clipArea.actions.indexOf(actName) === -1) {
       const newAction = actions[actName].action
-      const hoverItemId = getHoveredAtomId(render.ctab.atoms)
-      const isHoveringOverAtom = hoverItemId !== null
+      const hoveredItemId = getHoveredAtomId(render.ctab.atoms)
+      const isHoveringOverAtom = hoveredItemId !== null
       if (isHoveringOverAtom) {
         // check if atom is currently hovered over
         // in this case we do not want to activate the corresponding tool
         // and just insert the atom directly
-        const atomProps = { ...newAction.opts }
-        const updatedAtoms = fromAtomsAttrs(
-          render.ctab,
-          hoverItemId,
-          atomProps,
-          true
-        )
-        editor.update(updatedAtoms)
+        handleHotkeyOverAtom({
+          hoveredItemId,
+          newAction,
+          render,
+          editor,
+          dispatch
+        })
       } else {
         dispatch(onAction(newAction))
       }
diff --git a/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts b/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts
index c7cc5e54fb..25e02fc336 100644
--- a/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts
+++ b/packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts
@@ -23,7 +23,8 @@ import {
   SdfSerializer,
   Struct
 } from 'ketcher-core'
-import { prefetchStatic } from '../templates/init-lib'
+import { RenderStruct } from '../../utils'
+import templatesRawData from '../../../../templates/salts-and-solvents.sdf'
 
 interface SaltsAndSolventsState {
   lib: []
@@ -53,15 +54,27 @@ const initSaltsAndSolvents = (lib: SdfItem[]) => ({
   payload: { lib }
 })
 
-export function initSaltsAndSolventsTemplates(baseUrl: string) {
-  return async (dispatch) => {
-    const fileName = 'salts-and-solvents.sdf'
-    const url = `${baseUrl}/templates/${fileName}`
+// This prerender adds part of structures to cache to speed up loading of Salts and Solvents tab
+const prerenderPartOfStructures = (saltsAndSolvents: Struct[], settings) => {
+  const part = saltsAndSolvents.slice(0, 50)
+  part.forEach((struct) => {
+    const div = document.createElement('div')
+    div.style.width = '100px'
+    div.style.height = '100px'
+    div.style.display = 'none'
+    document.body.appendChild(div)
+    RenderStruct.render(div, struct, { ...settings, autoScaleMargin: 15 })
+    div.remove()
+  })
+}
+
+export function initSaltsAndSolventsTemplates() {
+  return async (dispatch, getState) => {
+    const { settings } = getState().options
     const saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance()
     const functionalGroupsProvider = FunctionalGroupsProvider.getInstance()
     const sdfSerializer = new SdfSerializer()
-    const text = await prefetchStatic(url)
-    const templates = sdfSerializer.deserialize(text)
+    const templates = sdfSerializer.deserialize(templatesRawData)
     const saltsAndSolvents = templates.reduce(
       (acc: Struct[], { struct, props }) => {
         struct.abbreviation = String(props.abbreviation)
@@ -70,6 +83,7 @@ export function initSaltsAndSolventsTemplates(baseUrl: string) {
       },
       []
     )
+    prerenderPartOfStructures(saltsAndSolvents, settings)
     saltsAndSolventsProvider.setSaltsAndSolventsList(saltsAndSolvents)
     functionalGroupsProvider.addToFunctionalGroupsList(saltsAndSolvents)
     dispatch(initSaltsAndSolvents(templates))
diff --git a/packages/ketcher-react/src/script/ui/state/templates/index.js b/packages/ketcher-react/src/script/ui/state/templates/index.js
index c39ac9a633..a92369586d 100644
--- a/packages/ketcher-react/src/script/ui/state/templates/index.js
+++ b/packages/ketcher-react/src/script/ui/state/templates/index.js
@@ -45,6 +45,13 @@ export function changeFilter(filter) {
   }
 }
 
+export function changeTab(tab) {
+  return {
+    type: 'TMPL_CHANGE_TAB',
+    data: { tab }
+  }
+}
+
 /* TEMPLATE-ATTACH-EDIT */
 export function initAttach(name, attach) {
   return {
@@ -148,14 +155,16 @@ export const initTmplsState = {
   filter: '',
   group: null,
   attach: {},
-  mode: 'classic'
+  mode: 'classic',
+  tab: 0
 }
 
 const tmplActions = [
   'TMPL_INIT',
   'TMPL_SELECT',
   'TMPL_CHANGE_GROUP',
-  'TMPL_CHANGE_FILTER'
+  'TMPL_CHANGE_FILTER',
+  'TMPL_CHANGE_TAB'
 ]
 
 const attachActions = ['INIT_ATTACH', 'SET_ATTACH_POINTS', 'SET_TMPL_NAME']
diff --git a/packages/ketcher-react/src/script/ui/state/templates/init-lib.js b/packages/ketcher-react/src/script/ui/state/templates/init-lib.js
index 1bc423ece7..b27c4bbe67 100644
--- a/packages/ketcher-react/src/script/ui/state/templates/init-lib.js
+++ b/packages/ketcher-react/src/script/ui/state/templates/init-lib.js
@@ -18,6 +18,7 @@ import { KetSerializer, SdfSerializer } from 'ketcher-core'
 
 import { appUpdate } from '../options'
 import { storage } from '../../storage-ext'
+import templatesRawData from '../../../../templates/library.sdf'
 
 export function initLib(lib) {
   return {
@@ -37,21 +38,19 @@ export default function initTmplLib(dispatch, baseUrl, cacheEl) {
 
 const deserializeSdfTemplates = (baseUrl, cacheEl, fileName) => {
   const sdfSerializer = new SdfSerializer()
-  return prefetchStatic(`${baseUrl}/templates/${fileName}`).then((text) => {
-    const tmpls = sdfSerializer.deserialize(text)
-    const prefetch = prefetchRender(tmpls, baseUrl + '/templates/', cacheEl)
-
-    return prefetch.then((cachedFiles) =>
-      tmpls.map((tmpl) => {
-        const pr = prefetchSplit(tmpl)
-        if (pr.file)
-          tmpl.props.prerender =
-            cachedFiles.indexOf(pr.file) !== -1 ? `#${pr.id}` : ''
-
-        return tmpl
-      })
-    )
-  })
+  const tmpls = sdfSerializer.deserialize(templatesRawData)
+  const prefetch = prefetchRender(tmpls, baseUrl + '/templates/', cacheEl)
+
+  return prefetch.then((cachedFiles) =>
+    tmpls.map((tmpl) => {
+      const pr = prefetchSplit(tmpl)
+      if (pr.file)
+        tmpl.props.prerender =
+          cachedFiles.indexOf(pr.file) !== -1 ? `#${pr.id}` : ''
+
+      return tmpl
+    })
+  )
 }
 
 function userTmpls() {
diff --git a/packages/ketcher-react/src/script/ui/utils/index.ts b/packages/ketcher-react/src/script/ui/utils/index.ts
index 3e47065a3c..b4cd96a259 100644
--- a/packages/ketcher-react/src/script/ui/utils/index.ts
+++ b/packages/ketcher-react/src/script/ui/utils/index.ts
@@ -75,8 +75,6 @@ export function filterFGLib(lib, filter) {
   )(lib)
 }
 
-export { fileOpener } from './fileOpener'
-
 export const getSelectOptionsFromSchema = (schema): Array<Option> => {
   return schema.enum.reduce((options, value, index) => {
     options.push({
@@ -87,3 +85,6 @@ export const getSelectOptionsFromSchema = (schema): Array<Option> => {
     return options
   }, [])
 }
+
+export { RenderStruct } from './renderStruct'
+export { fileOpener } from './fileOpener'
diff --git a/packages/ketcher-react/src/script/ui/utils/renderStruct.ts b/packages/ketcher-react/src/script/ui/utils/renderStruct.ts
new file mode 100644
index 0000000000..b1ca264713
--- /dev/null
+++ b/packages/ketcher-react/src/script/ui/utils/renderStruct.ts
@@ -0,0 +1,49 @@
+import { Render, Struct } from 'ketcher-core'
+
+/**
+ * Is used to improve search and opening tab performance in Template Dialog
+ * Rendering a lot of structures causes great delay
+ */
+const renderCache = new Map()
+
+export class RenderStruct {
+  /**
+   * for S-Groups we want to show expanded structure
+   * without brackets
+   */
+  static prepareStruct(struct: Struct) {
+    if (struct.sgroups.size > 0) {
+      const newStruct = struct.clone()
+      newStruct.sgroups.delete(0)
+      return newStruct
+    }
+    return struct
+  }
+
+  static render(
+    el: HTMLElement | null,
+    struct: Struct | null,
+    options: any = {}
+  ) {
+    if (el && struct) {
+      const { cachePrefix = '' } = options
+      const cacheKey = `${cachePrefix}${struct.name}`
+      if (renderCache.has(cacheKey)) {
+        el.innerHTML = renderCache.get(cacheKey)
+        return
+      }
+      const preparedStruct = this.prepareStruct(struct)
+      preparedStruct.initHalfBonds()
+      preparedStruct.initNeighbors()
+      preparedStruct.setImplicitHydrogen()
+      preparedStruct.markFragments()
+      const rnd = new Render(el, {
+        autoScale: true,
+        ...options
+      })
+      rnd.setMolecule(preparedStruct)
+      rnd.update(true, options.viewSz)
+      renderCache.set(cacheKey, rnd.clientArea.innerHTML)
+    }
+  }
+}
diff --git a/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx b/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx
index e3d9ab8844..e2c26e29ea 100644
--- a/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx
+++ b/packages/ketcher-react/src/script/ui/views/components/StructEditor/InfoPanel.tsx
@@ -102,11 +102,20 @@ const InfoPanel: FC<InfoPanelProps> = (props) => {
     sGroup
   } = props
   const [molecule, setMolecule] = useState<Struct | null>(null)
+  const [sGroupData, setSGroupData] = useState<string | null>(null)
   const childRef = useRef(null)
   const groupName = sGroup?.data?.name
-  let timer: ReturnType<typeof setTimeout>
 
   useEffect(() => {
+    if (!groupStruct && sGroup?.type === 'DAT') {
+      setSGroupData(`${sGroup.data?.fieldName}=${sGroup.data?.fieldValue}`)
+    } else {
+      setSGroupData(null)
+    }
+  }, [groupStruct, sGroup])
+
+  useEffect(() => {
+    let timer
     if (groupStruct) {
       timer = setTimeout(() => {
         setMolecule(groupStruct.clone())
@@ -115,42 +124,54 @@ const InfoPanel: FC<InfoPanelProps> = (props) => {
       setMolecule(null)
     }
     return () => clearTimeout(timer)
-  }, [groupName])
+  }, [groupName, groupStruct])
 
   const [position, size] = getPanelPosition(clientX, clientY, render, sGroup)
   const { x, y } = position
   const width = size.x
   const height = size.y
 
-  return (
-    molecule && (
-      <div
-        style={{
-          left: x + 'px',
-          top: y + 'px'
+  if (!molecule && !sGroupData) {
+    return null
+  }
+
+  return molecule ? (
+    <div
+      style={{
+        left: x + 'px',
+        top: y + 'px'
+      }}
+      className={clsx(classes.infoPanel, className)}
+    >
+      <StructRender
+        struct={molecule}
+        id={groupName}
+        ref={childRef}
+        options={{
+          ...render.options,
+          autoScale: true,
+          autoScaleMargin: 0,
+          rescaleAmount: 1,
+          cachePrefix: 'infoPanel',
+          viewSz: new Vec2(width, height),
+          width: width,
+          height: height
         }}
-        className={clsx(classes.infoPanel, className)}
-      >
-        <StructRender
-          struct={molecule}
-          {...props}
-          id={groupName}
-          ref={childRef}
-          options={{
-            ...render.options,
-            autoScale: true,
-            autoScaleMargin: 0,
-            rescaleAmount: 1,
-            cachePrefix: 'infoPanel',
-            viewSz: new Vec2(width, height),
-            width: width,
-            height: height
-          }}
-        />
-      </div>
-    )
+      />
+    </div>
+  ) : (
+    <div
+      style={{
+        left: x + 'px',
+        top: y + 'px'
+      }}
+      className={clsx(classes.infoPanel, className)}
+    >
+      {sGroupData}
+    </div>
   )
 }
+
 export default connect((store: any) => ({
   clientX: functionGroupInfoSelector(store)?.event?.clientX || 0,
   clientY: functionGroupInfoSelector(store)?.event?.clientY || 0,
diff --git a/packages/ketcher-react/src/script/ui/views/components/StructEditor/StructEditor.jsx b/packages/ketcher-react/src/script/ui/views/components/StructEditor/StructEditor.jsx
index b06a5470d2..06f79aa665 100644
--- a/packages/ketcher-react/src/script/ui/views/components/StructEditor/StructEditor.jsx
+++ b/packages/ketcher-react/src/script/ui/views/components/StructEditor/StructEditor.jsx
@@ -204,6 +204,8 @@ class StructEditor extends Component {
       ...props
     } = this.props
 
+    const { clientX = 0, clientY = 0 } = this.state
+
     return (
       <Tag
         className={clsx(classes.canvas, className)}
@@ -238,7 +240,13 @@ class StructEditor extends Component {
             )}
           </ContextMenuTrigger>
         </FunctionalGroupTrigger>
-        <InfoPanel {...this.state} {...this.props} />
+        <InfoPanel
+          clientX={clientX}
+          clientY={clientY}
+          render={this.props.render}
+          groupStruct={this.props.groupStruct}
+          sGroup={this.props.sGroup}
+        />
         <FGContextMenu />
         <ContextMenu />
       </Tag>
diff --git a/example/public/templates/fg.sdf b/packages/ketcher-react/src/templates/fg.sdf
similarity index 99%
rename from example/public/templates/fg.sdf
rename to packages/ketcher-react/src/templates/fg.sdf
index 3a9d0321a2..6e60e6b1d9 100644
--- a/example/public/templates/fg.sdf
+++ b/packages/ketcher-react/src/templates/fg.sdf
@@ -76,7 +76,7 @@ G    1  0
 M  STY  1   1 SUP
 M  SLB  1   1   1
 M  SAL   1  7   1   2   3   4   5   6   7
-M  SMT   1 Bn
+M  SMT   1 Boc
 M  END
 
 >  <group>
@@ -1835,4 +1835,4 @@ Functional Groups
 >  <atomid>
 0
 
-$$$$
\ No newline at end of file
+$$$$
diff --git a/example/public/templates/library.sdf b/packages/ketcher-react/src/templates/library.sdf
similarity index 100%
rename from example/public/templates/library.sdf
rename to packages/ketcher-react/src/templates/library.sdf
diff --git a/example/public/templates/salts-and-solvents.sdf b/packages/ketcher-react/src/templates/salts-and-solvents.sdf
similarity index 100%
rename from example/public/templates/salts-and-solvents.sdf
rename to packages/ketcher-react/src/templates/salts-and-solvents.sdf
diff --git a/packages/ketcher-react/src/typings.d.ts b/packages/ketcher-react/src/typings.d.ts
index b60e435c9e..f54963aca3 100644
--- a/packages/ketcher-react/src/typings.d.ts
+++ b/packages/ketcher-react/src/typings.d.ts
@@ -5,6 +5,11 @@ declare module '*.less' {
   export default classes
 }
 
+declare module '*.sdf' {
+  const content: string
+  export default content
+}
+
 declare namespace NodeJS {
   export interface ProcessEnv {
     VERSION: string
diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts
index faa572c69d..f47de1f564 100644
--- a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts
+++ b/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts
@@ -116,6 +116,7 @@ function convertMimeTypeToOutputFormat(
       format = SupportedFormat.CDX
       break
     }
+    case ChemicalMimeType.UNKNOWN:
     default: {
       throw new Error('Unsupported chemical mime type')
     }
diff --git a/yarn.lock b/yarn.lock
index 3bce982124..23ab4c90b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11422,6 +11422,7 @@ __metadata:
     rollup-plugin-delete: ^2.0.0
     rollup-plugin-peer-deps-external: ^2.2.4
     rollup-plugin-postcss: ^4.0.2
+    rollup-plugin-string: ^3.0.0
     rollup-plugin-typescript2: ^0.31.1
     rollup-plugin-visualizer: ^5.5.2
     stylelint: 13.13.1
@@ -15742,6 +15743,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-string@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "rollup-plugin-string@npm:3.0.0"
+  dependencies:
+    rollup-pluginutils: ^2.4.1
+  checksum: f46b4088f2534b94ea638aedae819cd8bc67803a88a2ed8e10598bc463f7765278c21dc51b00013b8f9c9ff8478a4747b51e802d633c2be31de14fbb5bd36d07
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-terser@npm:^7.0.0":
   version: 7.0.2
   resolution: "rollup-plugin-terser@npm:7.0.2"
@@ -15798,7 +15808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2":
+"rollup-pluginutils@npm:^2.4.1, rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2":
   version: 2.8.2
   resolution: "rollup-pluginutils@npm:2.8.2"
   dependencies: