diff --git a/src/datasource-zabbix/add-metric-function.directive.js b/src/datasource-zabbix/add-metric-function.directive.js
index a3676ee..88448e5 100644
--- a/src/datasource-zabbix/add-metric-function.directive.js
+++ b/src/datasource-zabbix/add-metric-function.directive.js
@@ -8,10 +8,10 @@ angular
   .module('grafana.directives')
   .directive('addMetricFunction', function($compile) {
     var inputTemplate = '<input type="text"'+
-                          ' class="tight-form-input input-medium tight-form-input"' +
+                          ' class="gf-form-input"' +
                           ' spellcheck="false" style="display:none"></input>';
 
-    var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
+    var buttonTemplate = '<a  class="gf-form-label tight-form-func dropdown-toggle query-part"' +
                             ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
                             '<i class="fa fa-plus"></i></a>';
 
diff --git a/src/datasource-zabbix/partials/query.editor.html b/src/datasource-zabbix/partials/query.editor.html
index 50342cd..eb858c5 100644
--- a/src/datasource-zabbix/partials/query.editor.html
+++ b/src/datasource-zabbix/partials/query.editor.html
@@ -1,210 +1,149 @@
-<div class="tight-form">
-  <ul class="tight-form-list pull-right">
-    <li class="tight-form-item small" ng-show="ctrl.target.datasource">
-      <em>{{ctrl.target.datasource}}</em>
-    </li>
-    <li class="tight-form-item">
-      <div class="dropdown">
-        <a class="pointer dropdown-toggle"
-           data-toggle="dropdown"
-           tabindex="1">
-          <i class="fa fa-bars"></i>
-        </a>
-        <ul class="dropdown-menu pull-right" role="menu">
+<query-editor-row query-ctrl="ctrl" can-collapse="false">
 
-          <!-- Switch editor mode -->
-          <li role="menuitem" ng-show="ctrl.target.mode">
-            <a class="pointer" tabindex="1"
-               ng-click="ctrl.switchEditorMode(0)">Numeric metrics</a>
-          </li>
-          <li role="menuitem" ng-show="ctrl.target.mode != 1">
-            <a class="pointer" tabindex="1"
-               ng-click="ctrl.switchEditorMode(1)">IT services</a>
-          </li>
-          <li role="menuitem" ng-show="ctrl.target.mode != 2">
-            <a class="pointer" tabindex="1"
-               ng-click="ctrl.switchEditorMode(2)">Text metrics</a>
-          </li>
-          <li class="divider" role="menuitem"></li>
-
-          <!-- From app/features/panel/partials/query_editor_row.html -->
-          <li role="menuitem">
-            <a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
-          </li>
-          <li role="menuitem">
-            <a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
-          </li>
-          <li role="menuitem">
-            <a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
-          </li>
-        </ul>
+  <div class="gf-form-inline">
+    <div class="gf-form max-width-20">
+      <label class="gf-form-label width-7">Query Mode</label>
+      <div class="gf-form-select-wrapper max-width-20">
+        <select class="gf-form-input"
+              ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
+              ng-model="ctrl.target.mode"
+              ng-options="v.mode as v.text for (k, v) in ctrl.editorModes">
+        </select>
       </div>
-    </li>
-    <li class="tight-form-item last">
-      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
-        <i class="fa fa-trash"></i>
-      </a>
-    </li>
-  </ul>
-
-  <ul class="tight-form-list">
-    <li class="tight-form-item" style="min-width: 15px; text-align: center">
-      {{ctrl.target.refId}}
-    </li>
-    <li>
-      <a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
-        <i class="fa fa-eye"></i>
-      </a>
-    </li>
-  </ul>
+    </div>
+    <div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+  </div>
 
   <!-- IT Service editor -->
-  <ul class="tight-form-list" role="menu" ng-show="ctrl.target.mode == 1">
-    <li class="tight-form-item input-small">IT Service</li>
-    <li>
-      <select class="tight-form-input input-large"
+  <div class="gf-form-inline" ng-show="ctrl.target.mode == 1">
+    <div class="gf-form max-width-20">
+      <label class="gf-form-label width-7">IT Service</label>
+      <div class="gf-form-select-wrapper max-width-20">
+        <select class="gf-form-input"
               ng-change="ctrl.selectITService()"
               ng-model="ctrl.target.itservice"
               bs-tooltip="ctrl.target.itservice.name.length > 25 ? ctrl.target.itservice.name : ''"
               ng-options="itservice.name for itservice in ctrl.itserviceList track by itservice.name">
-        <option value="">-- Select IT service --</option>
-      </select>
-    </li>
-    <li class="tight-form-item input-medium">IT service property</li>
-    <li>
-      <select class="tight-form-input input-medium"
+          <option value="">-- Select IT service --</option>
+        </select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label">IT service property</label>
+      <div class="gf-form-select-wrapper">
+        <select class="gf-form-input"
               ng-change="ctrl.selectITService()"
               ng-model="ctrl.target.slaProperty"
               ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name">
-        <option value="">-- Property --</option>
-      </select>
-    </li>
-  </ul>
+          <option value="">-- Property --</option>
+        </select>
+      </div>
+    </div>
+    <div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+  </div>
 
-  <ul class="tight-form-list" role="menu" ng-hide="ctrl.target.mode == 1">
-
-    <!-- Select Host Group -->
-    <li class="tight-form-item input-small" style="width: 5em">Group</li>
-    <li>
+  <div class="gf-form-inline" ng-hide="ctrl.target.mode == 1">
+    <!-- Select Group -->
+    <div class="gf-form max-width-20">
+      <label class="gf-form-label width-7">Group</label>
       <input type="text"
         ng-model="ctrl.target.group.filter"
         bs-typeahead="ctrl.getGroupNames"
         ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
-        class="input-medium tight-form-input"
+        class="gf-form-input"
         ng-class="{
           'zbx-variable': ctrl.isVariable(ctrl.target.group.filter),
           'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)
-        }">
-    </li>
-
+          }"></input>
+    </div>
     <!-- Select Host -->
-    <li class="tight-form-item input-small" style="width: 3em">Host</li>
-    <li>
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Host</label>
       <input type="text"
         ng-model="ctrl.target.host.filter"
         bs-typeahead="ctrl.getHostNames"
         ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
-        class="input-large tight-form-input"
+        class="gf-form-input"
         ng-class="{
           'zbx-variable': ctrl.isVariable(ctrl.target.host.filter),
           'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)
-        }">
-    </li>
-    <li class="tight-form-item" ng-hide="ctrl.target.mode == 2">
-      Show disabled items&nbsp;
-      <editor-checkbox text=""
-        model="ctrl.target.showDisabledItems"
-        change="ctrl.onTargetBlur()">
-      </editor-checkbox>
-    </li>
-  </ul>
-  <div class="clearfix"></div>
-</div>
+          }">
+    </div>
 
-<div class="tight-form" ng-hide="ctrl.target.mode == 1">
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item" style="width: 44px">&nbsp</li>
+		<gf-form-switch class="gf-form" ng-hide="ctrl.target.mode == 2"
+      label="Show disabled items" checked="ctrl.target.showDisabledItems" on-change="ctrl.onTargetBlur()">
+		</gf-form-switch>
 
+    <div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+  </div>
+
+  <div class="gf-form-inline" ng-hide="ctrl.target.mode == 1">
     <!-- Select Application -->
-    <li class="tight-form-item" style="width: 5em">Application</li>
-    <li>
+    <div class="gf-form max-width-20">
+      <label class="gf-form-label width-7">Application</label>
       <input type="text"
         ng-model="ctrl.target.application.filter"
         bs-typeahead="ctrl.getApplicationNames"
         ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
-        class="input-medium tight-form-input"
+        class="gf-form-input"
         ng-class="{
           'zbx-variable': ctrl.isVariable(ctrl.target.application.filter),
           'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)
         }">
-    </li>
+    </div>
 
     <!-- Select Item -->
-    <li class="tight-form-item input-small" style="width: 3em">Item</li>
-    <li>
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Item</label>
       <input type="text"
         ng-model="ctrl.target.item.filter"
         bs-typeahead="ctrl.getItemNames"
         ng-blur="ctrl.onTargetBlur()"
         data-min-length=0
         data-items=100
-        class="input-large tight-form-input"
+        class="gf-form-input"
         ng-class="{
           'zbx-variable': ctrl.isVariable(ctrl.target.item.filter),
           'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)
         }">
-    </li>
-    <li class="tight-form-item query-keyword">Options</li>
-    <li ng-repeat="func in ctrl.target.functions">
-      <span metric-function-editor class="tight-form-item tight-form-func">
-      </span>
-    </li>
-    <li class="dropdown" add-metric-function>
-    </li>
-  </ul>
-
-  <div class="clearfix"></div>
-</div>
-<div class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options">
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item" style="width: 44px">&nbsp</li>
-    <li class="tight-form-item query-keyword" style="width: 5em">Options</li>
-  </ul>
-  <div class="clearfix"></div>
-</div>
-
-<div class="tight-form" ng-show="ctrl.target.mode == 2">
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item" style="width: 44px">&nbsp</li>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label">Options</label>
+      <div ng-repeat="func in ctrl.target.functions" class="gf-form-label query-part" metric-function-editor></div>
+    </div>
+    <div class="gf-form dropdown" add-metric-function>
+    </div>
+    <div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+  </div>
 
+  <div class="gf-form-inline" ng-show="ctrl.target.mode == 2">
     <!-- Text metric regex -->
-    <li class="tight-form-item" style="width: 5em" ng-show="ctrl.target.mode == 2">
-      Text filter
-    </li>
-    <li ng-show="ctrl.target.mode == 2">
+    <div class="gf-form max-width-20">
+      <label class="gf-form-label width-7">Text filter</label>
       <input type="text"
-             class="tight-form-input" style="width: 417px"
+             class="gf-form-input"
              ng-model="ctrl.target.textFilter"
              spellcheck='false'
              placeholder="Text filter (regex)"
-             ng-blur="ctrl.targetBlur()">
-    </li>
-    <li class="tight-form-item" ng-show="ctrl.target.mode == 2">
-      Use capture groups&nbsp;
-      <input class="cr1" id="ctrl.target.useCaptureGroups" type="checkbox"
-             ng-model="ctrl.target.useCaptureGroups"
-             ng-checked="ctrl.target.useCaptureGroups"
-             ng-change="ctrl.targetBlur()">
-      <label for="ctrl.target.useCaptureGroups" class="cr1"></label>
-    </li>
-  </ul>
+             ng-blur="ctrl.onTargetBlur()">
+    </div>
 
-  <div class="clearfix"></div>
-</div>
+    <gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" on-change="ctrl.onTargetBlur()">
+		</gf-form-switch>
+  </div>
 
+</query-editor-row>
diff --git a/src/datasource-zabbix/query.controller.js b/src/datasource-zabbix/query.controller.js
index 3556209..bd35da3 100644
--- a/src/datasource-zabbix/query.controller.js
+++ b/src/datasource-zabbix/query.controller.js
@@ -26,9 +26,9 @@ export class ZabbixQueryController extends QueryCtrl {
     this.templateSrv = templateSrv;
 
     this.editorModes = {
-      0: 'num',
-      1: 'itservice',
-      2: 'text'
+      0: {value: 'num', text: 'Numeric metrics', mode: 0},
+      1: {value: 'itservice', text: 'IT Services', mode: 1},
+      2: {value: 'text', text: 'Text metrics', mode: 2}
     };
 
     // Map functions for bs-typeahead
@@ -98,7 +98,7 @@ export class ZabbixQueryController extends QueryCtrl {
 
   initFilters() {
     var self = this;
-    var itemtype = self.editorModes[self.target.mode];
+    var itemtype = self.editorModes[self.target.mode].value;
     return this.$q.when(this.suggestGroups())
       .then(() => {return self.suggestHosts();})
       .then(() => {return self.suggestApps();})