diff --git a/packages/ketcher-react/src/Editor.module.less b/packages/ketcher-react/src/Editor.module.less
index c636b88c57..8831c744b3 100644
--- a/packages/ketcher-react/src/Editor.module.less
+++ b/packages/ketcher-react/src/Editor.module.less
@@ -58,14 +58,13 @@
     line-height: 20 / 14;
     height: 2.4em;
     padding: 0.35em 0.15em 0.35em 0.3em;
-    margin: 2px;
     border: none;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-sizing: border-box;
 
     &:active,
     &:focus {
-      outline: 0;
+      outline: 1px solid @active-color;
     }
 
     &:hover,
diff --git a/packages/ketcher-react/src/icons/files/not-found.svg b/packages/ketcher-react/src/icons/files/not-found.svg
new file mode 100644
index 0000000000..154059feb0
--- /dev/null
+++ b/packages/ketcher-react/src/icons/files/not-found.svg
@@ -0,0 +1,5 @@
+<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.4937 4.80184e-07C39.7658 -0.00106928 45.9084 1.78529 51.2017 5.1498C56.495 8.51431 60.7199 13.3176 63.3814 18.997C66.0429 24.6764 67.0308 30.9967 66.2294 37.2174C65.4279 43.438 62.8703 49.3015 58.8561 54.1208L83.6185 78.8772C84.15 79.4063 84.4641 80.1154 84.4987 80.8646C84.5334 81.6138 84.2862 82.3488 83.8059 82.9248C83.3255 83.5007 82.6468 83.8759 81.9036 83.9763C81.1603 84.0767 80.4064 83.8951 79.7905 83.4673L79.3705 83.1253L54.6141 58.3629C50.5412 61.7535 45.7117 64.1133 40.534 65.2428C35.3563 66.3723 29.9827 66.2382 24.8678 64.8519C19.7529 63.4656 15.047 60.8678 11.1483 57.2783C7.24961 53.6889 4.2727 49.2132 2.46938 44.23C0.66606 39.2468 0.0893783 33.9026 0.788108 28.6494C1.48684 23.3962 3.44043 18.3886 6.48364 14.05C9.52685 9.71143 13.5702 6.16957 18.2716 3.724C22.973 1.27843 28.1943 0.001086 33.4937 4.80184e-07V4.80184e-07ZM33.4937 6.00009C26.3328 6.00009 19.4651 8.84477 14.4016 13.9083C9.33802 18.9719 6.49334 25.8395 6.49334 33.0005C6.49334 40.1615 9.33802 47.0291 14.4016 52.0927C19.4651 57.1562 26.3328 60.0009 33.4937 60.0009C40.6547 60.0009 47.5224 57.1562 52.5859 52.0927C57.6495 47.0291 60.4942 40.1615 60.4942 33.0005C60.4942 25.8395 57.6495 18.9719 52.5859 13.9083C47.5224 8.84477 40.6547 6.00009 33.4937 6.00009Z" fill="#D1D5E3"/>
+<line x1="22.2426" y1="22.5577" x2="44.3551" y2="44.6702" stroke="#5B6077" stroke-width="6" stroke-linecap="round"/>
+<line x1="45.1914" y1="22.2426" x2="23.079" y2="44.3551" stroke="#5B6077" stroke-width="6" stroke-linecap="round"/>
+</svg>
diff --git a/packages/ketcher-react/src/icons/index.tsx b/packages/ketcher-react/src/icons/index.tsx
index 94c11e6c91..1860c80783 100644
--- a/packages/ketcher-react/src/icons/index.tsx
+++ b/packages/ketcher-react/src/icons/index.tsx
@@ -53,6 +53,7 @@ import LayoutIcon from './files/layout.svg'
 import LogoIcon from './files/logo.svg'
 import MiewIcon from './files/miew.svg'
 import ClearIcon from './files/clear.svg'
+import NotFoundIcon from './files/not-found.svg'
 import OpenIcon from './files/open.svg'
 import PasteIcon from './files/paste.svg'
 import PeriodTableIcon from './files/period-table.svg'
@@ -217,7 +218,8 @@ const icons = {
   'shape-rectangle': ShapeRectangleIcon,
   'shape-polyline': ShapePolylineIcon,
   'shape-line': ShapeLineIcon,
-  symbols: Symbols
+  symbols: Symbols,
+  'not-found': NotFoundIcon
 }
 
 function emptyIcon() {
diff --git a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx b/packages/ketcher-react/src/script/ui/component/form/form/form.jsx
index ba6cbca240..d28c91d11d 100644
--- a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx
+++ b/packages/ketcher-react/src/script/ui/component/form/form/form.jsx
@@ -101,7 +101,7 @@ function Label({ labelPos, title, children, ...props }) {
 }
 
 function Field(props) {
-  const { name, onChange, component, labelPos, ...rest } = props
+  const { name, onChange, component, labelPos, className, ...rest } = props
   const { schema, stateStore } = useFormContext()
   const desc = rest.schema || schema.properties[name]
   const { dataError, ...fieldOpts } = stateStore.field(name, onChange)
@@ -115,7 +115,7 @@ function Field(props) {
   if (labelPos === false) return formField
   return (
     <Label
-      className={clsx({ [classes.dataError]: dataError })}
+      className={clsx({ [classes.dataError]: dataError }, className)}
       error={dataError}
       title={rest.title || desc.title}
       labelPos={labelPos}
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx b/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx
index 28dcdc1e86..56dbb06263 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx
+++ b/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx
@@ -15,9 +15,15 @@
  ***************************************************************************/
 
 import classes from './emptySearchResult.module.less'
+import Icon from '../../component/view/icon'
 
 const EmptySearchResult = ({ textInfo }) => {
-  return <div className={classes.emptySearch}>{textInfo}</div>
+  return (
+    <div className={classes.emptySearch}>
+      <p>{textInfo}</p>
+      <Icon name="not-found" />
+    </div>
+  )
 }
 
 export default EmptySearchResult
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less
index f90314636e..d5fca2d6a3 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less
+++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less
@@ -21,6 +21,7 @@
   display: flex;
   flex-wrap: wrap;
   width: 555px;
+  min-width: 100px;
   padding: 0;
   overflow: hidden;
 }
@@ -30,12 +31,13 @@
   }
 
   height: 312px;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-gap: 24px;
   overflow-y: scroll;
   overflow-x: hidden;
   width: 100%;
+  margin: 10px 15px;
 
   .scrollbar();
 }
@@ -55,6 +57,8 @@
 
 .td {
   position: relative;
+  width: 100px;
+  height: 100px;
   &::before {
     position: absolute;
     z-index: 10;
@@ -68,7 +72,7 @@
     content: attr(title);
     overflow: hidden;
     width: content-box;
-    max-width: 155px;
+    max-width: 85px;
   }
   &.selected .struct {
     background-color: lighten(@form-selected-background, 15%);
@@ -96,4 +100,5 @@
 }
 div.struct {
   padding: 0; // TODO: tmp hack to fit viewbox
+  background-color: white;
 }
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
index e72dbbeb87..dbbed9a801 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
+++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -65,17 +65,12 @@ const RenderTmpl: FC<{
 const TemplateTable: FC<TemplateTableProps> = props => {
   const { templates, selected, onSelect, onDelete, onAttach } = props
   const ITEMS_COUNT = templates ? templates.length : 0
-  const ITEM_SIZE = { width: 178, height: 120 }
-  const tmplStyles = {
-    width: `${ITEM_SIZE.width}px`,
-    height: `${ITEM_SIZE.height}px`
-  }
   const options = useSelector(state => getSettingsSelector(state))
 
   return !ITEMS_COUNT ? (
     <EmptySearchResult textInfo="No items found" />
   ) : (
-    <div className={classes.table} style={{ minWidth: ITEM_SIZE.width }}>
+    <div className={classes.table}>
       <div className={classes.tableContent}>
         {templates.map((tmpl, i) => {
           return (
@@ -91,7 +86,6 @@ const TemplateTable: FC<TemplateTableProps> = props => {
                   ? `${tmpl.struct.name}_${i}`
                   : `${tmpl.struct.name}_${i}_selected`
               }
-              style={tmplStyles}
             >
               <RenderTmpl
                 tmpl={tmpl}
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less b/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less
index b2e9127d2a..eee6b14728 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less
+++ b/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less
@@ -1,5 +1,6 @@
 .emptySearch {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 550px;
diff --git a/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less b/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less
index 2cceece21a..bb06210e56 100644
--- a/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less
+++ b/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less
@@ -19,44 +19,33 @@
 
 .rgroup {
   ul {
-    width: 24em;
     padding: 0.5em;
-    display: flex;
-    height: 10.4em;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(8, 41px);
+    grid-template-rows: repeat(4, 29px);
+    grid-column-gap: 6px;
+    grid-row-gap: 10px;
     overflow: hidden;
   }
-  li {
-    display: inline-block;
-    margin: 0.2em 0.1em;
-  }
   form button {
     .btn();
 
+    border: none;
     font-size: 1.3em;
-    width: 2.3em;
-    height: 2em;
+    width: 100%;
+    height: 100%;
     line-height: 1;
-    vertical-align: middle;
     padding: 0.15em;
-    background: inherit;
+    background: @light-background-color;
+    color: @main-font-color;
     &::first-letter {
       font-weight: 600;
-      color: lighten(@main-color, 20%);
-    }
-    &:hover {
-      .highlight-scale(@scale:1.005);
-      .highlight-shadow(black);
-    }
-    &:active {
-      .highlight-scale(none);
-      .highlight-shadow(none);
+      color: @main-dark-color;
     }
+    &:hover,
+    &:active,
     &.selected {
-      .highlight-invert;
-      &::first-letter {
-        color: darken(white, 30%);
-      }
+      background: @button-hover-color;
     }
   }
 }
diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less
index 4ebce15cd6..a4c105960f 100644
--- a/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less
+++ b/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less
@@ -17,12 +17,15 @@
 @import '../../../../../../../style/variables.less';
 
 .rgroupLogic {
+  width: 24.5em;
   label {
-    display: inline-block;
-    text-align: right;
-    line-height: @input-height;
-  }
-  input[type='text'] {
-    width: 7em;
+    display: flex;
+    flex-direction: column;
+    line-height: 2em;
+    margin: 1em 0;
+
+    &.resth {
+      flex-direction: row;
+    }
   }
 }
diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx
index 165691ab74..bafff5459f 100644
--- a/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx
+++ b/packages/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx
@@ -36,7 +36,7 @@ const RgroupLogic = (props: Props) => {
   const { formState, label, rgroupLabels, ...rest } = props
   return (
     <Dialog
-      title="R-Group Logic"
+      title="R-Group Logic Condition"
       className={classes.rgroupLogic}
       result={() => formState.result}
       valid={() => formState.valid}
@@ -49,7 +49,7 @@ const RgroupLogic = (props: Props) => {
         {...formState}
       >
         <Field name="range" />
-        <Field name="resth" />
+        <Field name="resth" labelPos="after" className={classes.resth} />
         <IfThenSelect name="ifthen" label={label} rgroupLabels={rgroupLabels} />
       </Form>
     </Dialog>
diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less
index 347b8b39ca..cff76b25de 100644
--- a/packages/ketcher-react/src/style/variables.less
+++ b/packages/ketcher-react/src/style/variables.less
@@ -14,6 +14,13 @@
  * limitations under the License.
  ***************************************************************************/
  
+// new styles
+@button-hover-color: #ddd;
+@main-font-color: #585858;
+@main-dark-color: #343434;
+@light-background-color: #fff;
+
+// old styles 
 @static-path: '.';
 
 @main-color: #333;