diff --git a/public/components/common/query_utils/__tests__/query_utils.test.tsx b/public/components/common/query_utils/__tests__/query_utils.test.tsx
index 2db7db97d3..3307a53807 100644
--- a/public/components/common/query_utils/__tests__/query_utils.test.tsx
+++ b/public/components/common/query_utils/__tests__/query_utils.test.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import {
+  convertDateTime,
   findMinInterval,
   parsePromQLIntoKeywords,
   preprocessMetricQuery,
@@ -61,6 +62,42 @@ describe('Query Utils', () => {
       expect(minInterval).toEqual(span);
     });
   });
+  describe('convertDateTime', () => {
+    it('converts from absolute timestamp', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time);
+      expect(converted).toEqual('2020-07-21 18:37:44.710000');
+    });
+    it('formats to PPL standard format when default formatting', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time, true, true);
+      expect(converted).toEqual('2020-07-21 18:37:44.710000');
+    });
+    it('formats to specified format when provided', () => {
+      const time = '2020-07-21T18:37:44.710Z';
+      const converted = convertDateTime(time, true, 'YYYY-MMM-DD');
+      expect(converted).toMatch(/2020-jul-21/i);
+    });
+    describe('with moment reference notations', () => {
+      beforeEach(() => {
+        jest.useFakeTimers().setSystemTime(new Date('2020-02-02 12:01:00'));
+      });
+      afterEach(() => {
+        jest.useRealTimers();
+      });
+
+      it('converts named-reference, rounded', () => {
+        const time = 'now-1d/d';
+        const converted = convertDateTime(time, true);
+        expect(converted).toEqual('2020-02-01 00:00:00.000000');
+      });
+      it.skip('converts named-reference, rounded as end of interval', () => {
+        const time = 'now/d';
+        const converted = convertDateTime(time);
+        expect(converted).toEqual('2020-02-02 23:59:59.999999');
+      });
+    });
+  });
   describe('Metric Query processors', () => {
     const defaultQueryMetaData = {
       catalogSourceName: 'my_catalog',
diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
index 73e137bc12..eccd6b9ddd 100644
--- a/public/components/common/query_utils/index.ts
+++ b/public/components/common/query_utils/index.ts
@@ -74,7 +74,9 @@ export const convertDateTime = (
     const epochTime = myDate.getTime() / 1000.0;
     return Math.round(epochTime);
   }
-  if (formatted) return returnTime?.utc()?.format(PPL_DATE_FORMAT);
+  if (formatted === true) return returnTime?.utc()?.format(PPL_DATE_FORMAT);
+  if (formatted) return returnTime?.utc()?.format(formatted);
+
   return returnTime;
 };
 
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.scss b/public/components/event_analytics/explorer/events_views/data_grid.scss
index af387c2cd5..207c76ff46 100644
--- a/public/components/event_analytics/explorer/events_views/data_grid.scss
+++ b/public/components/event_analytics/explorer/events_views/data_grid.scss
@@ -61,7 +61,7 @@
       dt {
         background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
         color: $euiTextColor;
-        padding: ($euiSizeXS / 2) $euiSizeXS;
+        padding: calc($euiSizeXS / 2) $euiSizeXS;
         margin-right: $euiSizeXS;
         word-break: normal;
         border-radius: $euiBorderRadius;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
index 50d7f2081b..e8c496b7cc 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
@@ -72,6 +72,6 @@ exports[`<ParaOutput /> spec renders visualization outputs 1`] = `
   class="euiText euiText--small"
   style="margin-left: 9px;"
 >
-  2020-07-21 18:37:44.710000 - 2020-07-21 18:37:44.710000
+  2020-Jul-21 18:37:44 - 2020-Aug-20 18:37:44
 </div>
 `;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx
index 167daf25a2..539a3b8b13 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx
+++ b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx
@@ -9,6 +9,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { sampleParsedParagraghs1 } from '../../helpers/__tests__/sampleDefaultNotebooks';
 import { ParaOutput } from '../para_output';
+import { uiSettingsService } from '../../../../../../common/utils/core_services';
 
 describe('<ParaOutput /> spec', () => {
   configure({ adapter: new Adapter() });
@@ -48,18 +49,21 @@ describe('<ParaOutput /> spec', () => {
   it('renders visualization outputs', () => {
     const para = sampleParsedParagraghs1[2];
     para.isSelected = true;
+
+    uiSettingsService.get = jest.fn().mockReturnValue('YYYY-MMM-DD HH:mm:ss');
     const setVisInput = jest.fn();
     const utils = render(
       <ParaOutput
         key={para.uniqueId}
         para={para}
         visInput={{
-          timeRange: { from: '2020-07-21T18:37:44.710Z', to: '2020-08-20T18:37:44.710Z' },
+          timeRange: { from: '2020-JUL-21 18:37:44', to: '2020-AUG-20 18:37:44' },
         }}
         setVisInput={setVisInput}
         DashboardContainerByValueRenderer={() => null}
       />
     );
+    expect(utils.container.textContent).toMatch('2020-Jul-21 18:37:44 - 2020-Aug-20 18:37:44');
     expect(utils.container.firstChild).toMatchSnapshot();
   });
 
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index ef3dc4097d..5ca17380c1 100644
--- a/public/components/notebooks/components/paragraph_components/para_output.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -100,9 +100,10 @@ const OutputBody = ({
    */
   const dateFormat = uiSettingsService.get('dateFormat');
   const from = convertDateTime(visInput?.timeRange?.from, true, false);
-  const to = convertDateTime(visInput?.timeRange?.from, false, false);
-  const displayFrom = convertDateTime(visInput?.timeRange?.from, true) || 'Invalid date';
-  const displayTo = convertDateTime(visInput?.timeRange?.from, false) || 'Invalid date';
+  const to = convertDateTime(visInput?.timeRange?.to, false, false);
+  const displayFrom =
+    convertDateTime(visInput?.timeRange?.from, true, dateFormat) || 'Invalid date';
+  const displayTo = convertDateTime(visInput?.timeRange?.to, false, dateFormat) || 'Invalid date';
   if (typeOut !== undefined) {
     switch (typeOut) {
       case 'QUERY':