diff --git a/src/ui/public/documentation_links/documentation_links.js b/src/ui/public/documentation_links/documentation_links.js
index ec6f681b51152..3eda68bafe036 100644
--- a/src/ui/public/documentation_links/documentation_links.js
+++ b/src/ui/public/documentation_links/documentation_links.js
@@ -21,7 +21,8 @@ export const documentationLinks = {
     luceneExpressions: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/modules-scripting-expression.html`
   },
   query: {
-    luceneQuerySyntax: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl-query-string-query.html#query-string-syntax`
+    luceneQuerySyntax: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl-query-string-query.html#query-string-syntax`,
+    queryDsl: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl.html`,
   },
   date: {
     dateMath: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/common-options.html#date-math`
diff --git a/src/ui/public/filter_bar/filter_bar.less b/src/ui/public/filter_bar/filter_bar.less
index c1fa15519d32f..967e08b871266 100644
--- a/src/ui/public/filter_bar/filter_bar.less
+++ b/src/ui/public/filter_bar/filter_bar.less
@@ -57,7 +57,6 @@ filter-bar {
 
   .ace_editor {
     height: 175px;
-    margin: 15px 0;
   }
 
   .filter-edit-alias {
diff --git a/src/ui/public/filter_editor/filter_editor.html b/src/ui/public/filter_editor/filter_editor.html
index e75e3de9dc777..20b7680844119 100644
--- a/src/ui/public/filter_editor/filter_editor.html
+++ b/src/ui/public/filter_editor/filter_editor.html
@@ -6,110 +6,120 @@
       filter
     </div>
 
-    <div
+    <button
       class="kuiModalHeaderCloseButton kuiIcon fa-times"
       ng-click="filterEditor.onCancel()"
-    ></div>
+      aria-label="Close filter popover"
+    ></button>
   </div>
 
   <div class="kuiModalBody">
-    <div ng-show="filterEditor.showQueryDslEditor()">
-      <filter-query-dsl-editor
-        filter="filterEditor.filter"
-        on-change="filterEditor.setQueryDsl(queryDsl)"
-      ></filter-query-dsl-editor>
-      <div
-        ng-show="filterEditor.isEditingQueryDsl"
-        ng-click="filterEditor.isEditingQueryDsl = false"
-      >
-        <button class="kuiMenuButton kuiMenuButton--basic">
-          <span class="kuiMenuButton__icon kuiIcon fa-chevron-left"></span>
-          <span>Back</span>
-        </button>
-      </div>
-    </div>
+    <!-- Filter definition -->
+    <div class="kuiVerticalRhythm">
+      <div class="kuiVerticalRhythmSmall filterEditor__labelBar">
+        <label class="kuiLabel">
+          Filter
+        </label>
 
-    <div
-      class="kuiFieldGroup kuiVerticalRhythm kuiFieldGroup--alignTop"
-      ng-hide="filterEditor.showQueryDslEditor()"
-    >
-      <div class="kuiFieldGroupSection">
-        <filter-field-select
-          index-patterns="filterEditor.indexPatterns"
-          field="filterEditor.field"
-          on-select="filterEditor.onFieldSelect(field)"
-        ></filter-field-select>
-      </div>
+        <div>
+          <a
+            class="kuiLink"
+            ng-click="filterEditor.isEditingQueryDsl = !filterEditor.isEditingQueryDsl"
+            kbn-accessible-click
+          >
+            <span ng-if="filterEditor.isEditingQueryDsl">
+              Search filter values
+            </span>
 
-      <div class="kuiFieldGroupSection">
-        <filter-operator-select
-          ng-if="filterEditor.field"
-          field="filterEditor.field"
-          operator="filterEditor.operator"
-          on-select="filterEditor.onOperatorSelect(operator)"
-        ></filter-operator-select>
+            <span ng-if="!filterEditor.isEditingQueryDsl">
+              Edit Query DSL
+            </span>
+          </a>
+        </div>
       </div>
 
-      <div class="kuiFieldGroupSection kuiFieldGroupSection--wide filterEditor__wideField">
-        <filter-params-editor
-          ng-if="filterEditor.field && filterEditor.operator"
-          field="filterEditor.field"
-          operator="filterEditor.operator"
-          params="filterEditor.params"
-        ></filter-params-editor>
-      </div>
-    </div>
+      <!-- Filter dropdowns -->
+      <div
+        class="kuiFieldGroup kuiVerticalRhythmSmall kuiFieldGroup--alignTop"
+        ng-show="!filterEditor.showQueryDslEditor()"
+      >
+        <div class="kuiFieldGroupSection">
+          <filter-field-select
+            index-patterns="filterEditor.indexPatterns"
+            field="filterEditor.field"
+            on-select="filterEditor.onFieldSelect(field)"
+          ></filter-field-select>
+        </div>
 
-    <div class="kuiHeaderBar kuiVerticalRhythm">
-      <div class="kuiHeaderBarSection">
-        <h2 class="kuiSubTitle">
-          Label
-        </h2>
+        <div class="kuiFieldGroupSection">
+          <filter-operator-select
+            ng-if="filterEditor.field"
+            field="filterEditor.field"
+            operator="filterEditor.operator"
+            on-select="filterEditor.onOperatorSelect(operator)"
+          ></filter-operator-select>
+        </div>
+
+        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide filterEditor__wideField">
+          <filter-params-editor
+            ng-if="filterEditor.field && filterEditor.operator"
+            field="filterEditor.field"
+            operator="filterEditor.operator"
+            params="filterEditor.params"
+          ></filter-params-editor>
+        </div>
       </div>
-    </div>
 
-    <div class="kuiFieldGroup kuiVerticalRhythm">
-      <div class="kuiFieldGroupSection">
-        <input
-          class="kuiTextInput"
-          placeholder="Optional"
-          type="text"
-          ng-model="filterEditor.alias"
-        />
+      <!-- DSL editor -->
+      <div
+        class="kuiVerticalRhythmSmall"
+        ng-show="filterEditor.showQueryDslEditor()"
+      >
+        <filter-query-dsl-editor
+          class="kuiVerticalRhythmSmall"
+          filter="filterEditor.filter"
+          on-change="filterEditor.setQueryDsl(queryDsl)"
+        ></filter-query-dsl-editor>
+
+        <p class="kuiText kuiVerticalRhythmSmall">
+          Filters are built using the <a class="kuiLink" target="_blank" ng-href="{{ filterEditor.docLinks.query.queryDsl }}">Elasticsearch Query DSL</a>.
+        </p>
       </div>
     </div>
 
-    <div
-      class="kuiHeaderBar kuiVerticalRhythm"
-      ng-hide="filterEditor.showQueryDslEditor()"
-    >
-      <div class="kuiHeaderBarSection">
-        <h2 class="kuiSubTitle">
-          More actions
-        </h2>
+    <!-- Label -->
+    <div class="kuiVerticalRhythm">
+      <div class="kuiVerticalRhythmSmall">
+        <label
+          class="kuiLabel"
+          for="filterEditorLabelInput"
+        >
+          Label
+        </label>
       </div>
-    </div>
 
-    <div
-      class="kuiMenuButtonGroup kuiVerticalRhythm"
-      ng-hide="filterEditor.showQueryDslEditor()"
-    >
-      <button
-        class="kuiMenuButton kuiMenuButton--basic"
-        ng-click="filterEditor.isEditingQueryDsl = true"
-      >
-        <span>Edit the query DSL</span>
-      </button>
+      <input
+        class="kuiTextInput kuiVerticalRhythmSmall"
+        placeholder="Optional"
+        type="text"
+        ng-model="filterEditor.alias"
+        id="filterEditorLabelInput"
+      />
     </div>
   </div>
 
+  <!-- Footer -->
   <div class="kuiModalFooter kuiBar">
     <div class="kuiBarSection" ng-hide="filterEditor.filter.meta.isNew">
       <button
         class="kuiButton kuiButton--danger"
         ng-click="filterEditor.onDelete()"
+        aria-label="Delete filter"
       >
-        <span class="fa fa-trash"></span>
+        <span
+          class="kuiIcon fa-trash"
+          aria-hidden="true"
+        ></span>
       </button>
     </div>
 
diff --git a/src/ui/public/filter_editor/filter_editor.js b/src/ui/public/filter_editor/filter_editor.js
index bd62d79314551..32af0534b288c 100644
--- a/src/ui/public/filter_editor/filter_editor.js
+++ b/src/ui/public/filter_editor/filter_editor.js
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { uiModules } from 'ui/modules';
 import { FILTER_OPERATOR_TYPES } from './lib/filter_operators';
 import template from './filter_editor.html';
+import { documentationLinks } from '../documentation_links/documentation_links';
 import './filter_query_dsl_editor';
 import './filter_field_select';
 import './filter_operator_select';
@@ -35,6 +36,7 @@ module.directive('filterEditor', function ($timeout, indexPatterns) {
     controller: function ($scope, $element) {
       this.init = () => {
         const { filter } = this;
+        this.docLinks = documentationLinks;
         this.alias = filter.meta.alias;
         this.isEditingQueryDsl = false;
         this.queryDsl = getQueryDslFromFilter(filter);
diff --git a/src/ui/public/filter_editor/filter_editor.less b/src/ui/public/filter_editor/filter_editor.less
index d50b1ff527f9d..1fbc63fcc6154 100644
--- a/src/ui/public/filter_editor/filter_editor.less
+++ b/src/ui/public/filter_editor/filter_editor.less
@@ -6,6 +6,12 @@
   z-index: 101;
 }
 
+.filterEditor__labelBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .filterEditor__wideField {
   min-width: 0;
 }