diff --git a/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png
new file mode 100644
index 0000000000000..2c2c71b82180a
Binary files /dev/null and b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png differ
diff --git a/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png
new file mode 100644
index 0000000000000..91a936f0cb1dd
Binary files /dev/null and b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png differ
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
index c0a2990015138..054229bde98fb 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
@@ -250,6 +250,7 @@ export function EditorFrame(props: EditorFrameProps) {
               visualizationMap={props.visualizationMap}
               dispatch={dispatch}
               ExpressionRenderer={props.ExpressionRenderer}
+              core={props.core}
             />
           </WorkspacePanelWrapper>
         )
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
index 0b252729a9966..e6511f5e7bd98 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
@@ -266,7 +266,7 @@ export function SuggestionPanel({
               }}
             >
               {i18n.translate('xpack.lens.sugegstion.confirmSuggestionLabel', {
-                defaultMessage: 'Confirm and reload suggestions',
+                defaultMessage: 'Reload suggestions',
               })}
             </EuiButtonEmpty>
           </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
index 86a0e5c8a833a..fc224db743dca 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-
 import { ExpressionRendererProps } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Visualization, FramePublicAPI, TableSuggestion } from '../../types';
 import {
@@ -20,6 +19,7 @@ import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { DragDrop, ChildDragDropProvider } from '../../drag_drop';
 import { Ast } from '@kbn/interpreter/common';
+import { coreMock } from 'src/core/public/mocks';
 
 const waitForPromises = () => new Promise(resolve => setTimeout(resolve));
 
@@ -59,10 +59,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -80,10 +81,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -101,10 +103,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -136,6 +139,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -230,6 +234,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -307,6 +312,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -355,6 +361,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -394,6 +401,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -438,6 +446,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -485,6 +494,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -542,6 +552,7 @@ describe('workspace_panel', () => {
             visualizationState={{}}
             dispatch={mockDispatch}
             ExpressionRenderer={expressionRendererMock}
+            core={coreMock.createSetup()}
           />
         </ChildDragDropProvider>
       );
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
index 314b10796435b..6d0ab402a2971 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
@@ -6,8 +6,9 @@
 
 import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiImage, EuiText } from '@elastic/eui';
 import { toExpression } from '@kbn/interpreter/common';
+import { CoreStart, CoreSetup } from 'src/core/public';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Action } from './state_management';
 import { Datasource, Visualization, FramePublicAPI } from '../../types';
@@ -32,6 +33,7 @@ export interface WorkspacePanelProps {
   framePublicAPI: FramePublicAPI;
   dispatch: (action: Action) => void;
   ExpressionRenderer: ExpressionRenderer;
+  core: CoreStart | CoreSetup;
 }
 
 export const WorkspacePanel = debouncedComponent(InnerWorkspacePanel);
@@ -46,8 +48,14 @@ export function InnerWorkspacePanel({
   datasourceStates,
   framePublicAPI,
   dispatch,
+  core,
   ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
+  const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
+  const emptyStateGraphicURL = IS_DARK_THEME
+    ? '/plugins/lens/assets/lens_app_graphic_dark_2x.png'
+    : '/plugins/lens/assets/lens_app_graphic_light_2x.png';
+
   const dragDropContext = useContext(DragContext);
 
   const suggestionForDraggedField = useMemo(() => {
@@ -87,12 +95,25 @@ export function InnerWorkspacePanel({
 
   function renderEmptyWorkspace() {
     return (
-      <p data-test-subj="empty-workspace">
-        <FormattedMessage
-          id="xpack.lens.editorFrame.emptyWorkspace"
-          defaultMessage="This is the workspace panel. Drop fields here"
+      <EuiText textAlign="center" grow={false} color="subdued" data-test-subj="empty-workspace">
+        <h3>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspaceHeading"
+            defaultMessage="Create a visualization"
+          />
+        </h3>
+        <EuiImage
+          style={{ width: 360 }}
+          url={core.http.basePath.prepend(emptyStateGraphicURL)}
+          alt=""
         />
-      </p>
+        <p>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspace"
+            defaultMessage="Drop some fields here."
+          />
+        </p>
+      </EuiText>
     );
   }
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
index 4671d779833af..24ccef4c081aa 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
@@ -23,9 +23,14 @@
   flex-grow: 0;
 }
 
+/**
+ * 1. Don't cut off the shadow of the field items
+ */
+
 .lnsInnerIndexPatternDataPanel__listWrapper {
   @include euiOverflowShadow;
   @include euiScrollBar;
+  margin-left: -$euiSize; /* 1 */
   position: relative;
   flex-grow: 1;
   overflow: auto;
@@ -35,8 +40,8 @@
   padding-top: $euiSizeS;
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  left: $euiSize; /* 1 */
+  right: $euiSizeXS; /* 1 */
 }
 
 .lnsInnerIndexPatternDataPanel__filterButton {
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
index 9eab50dd139d8..54f9a3787466d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
@@ -1,27 +1,61 @@
 .lnsFieldItem {
   @include euiFontSizeS;
-  background: $euiColorEmptyShade;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
   border-radius: $euiBorderRadius;
   margin-bottom: $euiSizeXS;
-  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &:hover {
-    @include euiBottomShadowMedium;
-    z-index: 2;
-    cursor: grab;
-  }
 }
 
-.lnsFieldItem--missing {
-  background: $euiColorLightestShade;
+.lnsFieldItem__popoverAnchor:hover,
+.lnsFieldItem__popoverAnchor:focus,
+.lnsFieldItem__popoverAnchor:focus-within {
+  @include euiBottomShadowMedium;
+  border-radius: $euiBorderRadius;
+  z-index: 2;
 }
 
-.lnsFieldItem__name {
-  margin-left: $euiSizeXS;
+.lnsFieldItem--missing {
+  background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
+  color: $euiColorDarkShade;
 }
 
 .lnsFieldItem__info {
+  border-radius: $euiBorderRadius - 1px;
   padding: $euiSizeS;
+  display: flex;
+  align-items: flex-start;
+  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance,
+              background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation
+
+  .lnsFieldItem__name {
+    margin-left: $euiSizeXS;
+    flex-grow: 1;
+  }
+
+  .lnsFieldListPanel__fieldIcon,
+  .lnsFieldItem__infoIcon {
+    flex-shrink: 0;
+  }
+
+  .lnsFieldListPanel__fieldIcon {
+    margin-top: 2px;
+  }
+
+  .lnsFieldItem__infoIcon {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus {
+    cursor: grab;
+
+    .lnsFieldItem__infoIcon {
+      visibility: visible;
+    }
+  }
+}
+
+.lnsFieldItem__info-isOpen {
+  @include euiFocusRing;
 }
 
 .lnsFieldItem__topValue {
@@ -45,3 +79,8 @@
   min-width: 260px;
   max-width: 300px;
 }
+
+.lnsFieldItem__popoverButtonGroup {
+  // Enforce lowercase for buttons or else some browsers inherit all caps from popover title
+  text-transform: none;
+}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
index 85996659620e7..da42113b4e7b4 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
@@ -492,16 +492,20 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
               })}
 
               {!localState.isLoading && paginatedFields.length === 0 && (
-                <EuiText>
-                  {showEmptyFields
-                    ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
-                        defaultMessage:
-                          'No fields have data with the current filters. You can show fields without data using the filters above.',
-                      })
-                    : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
-                        defaultMessage: 'No fields can be visualized from {title}',
-                        values: { title: currentIndexPattern.title },
-                      })}
+                <EuiText size="s" color="subdued">
+                  <p>
+                    <strong>
+                      {showEmptyFields
+                        ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
+                            defaultMessage:
+                              'No fields have data with the current filters. You can show fields without data using the filters above.',
+                          })
+                        : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
+                            defaultMessage: 'No fields in {title} can be visualized.',
+                            values: { title: currentIndexPattern.title },
+                          })}
+                    </strong>
+                  </p>
                 </EuiText>
               )}
             </div>
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
index 33567b20f364d..fecf2792da1c7 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -96,7 +96,7 @@ describe('IndexPatternDimensionPanel', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Date Histogram of timestamp',
+              label: 'Date histogram of timestamp',
               dataType: 'date',
               isBucketed: true,
 
@@ -280,7 +280,7 @@ describe('IndexPatternDimensionPanel', () => {
       'Incompatible'
     );
 
-    expect(options.find(({ name }) => name === 'Date Histogram')!['data-test-subj']).toContain(
+    expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
       'Incompatible'
     );
   });
@@ -822,7 +822,7 @@ describe('IndexPatternDimensionPanel', () => {
         .find(EuiSideNav)
         .prop('items')[0]
         .items.map(({ name }) => name)
-    ).toEqual(['Unique count', 'Average', 'Count', 'Filter Ratio', 'Maximum', 'Minimum', 'Sum']);
+    ).toEqual(['Unique count', 'Average', 'Count', 'Filter ratio', 'Maximum', 'Minimum', 'Sum']);
   });
 
   it('should add a column on selection of a field', () => {
@@ -973,7 +973,7 @@ describe('IndexPatternDimensionPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Date Histogram of timestamp',
+                label: 'Date histogram of timestamp',
                 dataType: 'date',
                 isBucketed: true,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
index ec2c153931bd1..494a0ae9fb1e3 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
@@ -330,28 +330,21 @@ export function PopoverEditor(props: PopoverEditorProps) {
                   <EuiCallOut
                     data-test-subj="indexPattern-invalid-operation"
                     title={i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
-                      defaultMessage: 'Operation not applicable to field',
+                      defaultMessage: 'To use this function, select a different field.',
                     })}
-                    color="danger"
-                    iconType="cross"
+                    color="warning"
                     size="s"
-                  >
-                    <p>
-                      <FormattedMessage
-                        id="xpack.lens.indexPattern.invalidOperationDescription"
-                        defaultMessage="Please choose another field"
-                      />
-                    </p>
-                  </EuiCallOut>
+                    iconType="sortUp"
+                  />
                 )}
                 {incompatibleSelectedOperationType && !selectedColumn && (
                   <EuiCallOut
                     size="s"
                     data-test-subj="indexPattern-fieldless-operation"
                     title={i18n.translate('xpack.lens.indexPattern.fieldlessOperationLabel', {
-                      defaultMessage: 'Choose a field the operation is applied to',
+                      defaultMessage: 'To use this function, select a field.',
                     })}
-                    iconType="alert"
+                    iconType="sortUp"
                   ></EuiCallOut>
                 )}
                 {!incompatibleSelectedOperationType && ParamEditor && (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
index 8fd72a790b38e..85c1deb0ea7e1 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
@@ -48,7 +48,7 @@ describe('FieldIcon', () => {
       <EuiIcon
         className="lnsFieldListPanel__fieldIcon lnsFieldListPanel__fieldIcon--ip"
         color="#7B000B"
-        type="storage"
+        type="ip"
       />
     `);
   });
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
index d68ee0b82f28e..f1e8db04860a7 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
@@ -17,7 +17,7 @@ function getIconForDataType(dataType: string) {
   const icons: Partial<Record<string, UnwrapArray<typeof ICON_TYPES>>> = {
     boolean: 'invert',
     date: 'calendar',
-    ip: 'storage',
+    ip: 'ip',
   };
   return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'empty';
 }
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
index 87ef874dece66..62591bdf1e081 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
@@ -18,6 +18,7 @@ import {
   EuiButtonGroup,
   EuiPopoverFooter,
   EuiPopoverTitle,
+  EuiIconTip,
 } from '@elastic/eui';
 import {
   Chart,
@@ -144,6 +145,7 @@ export function FieldItem(props: FieldItemProps) {
   return (
     <EuiPopover
       id="lnsFieldListPanel__field"
+      className="lnsFieldItem__popoverAnchor"
       display="block"
       container={document.querySelector<HTMLElement>('.application') || undefined}
       button={
@@ -157,7 +159,7 @@ export function FieldItem(props: FieldItemProps) {
         >
           <EuiKeyboardAccessible>
             <div
-              className="lnsFieldItem__info"
+              className={`lnsFieldItem__info ${infoIsOpen ? 'lnsFieldItem__info-isOpen' : ''}`}
               data-test-subj={`lnsFieldListPanelField-${field.name}`}
               onClick={() => {
                 togglePopover();
@@ -167,12 +169,9 @@ export function FieldItem(props: FieldItemProps) {
                   togglePopover();
                 }
               }}
-              title={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
-                defaultMessage: 'Click or Enter for more information about {fieldName}',
-                values: { fieldName: field.name },
-              })}
-              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
-                defaultMessage: 'Click or Enter for more information about {fieldName}',
+              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
+                defaultMessage:
+                  'Click or press Enter for information about {fieldName}. Or, drag field into visualization.',
                 values: { fieldName: field.name },
               })}
             >
@@ -181,6 +180,18 @@ export function FieldItem(props: FieldItemProps) {
               <span className="lnsFieldItem__name" title={field.name}>
                 {wrappableHighlightableFieldName}
               </span>
+
+              <EuiIconTip
+                anchorClassName="lnsFieldItem__infoIcon"
+                content={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
+                  defaultMessage:
+                    'Click for information about {fieldName}. Or, drag field into visualization.',
+                  values: { fieldName: field.name },
+                })}
+                type="iInCircle"
+                color="subdued"
+                size="s"
+              />
             </div>
           </EuiKeyboardAccessible>
         </DragDrop>
@@ -260,7 +271,8 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
   if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) {
     title = (
       <EuiButtonGroup
-        buttonSize="s"
+        className="lnsFieldItem__popoverButtonGroup"
+        buttonSize="compressed"
         isFullWidth
         legend={i18n.translate('xpack.lens.indexPattern.fieldStatsDisplayToggle', {
           defaultMessage: 'Toggle either the',
@@ -268,7 +280,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
         options={[
           {
             label: i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
-              defaultMessage: 'Top Values',
+              defaultMessage: 'Top values',
             }),
             id: 'topValues',
           },
@@ -297,7 +309,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     title = (
       <>
         {i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
-          defaultMessage: 'Top Values',
+          defaultMessage: 'Top values',
         })}
       </>
     );
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
index 7984722363149..841d59b602ee8 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
@@ -1037,7 +1037,7 @@ describe('IndexPattern Data Source suggestions', () => {
               {
                 columnId: 'col2',
                 operation: {
-                  label: 'Date Histogram of timestamp',
+                  label: 'Date histogram of timestamp',
                   dataType: 'date',
                   isBucketed: true,
                   scale: 'interval',
@@ -1113,7 +1113,7 @@ describe('IndexPattern Data Source suggestions', () => {
               {
                 columnId: 'newCol',
                 operation: {
-                  label: 'Date Histogram of timestamp',
+                  label: 'Date histogram of timestamp',
                   dataType: 'date',
                   isBucketed: true,
                   scale: 'interval',
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
index 9558a141ad7a0..ba48a3c2f2032 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
@@ -31,7 +31,7 @@ const FixedEuiRange = (EuiRange as unknown) as React.ComponentType<
 
 function ofName(name: string) {
   return i18n.translate('xpack.lens.indexPattern.dateHistogramOf', {
-    defaultMessage: 'Date Histogram of {name}',
+    defaultMessage: 'Date histogram of {name}',
     values: { name },
   });
 }
@@ -51,7 +51,7 @@ export interface DateHistogramIndexPatternColumn extends FieldBasedIndexPatternC
 export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatternColumn> = {
   type: 'date_histogram',
   displayName: i18n.translate('xpack.lens.indexPattern.dateHistogram', {
-    defaultMessage: 'Date Histogram',
+    defaultMessage: 'Date histogram',
   }),
   getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
     if (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
index fb12910b7517d..7c01a34fca2db 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
@@ -44,7 +44,7 @@ describe('filter_ratio', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Filter Ratio',
+              label: 'Filter ratio',
               dataType: 'number',
               isBucketed: false,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
index 32da61a95beb8..6cbffe661002d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
@@ -18,7 +18,7 @@ import { OperationDefinition } from '.';
 import { BaseIndexPatternColumn } from './column_types';
 
 const filterRatioLabel = i18n.translate('xpack.lens.indexPattern.filterRatio', {
-  defaultMessage: 'Filter Ratio',
+  defaultMessage: 'Filter ratio',
 });
 
 export interface FilterRatioIndexPatternColumn extends BaseIndexPatternColumn {
@@ -35,7 +35,7 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
   type: 'filter_ratio',
   priority: 1,
   displayName: i18n.translate('xpack.lens.indexPattern.filterRatio', {
-    defaultMessage: 'Filter Ratio',
+    defaultMessage: 'Filter ratio',
   }),
   getPossibleOperationForDocument: () => {
     return {
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
index 31f70eb6fb3bb..b26608086bd69 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
@@ -51,7 +51,7 @@ export interface TermsIndexPatternColumn extends FieldBasedIndexPatternColumn {
 export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
   type: 'terms',
   displayName: i18n.translate('xpack.lens.indexPattern.terms', {
-    defaultMessage: 'Top Values',
+    defaultMessage: 'Top values',
   }),
   getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
     if (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
index 736a6f712d346..6307a8f0f68d1 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
@@ -154,7 +154,7 @@ describe('getOperationTypesForField', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Date Histogram of timestamp',
+              label: 'Date histogram of timestamp',
               dataType: 'date',
               isBucketed: true,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
index 9023173ab95df..1b98fa2b30005 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
@@ -367,7 +367,7 @@ describe('state_helpers', () => {
       expect(
         getColumnOrder({
           col1: {
-            label: 'Top Values of category',
+            label: 'Top values of category',
             dataType: 'string',
             isBucketed: true,
 
@@ -392,7 +392,7 @@ describe('state_helpers', () => {
             sourceField: 'bytes',
           },
           col3: {
-            label: 'Date Histogram of timestamp',
+            label: 'Date histogram of timestamp',
             dataType: 'date',
             isBucketed: true,
 
@@ -411,7 +411,7 @@ describe('state_helpers', () => {
       expect(
         getColumnOrder({
           col1: {
-            label: 'Top Values of category',
+            label: 'Top values of category',
             dataType: 'string',
             isBucketed: true,
 
@@ -438,7 +438,7 @@ describe('state_helpers', () => {
             suggestedPriority: 0,
           },
           col3: {
-            label: 'Date Histogram of timestamp',
+            label: 'Date histogram of timestamp',
             dataType: 'date',
             isBucketed: true,