diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.test.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_agent_marks.test.ts
similarity index 66%
rename from x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.test.ts
rename to x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_agent_marks.test.ts
index ce0390e4385f2..784c5fbebf3c2 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.test.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_agent_marks.test.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
-import { getAgentMarks } from './get_agent_marks';
+import { Transaction } from '../../../../../../../../typings/es_schemas/ui/Transaction';
+import { getAgentMarks } from '../get_agent_marks';
 
 describe('getAgentMarks', () => {
   it('should sort the marks by time', () => {
@@ -21,9 +21,24 @@ describe('getAgentMarks', () => {
       }
     } as any;
     expect(getAgentMarks(transaction)).toEqual([
-      { name: 'timeToFirstByte', offset: 10000, docType: 'agentMark' },
-      { name: 'domInteractive', offset: 117000, docType: 'agentMark' },
-      { name: 'domComplete', offset: 118000, docType: 'agentMark' }
+      {
+        id: 'timeToFirstByte',
+        offset: 10000,
+        type: 'agentMark',
+        verticalLine: true
+      },
+      {
+        id: 'domInteractive',
+        offset: 117000,
+        type: 'agentMark',
+        verticalLine: true
+      },
+      {
+        id: 'domComplete',
+        offset: 118000,
+        type: 'agentMark',
+        verticalLine: true
+      }
     ]);
   });
 
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
new file mode 100644
index 0000000000000..df48e65fd1f75
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IWaterfallItem } from '../../Waterfall/waterfall_helpers/waterfall_helpers';
+import { getErrorMarks } from '../get_error_marks';
+
+describe('getErrorMarks', () => {
+  describe('returns empty array', () => {
+    it('when items are missing', () => {
+      expect(getErrorMarks([])).toEqual([]);
+    });
+    it('when any error is available', () => {
+      const items = [
+        { docType: 'span' },
+        { docType: 'transaction' }
+      ] as IWaterfallItem[];
+      expect(getErrorMarks(items)).toEqual([]);
+    });
+  });
+
+  it('returns error marks', () => {
+    const items = [
+      {
+        docType: 'error',
+        offset: 10,
+        skew: 5,
+        custom: { error: { id: 1 } },
+        serviceColor: 'blue'
+      } as unknown,
+      { docType: 'transaction' },
+      {
+        docType: 'error',
+        offset: 50,
+        skew: 0,
+        custom: { error: { id: 2 } },
+        serviceColor: 'red'
+      } as unknown
+    ] as IWaterfallItem[];
+    expect(getErrorMarks(items)).toEqual([
+      {
+        type: 'errorMark',
+        offset: 15,
+        verticalLine: false,
+        id: 1,
+        error: { error: { id: 1 } },
+        serviceColor: 'blue'
+      },
+      {
+        type: 'errorMark',
+        offset: 50,
+        verticalLine: false,
+        id: 2,
+        error: { error: { id: 2 } },
+        serviceColor: 'red'
+      }
+    ]);
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
similarity index 62%
rename from x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.ts
rename to x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
index 7c1b2e1c70291..7798d716cb219 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
@@ -5,12 +5,12 @@
  */
 
 import { sortBy } from 'lodash';
-import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
+import { Transaction } from '../../../../../../../typings/es_schemas/ui/Transaction';
+import { Mark } from '.';
 
-export interface AgentMark {
-  docType: 'agentMark';
-  name: string;
-  offset: number;
+// Extends Mark without adding new properties to it.
+export interface AgentMark extends Mark {
+  type: 'agentMark';
 }
 
 export function getAgentMarks(transaction?: Transaction): AgentMark[] {
@@ -21,9 +21,10 @@ export function getAgentMarks(transaction?: Transaction): AgentMark[] {
 
   return sortBy(
     Object.entries(agent).map(([name, ms]) => ({
-      docType: 'agentMark',
-      name,
-      offset: ms * 1000
+      type: 'agentMark',
+      id: name,
+      offset: ms * 1000,
+      verticalLine: true
     })),
     'offset'
   );
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
new file mode 100644
index 0000000000000..83e9e21e3a58a
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { isEmpty } from 'lodash';
+import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/ErrorRaw';
+import {
+  IWaterfallItem,
+  IWaterfallError
+} from '../Waterfall/waterfall_helpers/waterfall_helpers';
+import { Mark } from '.';
+
+export interface ErrorMark extends Mark {
+  type: 'errorMark';
+  error: ErrorRaw;
+  serviceColor?: string;
+}
+
+export const getErrorMarks = (items: IWaterfallItem[]): ErrorMark[] => {
+  if (isEmpty(items)) {
+    return [];
+  }
+
+  return (items.filter(
+    item => item.docType === 'error'
+  ) as IWaterfallError[]).map(error => ({
+    type: 'errorMark',
+    offset: error.offset + error.skew,
+    verticalLine: false,
+    id: error.doc.error.id,
+    error: error.doc,
+    serviceColor: error.serviceColor
+  }));
+};
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
new file mode 100644
index 0000000000000..52f811f5c3969
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface Mark {
+  type: string;
+  offset: number;
+  verticalLine: boolean;
+  id: string;
+}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
index e720b81be9f6f..426088f0bb36a 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
@@ -31,13 +31,13 @@ export const WaterfallFlyout: React.FC<Props> = ({
     case 'span':
       const parentTransaction =
         currentItem.parent?.docType === 'transaction'
-          ? currentItem.parent?.custom
+          ? currentItem.parent?.doc
           : undefined;
 
       return (
         <SpanFlyout
           totalDuration={waterfall.duration}
-          span={currentItem.custom}
+          span={currentItem.doc}
           parentTransaction={parentTransaction}
           onClose={() => toggleFlyout({ location })}
         />
@@ -45,7 +45,7 @@ export const WaterfallFlyout: React.FC<Props> = ({
     case 'transaction':
       return (
         <TransactionFlyout
-          transaction={currentItem.custom}
+          transaction={currentItem.doc}
           onClose={() => toggleFlyout({ location })}
           rootTransactionDuration={
             waterfall.rootTransaction?.transaction.duration.us
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index 11899d529abe3..791c5f36c1fd8 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -18,7 +18,7 @@ import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
 import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';
 
-type ItemType = 'transaction' | 'span' | 'error' | 'agentMark';
+type ItemType = 'transaction' | 'span' | 'error';
 
 interface IContainerStyleProps {
   type: ItemType;
@@ -92,7 +92,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
   switch (item.docType) {
     case 'span': {
       // icon for database spans
-      const isDbType = item.custom.span.type.startsWith('db');
+      const isDbType = item.doc.span.type.startsWith('db');
       if (isDbType) {
         return <EuiIcon type="database" />;
       }
@@ -102,7 +102,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
     }
     case 'transaction': {
       // icon for RUM agent transactions
-      if (isRumAgentName(item.custom.agent.name)) {
+      if (isRumAgentName(item.doc.agent.name)) {
         return <EuiIcon type="globe" />;
       }
 
@@ -125,7 +125,7 @@ const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
   if (item?.docType === 'span') {
     return (
       <EuiToolTip
-        content={`${item.custom.span.subtype}.${item.custom.span.action}`}
+        content={`${item.doc.span.subtype}.${item.doc.span.action}`}
       >
         <>{children}</>
       </EuiToolTip>
@@ -145,8 +145,8 @@ function Duration({ item }: { item: IWaterfallItem }) {
 function HttpStatusCode({ item }: { item: IWaterfallItem }) {
   // http status code for transactions of type 'request'
   const httpStatusCode =
-    item.docType === 'transaction' && item.custom.transaction.type === 'request'
-      ? item.custom.transaction.result
+    item.docType === 'transaction' && item.doc.transaction.type === 'request'
+      ? item.doc.transaction.result
       : undefined;
 
   if (!httpStatusCode) {
@@ -159,11 +159,11 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
 function NameLabel({ item }: { item: IWaterfallItem }) {
   switch (item.docType) {
     case 'span':
-      return <EuiText size="s">{item.custom.span.name}</EuiText>;
+      return <EuiText size="s">{item.doc.span.name}</EuiText>;
     case 'transaction':
       return (
         <EuiTitle size="xxs">
-          <h5>{item.custom.transaction.name}</h5>
+          <h5>{item.doc.transaction.name}</h5>
         </EuiTitle>
       );
     default:
@@ -218,10 +218,10 @@ export function WaterfallItem({
         <NameLabel item={item} />
         {errorCount > 0 && item.docType === 'transaction' ? (
           <ErrorOverviewLink
-            serviceName={item.custom.service.name}
+            serviceName={item.doc.service.name}
             query={{
               kuery: encodeURIComponent(
-                `${TRACE_ID} : "${item.custom.trace.id}" and transaction.id : "${item.custom.transaction.id}"`
+                `${TRACE_ID} : "${item.doc.trace.id}" and transaction.id : "${item.doc.transaction.id}"`
               )
             }}
             color="danger"
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
index 3b612ccad48b6..abc54408827c6 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -16,7 +16,8 @@ import { history } from '../../../../../../utils/history';
 // @ts-ignore
 import Timeline from '../../../../../shared/charts/Timeline';
 import { fromQuery, toQuery } from '../../../../../shared/Links/url_helpers';
-import { getAgentMarks } from '../get_agent_marks';
+import { getAgentMarks } from '../Marks/get_agent_marks';
+import { getErrorMarks } from '../Marks/get_error_marks';
 import { WaterfallFlyout } from './WaterfallFlyout';
 import { WaterfallItem } from './WaterfallItem';
 import {
@@ -48,10 +49,8 @@ const toggleFlyout = ({
     ...location,
     search: fromQuery({
       ...toQuery(location.search),
-      ...{
-        flyoutDetailTab: undefined,
-        waterfallItemId: item ? String(item.id) : undefined
-      }
+      flyoutDetailTab: undefined,
+      waterfallItemId: item?.id
     })
   });
 };
@@ -80,8 +79,8 @@ export const Waterfall: React.FC<Props> = ({
 
   const { serviceColors, duration } = waterfall;
 
-  const agentMarkers = getAgentMarks(waterfall.entryTransaction);
-  const errorMarkers = waterfall.items.filter(item => item.docType === 'error');
+  const agentMarks = getAgentMarks(waterfall.entryTransaction);
+  const errorMarks = getErrorMarks(waterfall.items);
 
   const renderWaterfallItem = (item: IWaterfallItem) => {
     if (item.docType === 'error') {
@@ -90,14 +89,14 @@ export const Waterfall: React.FC<Props> = ({
 
     const errorCount =
       item.docType === 'transaction'
-        ? waterfall.errorsPerTransaction[item.custom.transaction.id]
+        ? waterfall.errorsPerTransaction[item.doc.transaction.id]
         : 0;
 
     return (
       <WaterfallItem
         key={item.id}
         timelineMargins={TIMELINE_MARGINS}
-        color={serviceColors[item.custom.service.name]}
+        color={serviceColors[item.doc.service.name]}
         item={item}
         totalDuration={duration}
         isSelected={item.id === waterfallItemId}
@@ -122,7 +121,7 @@ export const Waterfall: React.FC<Props> = ({
       )}
       <StickyContainer>
         <Timeline
-          marks={[...agentMarkers, ...errorMarkers]}
+          marks={[...agentMarks, ...errorMarks]}
           duration={duration}
           height={waterfallHeight}
           margins={TIMELINE_MARGINS}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
index 80b82cdc28d71..426842bc02f51 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
@@ -168,7 +168,7 @@ describe('waterfall_helpers', () => {
       const items: IWaterfallItem[] = [
         {
           docType: 'span',
-          custom: {
+          doc: {
             parent: { id: 'c' },
             service: { name: 'opbeans-java' },
             transaction: {
@@ -188,7 +188,7 @@ describe('waterfall_helpers', () => {
         },
         {
           docType: 'span',
-          custom: {
+          doc: {
             parent: { id: 'a' },
             service: { name: 'opbeans-java' },
             transaction: {
@@ -208,7 +208,7 @@ describe('waterfall_helpers', () => {
         },
         {
           docType: 'span',
-          custom: {
+          doc: {
             parent: { id: 'a' },
             service: { name: 'opbeans-java' },
             transaction: {
@@ -228,7 +228,7 @@ describe('waterfall_helpers', () => {
         },
         {
           docType: 'transaction',
-          custom: {
+          doc: {
             parent: { id: 'b' },
             service: { name: 'opbeans-java' },
             timestamp: { us: 1536763736369000 },
@@ -242,7 +242,7 @@ describe('waterfall_helpers', () => {
         },
         {
           docType: 'transaction',
-          custom: {
+          doc: {
             service: { name: 'opbeans-java' },
             timestamp: { us: 1536763736366000 },
             transaction: {
@@ -273,7 +273,7 @@ describe('waterfall_helpers', () => {
         {
           docType: 'transaction',
           id: 'a',
-          custom: ({
+          doc: ({
             transaction: { id: 'a' },
             timestamp: { us: 10 }
           } as unknown) as Transaction
@@ -282,7 +282,7 @@ describe('waterfall_helpers', () => {
           docType: 'span',
           id: 'b',
           parentId: 'a',
-          custom: ({
+          doc: ({
             span: {
               id: 'b'
             },
@@ -306,7 +306,7 @@ describe('waterfall_helpers', () => {
     it('should adjust when child starts before parent', () => {
       const child = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 0 }
         },
         duration: 50
@@ -314,7 +314,7 @@ describe('waterfall_helpers', () => {
 
       const parent = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 100 }
         },
         duration: 100,
@@ -327,7 +327,7 @@ describe('waterfall_helpers', () => {
     it('should not adjust when child starts after parent has ended', () => {
       const child = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 250 }
         },
         duration: 50
@@ -335,7 +335,7 @@ describe('waterfall_helpers', () => {
 
       const parent = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 100 }
         },
         duration: 100,
@@ -348,7 +348,7 @@ describe('waterfall_helpers', () => {
     it('should not adjust when child starts within parent duration', () => {
       const child = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 150 }
         },
         duration: 50
@@ -356,7 +356,7 @@ describe('waterfall_helpers', () => {
 
       const parent = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 100 }
         },
         duration: 100,
@@ -373,7 +373,7 @@ describe('waterfall_helpers', () => {
 
       const parent = {
         docType: 'span',
-        custom: {
+        doc: {
           timestamp: { us: 100 }
         },
         duration: 100,
@@ -390,7 +390,7 @@ describe('waterfall_helpers', () => {
 
       const parent = {
         docType: 'transaction',
-        custom: {
+        doc: {
           timestamp: { us: 100 }
         },
         duration: 100,
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
index 4ae6c6b98672d..2b6af0e709f08 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
@@ -40,7 +40,7 @@ export interface IWaterfall {
 
 interface IWaterfallItemBase<T, U> {
   docType: U;
-  custom: T;
+  doc: T;
 
   serviceColor?: string;
 
@@ -80,7 +80,7 @@ export type IWaterfallItem =
 function getTransactionItem(transaction: Transaction): IWaterfallTransaction {
   return {
     docType: 'transaction',
-    custom: transaction,
+    doc: transaction,
     id: transaction.transaction.id,
     parentId: transaction.parent?.id,
     duration: transaction.transaction.duration.us,
@@ -92,7 +92,7 @@ function getTransactionItem(transaction: Transaction): IWaterfallTransaction {
 function getSpanItem(span: Span): IWaterfallSpan {
   return {
     docType: 'span',
-    custom: span,
+    doc: span,
     id: span.span.id,
     parentId: span.parent?.id,
     duration: span.span.duration.us,
@@ -101,15 +101,19 @@ function getSpanItem(span: Span): IWaterfallSpan {
   };
 }
 
-function getErrorItem(error: APMError): IWaterfallError {
+function getErrorItem(
+  error: APMError,
+  serviceColors: IServiceColors
+): IWaterfallError {
   return {
     docType: 'error',
-    custom: error,
+    doc: error,
     id: error.error.id,
     parentId: error.parent?.id,
     offset: 0,
     skew: 0,
-    duration: 0
+    duration: 0,
+    serviceColor: serviceColors[error.service.name]
   };
 }
 
@@ -127,10 +131,10 @@ export function getClockSkew(
       return parentItem.skew;
     // transaction is the inital entry in a service. Calculate skew for this, and it will be propogated to all child spans
     case 'transaction': {
-      const parentStart = parentItem.custom.timestamp.us + parentItem.skew;
+      const parentStart = parentItem.doc.timestamp.us + parentItem.skew;
 
       // determine if child starts before the parent
-      const offsetStart = parentStart - item.custom.timestamp.us;
+      const offsetStart = parentStart - item.doc.timestamp.us;
       if (offsetStart > 0) {
         const latency = Math.max(parentItem.duration - item.duration, 0) / 2;
         return offsetStart + latency;
@@ -149,7 +153,7 @@ export function getOrderedWaterfallItems(
   if (!entryWaterfallTransaction) {
     return [];
   }
-  const entryTimestamp = entryWaterfallTransaction.custom.timestamp.us;
+  const entryTimestamp = entryWaterfallTransaction.doc.timestamp.us;
   const visitedWaterfallItemSet = new Set();
 
   function getSortedChildren(
@@ -168,7 +172,7 @@ export function getOrderedWaterfallItems(
 
     item.parent = parentItem;
     // get offset from the beginning of trace
-    item.offset = item.custom.timestamp.us - entryTimestamp;
+    item.offset = item.doc.timestamp.us - entryTimestamp;
     // move the item to the right if it starts before its parent
     item.skew = getClockSkew(item, parentItem);
 
@@ -184,14 +188,14 @@ export function getOrderedWaterfallItems(
 function getRootTransaction(childrenByParentId: IWaterfallGroup) {
   const item = first(childrenByParentId.root);
   if (item && item.docType === 'transaction') {
-    return item.custom;
+    return item.doc;
   }
 }
 
 export type IServiceColors = Record<string, string>;
 
-function getServiceColors(waterfallItems: IWaterfallItem[]) {
-  const services = uniq(waterfallItems.map(item => item.custom.service.name));
+function getServiceColors(traceItems: TraceAPIResponse['trace']['items']) {
+  const services = uniq(traceItems.map(item => item.service.name));
 
   const assignedColors = [
     theme.euiColorVis1,
@@ -212,7 +216,10 @@ const getWaterfallDuration = (waterfallItems: IWaterfallItem[]) =>
     0
   );
 
-const getWaterfallItems = (items: TraceAPIResponse['trace']['items']) =>
+const getWaterfallItems = (
+  items: TraceAPIResponse['trace']['items'],
+  serviceColors: IServiceColors
+) =>
   items.map(item => {
     const docType = item.processor.event;
     switch (docType) {
@@ -221,7 +228,7 @@ const getWaterfallItems = (items: TraceAPIResponse['trace']['items']) =>
       case 'transaction':
         return getTransactionItem(item as Transaction);
       case 'error':
-        return getErrorItem(item as APMError);
+        return getErrorItem(item as APMError, serviceColors);
     }
   });
 
@@ -250,7 +257,12 @@ export function getWaterfall(
     };
   }
 
-  const waterfallItems: IWaterfallItem[] = getWaterfallItems(trace.items);
+  const serviceColors = getServiceColors(trace.items);
+
+  const waterfallItems: IWaterfallItem[] = getWaterfallItems(
+    trace.items,
+    serviceColors
+  );
 
   const childrenByParentId = getChildrenGroupedByParentId(waterfallItems);
 
@@ -266,19 +278,8 @@ export function getWaterfall(
 
   const rootTransaction = getRootTransaction(childrenByParentId);
   const duration = getWaterfallDuration(items);
-  const serviceColors = getServiceColors(items);
 
-  const entryTransaction = entryWaterfallTransaction?.custom;
-
-  const waterfallErrors = items.filter(
-    item => item.docType === 'error'
-  ) as IWaterfallError[];
-
-  // Add the service color into the error waterfall item
-  waterfallErrors.map(error => {
-    error.serviceColor = serviceColors[error.custom.service.name];
-    return error;
-  });
+  const entryTransaction = entryWaterfallTransaction?.doc;
 
   return {
     entryTransaction,
@@ -286,7 +287,7 @@ export function getWaterfall(
     duration,
     items,
     errorsPerTransaction,
-    errorsCount: waterfallErrors.length,
+    errorsCount: items.filter(item => item.docType === 'error').length,
     serviceColors
   };
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
index 0082c11909fab..ffdbfe6cce7ec 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { px, units } from '../../../../../style/variables';
 import { asDuration } from '../../../../../utils/formatters';
 import { Legend } from '../../Legend';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks';
+import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 const NameContainer = styled.div`
   border-bottom: 1px solid ${theme.euiColorMediumShade};
@@ -31,11 +31,11 @@ export const AgentMarker: React.FC<Props> = ({ mark }) => {
   return (
     <>
       <EuiToolTip
-        id={mark.name}
+        id={mark.id}
         position="top"
         content={
           <div>
-            <NameContainer>{mark.name}</NameContainer>
+            <NameContainer>{mark.id}</NameContainer>
             <TimeContainer>{asDuration(mark.offset)}</TimeContainer>
           </div>
         }
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
index 9195186dd09b3..51368a4fb946d 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
@@ -15,12 +15,12 @@ import {
 import { useUrlParams } from '../../../../../hooks/useUrlParams';
 import { px, unit, units } from '../../../../../style/variables';
 import { asDuration } from '../../../../../utils/formatters';
-import { IWaterfallError } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 import { ErrorDetailLink } from '../../../Links/apm/ErrorDetailLink';
 import { Legend, Shape } from '../../Legend';
 
 interface Props {
-  mark: IWaterfallError;
+  mark: ErrorMark;
 }
 
 const Popover = styled.div`
@@ -57,7 +57,7 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
     />
   );
 
-  const error = mark.custom;
+  const { error } = mark;
 
   const { rangeTo, rangeFrom } = urlParams;
   const query = {
@@ -78,7 +78,7 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
     >
       <Popover>
         <TimeLegend
-          text={asDuration(mark.offset + mark.skew)}
+          text={asDuration(mark.offset)}
           indicator={() => (
             <div style={{ marginRight: px(units.quarter) }}>@</div>
           )}
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx
index 036263f6d2ba4..718bbc5e38419 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx
@@ -7,13 +7,14 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { AgentMarker } from '../AgentMarker';
-import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks';
+import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 describe('AgentMarker', () => {
   const mark = {
-    name: 'agent',
+    id: 'agent',
     offset: 1000,
-    docType: 'agentMark'
+    type: 'agentMark',
+    verticalLine: true
   } as AgentMark;
   it('renders', () => {
     const component = shallow(<AgentMarker mark={mark} />);
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/ErrorMarker.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/ErrorMarker.test.tsx
index 1a65185023a02..020ce63eff1fd 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/ErrorMarker.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/ErrorMarker.test.tsx
@@ -7,22 +7,22 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { ErrorMarker } from '../ErrorMarker';
-import { IWaterfallError } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { ErrorMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 describe('ErrorMarker', () => {
   const mark = {
-    id: '123',
-    custom: {
+    id: 'agent',
+    offset: 10000,
+    type: 'errorMark',
+    verticalLine: true,
+    error: {
       trace: { id: '123' },
       transaction: { id: '456' },
       error: { grouping_key: '123' },
       service: { name: 'bar' }
     },
-    serviceColor: '#fff',
-    offset: 10000,
-    skew: 0,
-    docType: 'error'
-  } as IWaterfallError;
+    serviceColor: '#fff'
+  } as ErrorMark;
   it('renders', () => {
     const component = shallow(<ErrorMarker mark={mark} />);
     expect(component).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/Marker.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/Marker.test.tsx
index 9bbe0f30e7e5b..34ff24fea0986 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/Marker.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/Marker.test.tsx
@@ -7,15 +7,16 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { Marker } from '../';
-import { IWaterfallError } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
-import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks';
+import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 describe('Marker', () => {
   it('renders agent marker', () => {
     const mark = {
-      name: 'agent',
+      id: 'agent',
       offset: 1000,
-      docType: 'agentMark'
+      type: 'agentMark',
+      verticalLine: true
     } as AgentMark;
     const component = shallow(<Marker mark={mark} x={10} />);
     expect(component).toMatchSnapshot();
@@ -23,17 +24,18 @@ describe('Marker', () => {
 
   it('renders error marker', () => {
     const mark = {
-      id: '123',
-      custom: {
+      id: 'agent',
+      offset: 1000,
+      type: 'errorMark',
+      verticalLine: true,
+      error: {
         trace: { id: '123' },
         transaction: { id: '456' },
         error: { grouping_key: '123' },
         service: { name: 'bar' }
       },
-      serviceColor: '#fff',
-      offset: 10000,
-      docType: 'error'
-    } as IWaterfallError;
+      serviceColor: '#fff'
+    } as ErrorMark;
     const component = shallow(<Marker mark={mark} x={10} />);
     expect(component).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/__snapshots__/Marker.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/__snapshots__/Marker.test.tsx.snap
index 7a1cd6d22e327..f108eb7ebf3ea 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/__snapshots__/Marker.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/__snapshots__/Marker.test.tsx.snap
@@ -11,9 +11,10 @@ exports[`Marker renders agent marker 1`] = `
   <AgentMarker
     mark={
       Object {
-        "docType": "agentMark",
-        "name": "agent",
+        "id": "agent",
         "offset": 1000,
+        "type": "agentMark",
+        "verticalLine": true,
       }
     }
   />
@@ -31,7 +32,7 @@ exports[`Marker renders error marker 1`] = `
   <ErrorMarker
     mark={
       Object {
-        "custom": Object {
+        "error": Object {
           "error": Object {
             "grouping_key": "123",
           },
@@ -45,10 +46,11 @@ exports[`Marker renders error marker 1`] = `
             "id": "456",
           },
         },
-        "docType": "error",
-        "id": "123",
-        "offset": 10000,
+        "id": "agent",
+        "offset": 1000,
         "serviceColor": "#fff",
+        "type": "errorMark",
+        "verticalLine": true,
       }
     }
   />
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
index 4714f4181a685..03124952c3f88 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
@@ -9,11 +9,11 @@ import styled from 'styled-components';
 import { px } from '../../../../../style/variables';
 import { AgentMarker } from './AgentMarker';
 import { ErrorMarker } from './ErrorMarker';
-import { IWaterfallError } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/get_agent_marks';
+import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 interface Props {
-  mark: IWaterfallError | AgentMark;
+  mark: ErrorMark | AgentMark;
   x: number;
 }
 
@@ -26,7 +26,7 @@ export const Marker: React.FC<Props> = ({ mark, x }) => {
   const legendWidth = 11;
   return (
     <MarkerContainer style={{ left: px(x - legendWidth / 2) }}>
-      {mark.docType === 'error' ? (
+      {mark.type === 'errorMark' ? (
         <ErrorMarker mark={mark} />
       ) : (
         <AgentMarker mark={mark} />
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
index 10baffa6fceb8..40df82b4cf1e0 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
@@ -83,11 +83,7 @@ function TimelineAxis({ plotValues, marks, topTraceDuration }) {
               )}
 
               {marks.map(mark => (
-                <Marker
-                  key={mark.name || mark.custom.id}
-                  mark={mark}
-                  x={xScale(mark.offset + (mark.skew || 0))}
-                />
+                <Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
               ))}
             </XYPlot>
           </div>
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js
index 05a7db8fcc8fc..baf3a26cb6cbf 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js
@@ -21,7 +21,7 @@ class VerticalLines extends PureComponent {
     } = this.props.plotValues;
 
     const markTimes = marks
-      .filter(mark => mark.docType === 'agentMark')
+      .filter(mark => mark.verticalLine)
       .map(({ offset }) => offset);
 
     return (
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js
index 6387e57b33b08..5428dd8317f64 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js
@@ -31,19 +31,22 @@ describe('Timeline', () => {
       animation: null,
       marks: [
         {
-          name: 'timeToFirstByte',
+          id: 'timeToFirstByte',
           offset: 100000,
-          docType: 'agentMark'
+          type: 'agentMark',
+          verticalLine: true
         },
         {
-          name: 'domInteractive',
+          id: 'domInteractive',
           offset: 110000,
-          docType: 'agentMark'
+          type: 'agentMark',
+          verticalLine: true
         },
         {
-          name: 'domComplete',
+          id: 'domComplete',
           offset: 190000,
-          docType: 'agentMark'
+          type: 'agentMark',
+          verticalLine: true
         }
       ]
     };