diff --git a/app/scripts/directives/alarmcell.html b/app/scripts/directives/alarmcell.html
index 6153e725..1153fe50 100644
--- a/app/scripts/directives/alarmcell.html
+++ b/app/scripts/directives/alarmcell.html
@@ -1 +1 @@
-<h4 class="cell cell-alarm alarm" ng-class="{ 'alarm-active': cell.value }">{{ cell.name }}</h4>
+<h4 class="cell-item cell cell-alarm alarm" ng-class="{ 'alarm-active': cell.value }">{{ cell.name }}</h4>
diff --git a/app/scripts/directives/cellname.js b/app/scripts/directives/cellname.js
index 3b8836ce..1b90a021 100644
--- a/app/scripts/directives/cellname.js
+++ b/app/scripts/directives/cellname.js
@@ -9,7 +9,7 @@ function cellNameDirective() {
     replace: true,
     // XXX: trying to use templateUrl causes 'controller cell not
     // found' error
-    template: '<h4 class="cell-title">' +
+    template: '<h4 class="cell-item cell-title">' +
       '<span class="name">{{ name() }}</span>' +
       '<span ng-if="displayId()" class="id" title="device/control id">{{ cellId() }}</span>' +
       '</h4>',
diff --git a/app/scripts/directives/displaycell.html b/app/scripts/directives/displaycell.html
index b7b5e13a..f8ee2479 100644
--- a/app/scripts/directives/displaycell.html
+++ b/app/scripts/directives/displaycell.html
@@ -1,21 +1,24 @@
-<div class="display-cell display-cell-{{cell.displayType}} cell-type-{{ cell.type }}"
-     ng-switch on="cell.displayType"
-     ng-class="{ 'cell-error': cell.error }"
-     data-cell-id="{{ cell.id }}">
-    <cell-name ng-if="displayCellCtrl.shouldDisplayCellName()"
-               override="displayCellCtrl.overrideName()"
-               ng-click="displayCellCtrl.copy(cell.id)"
-               tooltip-popup-close-delay="500"
-               uib-tooltip="'{{ cell.id }}' copied to clipboard"
-               tooltip-trigger="{
-                 'outsideClick': 'mouseleave',
-                 'focus': 'mouseleave'
-               }"
-               tooltip-class="custom-tooltip cell-name-tooltip"></cell-name>
-    <button title="History" type="button" class="display-cell-btn btn bg-color-blueDark txt-color-white show-on-parent-hover"
-            ng-click="displayCellCtrl.redirect(cell.id)">
-      <i class="glyphicon glyphicon-stats"></i>
+<div 
+    class="cell-group display-cell display-cell-{{cell.displayType}} cell-type-{{ cell.type }}" 
+    ng-switch on="cell.displayType"
+    ng-class="{ 'cell-error': cell.error, 'cell-group-single': ctrl.source.compact }" 
+    data-cell-id="{{ cell.id }}">
+    <cell-name 
+        ng-if="displayCellCtrl.shouldDisplayCellName()" 
+        override="displayCellCtrl.overrideName()"
+        ng-click="displayCellCtrl.copy(cell.id)" 
+        tooltip-popup-close-delay="500"
+        uib-tooltip="'{{ cell.id }}' copied to clipboard" 
+        tooltip-trigger="{
+            'outsideClick': 'mouseleave',
+            'focus': 'mouseleave'
+        }" 
+        tooltip-class="custom-tooltip cell-name-tooltip"></cell-name>
+    <button 
+        type="button"
+        title="History" 
+        class="display-cell-btn btn bg-color-blueDark txt-color-white show-on-parent-hover" 
+        ng-click="displayCellCtrl.redirect(cell.id)">
+        <i class="glyphicon glyphicon-stats"></i>
     </button>
-</div>
-<!--uib-tooltip="{{parentName}}/{{cell.id}}"
-     tooltip-class="custom-tooltip"-->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/app/scripts/directives/rangecell.html b/app/scripts/directives/rangecell.html
index 945b396c..a572f352 100644
--- a/app/scripts/directives/rangecell.html
+++ b/app/scripts/directives/rangecell.html
@@ -1,22 +1,28 @@
-<div
-  class="cell cell-range"
-  ng-click="cell.copy(cell.value)"
-  tooltip-popup-close-delay="500"
-  uib-tooltip="'{{ cell.value }}' copied to clipboard"
-  tooltip-trigger="{
-    'outsideClick': 'mouseleave',
-    'focus': 'mouseleave'
-  }"
-  tooltip-class="custom-tooltip"
->
- <!-- <input ng-readonly="cell.readOnly" type="range" ng-model="target.value"
-         ng-model-options="{ updateOn: 'default blur', debounce: {'default': 400, 'blur': 0} }">
--->
-    <div range-slider min="min" max="max" step="step" model-max="_value" pin-handle="min"
-         disabled="cell.readOnly"
-         on-handle-up='handleUp()'></div>
-  <span class="value-wrapper">
-    <span class="value">{{ cell.value }}</span>
-    <span ng-if="!!cell.units" class="units">{{ cell.units }}</span>
-  </span>
-</div>
+<div  class="cell-item cell cell-range" >
+    <div 
+        range-slider 
+        min="min" 
+        max="max" 
+        step="step" 
+        model-max="_value" 
+        pin-handle="min" d
+        isabled="cell.readOnly"
+        on-handle-up='handleUp()'>
+    </div>
+
+    <span class="value-wrapper field">
+        <span class="value">
+            <input 
+                class="form-control" 
+                ng-if="cell.valueType == 'number' && !cell.readOnly" 
+                type="number" 
+                min="{{ cell.min }}"
+                max="{{ cell.max }}" 
+                step="{{ cell.step }}" 
+                ng-model="cell.value" 
+                explicit-changes
+            >
+        </span>
+        <span ng-if="!!cell.units" class="units">{{ cell.units }}</span>
+    </span>
+</div>
\ No newline at end of file
diff --git a/app/scripts/directives/rgbcell.html b/app/scripts/directives/rgbcell.html
index a3b60806..ecfdede3 100644
--- a/app/scripts/directives/rgbcell.html
+++ b/app/scripts/directives/rgbcell.html
@@ -1,4 +1,4 @@
-<span class="cell cell-rgb">
+<span class="cell-item cell cell-rgb">
   <spectrum-colorpicker ng-if="cell.valueType == 'rgb' && !cell.readOnly"
                         format="rgb"
                         options="rgbCtrl.colorPickerOptions"
diff --git a/app/scripts/directives/switchcell.html b/app/scripts/directives/switchcell.html
index 97a7f0b1..9bb3728a 100644
--- a/app/scripts/directives/switchcell.html
+++ b/app/scripts/directives/switchcell.html
@@ -7,12 +7,12 @@
   <toggle-switch ng-switch-default class="control-value" ng-model="cell.value"></toggle-cell>
 </span>
   для смартадмин-->
-<span class="cell cell-switch">
-    <span class="onoffswitch" ng-class="{'pointer-none text-muted':cell.readOnly==true}">
-        <input type="checkbox" ng-model="_value" class="onoffswitch-checkbox" id="{{id}}">
+<span class="cell-item cell cell-switch">
+  <span class="onoffswitch" ng-class="{'pointer-none text-muted':cell.readOnly==true}">
+      <input type="checkbox" ng-model="_value" class="onoffswitch-checkbox" id="{{id}}">
         <label class="onoffswitch-label" for="{{id}}" ng-click="change()">
-            <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
-            <span class="onoffswitch-switch"></span>
-        </label>
-    </span>
+          <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
+          <span class="onoffswitch-switch"></span>
+      </label>
+  </span>
 </span>
diff --git a/app/scripts/directives/textcell.html b/app/scripts/directives/textcell.html
index 29b3db7c..c73dc1c9 100644
--- a/app/scripts/directives/textcell.html
+++ b/app/scripts/directives/textcell.html
@@ -6,7 +6,7 @@
     'outsideClick': 'mouseleave',
     'focus': 'mouseleave'
   }"
-  tooltip-enable="{{ cell.readOnly }}"
+  class="cell-item"
 >
   <p
     ng-if="cell.readOnly"
@@ -18,7 +18,7 @@
     ng-hide="cell.readOnly"
     ng-model="cell.value"
     type="text"
-    class="cell cell-text"
+    class="cell cell-text form-control"
     explicit-changes
   >
 </div>
\ No newline at end of file
diff --git a/app/scripts/directives/valuecell.html b/app/scripts/directives/valuecell.html
index 8b7c7563..f71c66b7 100644
--- a/app/scripts/directives/valuecell.html
+++ b/app/scripts/directives/valuecell.html
@@ -1,5 +1,5 @@
 <span
-  class="cell cell-value"
+  class="cell-item cell cell-value"
   ng-click="cell.copy(cell.value)"
   tooltip-popup-close-delay="500"
   uib-tooltip="'{{ cell.value }}' copied to clipboard"
@@ -10,7 +10,7 @@
   tooltip-class="custom-tooltip"
   tooltip-enable="{{ cell.readOnly }}"
 >
-  <input ng-if="cell.valueType == 'number' && !cell.readOnly" type="number"
+  <input class="form-control" ng-if="cell.valueType == 'number' && !cell.readOnly" type="number"
          min="{{ cell.min }}" max="{{ cell.max }}" step="{{ cell.step }}"
          ng-model="cell.value" explicit-changes>
   <span ng-if="cell.readOnly" class="value">
diff --git a/app/styles/main.css b/app/styles/main.css
index dd570471..58c160c9 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -530,7 +530,39 @@ button.show-console span {
 .display-cell {
     width: 100%;
     position: relative;
-    padding-right: 35px;
+    padding-right: 30px;
+}
+
+.display-cell.cell-group {
+  margin-left: -13px;
+  margin-right: -13px;
+}
+
+.display-cell.cell-group:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.display-cell.cell-group .cell-item {
+  position: relative;
+  float: left;
+  width: 50%;
+  padding-left: 13px;
+}
+
+.display-cell.cell-group.cell-group-single .cell-item  {
+  width: 100%;
+}
+
+.display-cell.cell-group .cell-button {
+  padding-left: 13px;
+  margin-left: 13px;
+  display: block;
+}
+
+.display-cell.cell-group .cell-button .cell-item {
+  padding-left: 0;
 }
 
 .display-cell-btn,
@@ -561,12 +593,29 @@ button.show-console span {
   flex-grow: 1;
 }
 
+.display-cell-bin .display-cell:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.display-cell-bin .display-cell h4 {
+  font-size: 16px;
+}
+
 .display-cell .cell-range .value-wrapper {
   display: block;
   text-align: center;
   border-bottom: 1px dotted #ccc;
-  width: 80%;
-  margin: 0 auto 4px auto;
+  _width: 80%;
+  _margin: 0 auto 4px auto;
+}
+
+.display-cell .cell-range .value-wrapper.field {
+    border-bottom: none;
+}
+
+.display-cell .cell-range .value-wrapper.field input {
+    display: inline-block;
+    margin-top: 8px;
 }
 
 .display-cell  button.cell-button {
@@ -576,12 +625,50 @@ button.show-console span {
 .display-cell  button.cell-button h4 {
   font-size: 13px;
 }
+
 .display-cell input.cell-text {
-  width: 120px;
+  _width: 120px;
 }
 
 .display-cell .cell-value input {
-  width: 120px;
+  _width: 120px;
+}
+
+.display-cell .cell-text {
+  margin-bottom: 0;
+  font-size: 14px;
+}
+
+.display-cell .cell-value .int {
+  width: auto;
+}
+
+.display-cell .cell-switch .onoffswitch {
+  margin-left: 0;
+}
+
+.display-cell .cell-range .ngrs-range-slider {
+  padding: 4px 0px;
+  position: relative;
+}
+
+.display-cell .cell-range .ngrs-range-slider:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  background-color: #cacaca;
+}
+
+.display-cell .cell-range .ngrs-range-slider .ngrs-runner {
+  background: none;
+}
+
+.display-cell .cell-range .ngrs-range-slider .ngrs-join {
+  margin-left: -9px;
 }
 
 .cell-error {