diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/chartHeader.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/chartHeader.tsx
deleted file mode 100644
index 1fafd08c8..000000000
--- a/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/chartHeader.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import * as moment from 'moment-timezone';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
-import { useScaleContext } from './scaleContext';
-import { TimeZone } from './helpers';
-
-interface StyleProps {
-  chartWidth: number;
-  labelInterval: number;
-}
-
-const useStyles = makeStyles((_theme) => ({
-  chartHeader: (props: StyleProps) => ({
-    height: 41,
-    display: 'flex',
-    alignItems: 'center',
-    width: `${props.chartWidth}px`,
-  }),
-  taskDurationsLabelItem: (props: StyleProps) => ({
-    fontSize: 12,
-    fontFamily: 'Open Sans',
-    fontWeight: 'bold',
-    color: COLOR_SPECTRUM.gray40.color,
-    paddingLeft: 10,
-    width: `${props.labelInterval}px`,
-  }),
-}));
-
-interface HeaderProps extends StyleProps {
-  chartTimezone: string;
-  totalDurationSec: number;
-  startedAt: Date;
-}
-
-export const ChartHeader = (props: HeaderProps) => {
-  const styles = useStyles(props);
-
-  const { chartInterval: chartTimeInterval, setMaxValue } = useScaleContext();
-  const { startedAt, chartTimezone, totalDurationSec } = props;
-
-  React.useEffect(() => {
-    setMaxValue(props.totalDurationSec);
-  }, [props.totalDurationSec, setMaxValue]);
-
-  const labels = React.useMemo(() => {
-    const len = Math.ceil(totalDurationSec / chartTimeInterval);
-    const lbs = len > 0 ? new Array(len).fill('') : [];
-    return lbs.map((_, idx) => {
-      const time = moment.utc(new Date(startedAt.getTime() + idx * chartTimeInterval * 1000));
-      return chartTimezone === TimeZone.UTC
-        ? time.format('hh:mm:ss A')
-        : time.local().format('hh:mm:ss A');
-    });
-  }, [chartTimezone, startedAt, chartTimeInterval, totalDurationSec]);
-
-  return (
-    <div className={styles.chartHeader}>
-      {labels.map((label) => {
-        return (
-          <div className={styles.taskDurationsLabelItem} key={label}>
-            {label}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/taskNames.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/taskNames.tsx
deleted file mode 100644
index f2d9f4533..000000000
--- a/packages/zapp/console/src/components/Executions/ExecutionDetails/Timeline/taskNames.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
-
-import { RowExpander } from 'components/Executions/Tables/RowExpander';
-import { getNodeTemplateName } from 'components/WorkflowGraph/utils';
-import { dNode } from 'models/Graph/types';
-import { NodeExecutionName } from './NodeExecutionName';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  taskNamesList: {
-    overflowY: 'scroll',
-    flex: 1,
-  },
-  namesContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'left',
-    padding: '0 10px',
-    height: 56,
-    width: 256,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    whiteSpace: 'nowrap',
-  },
-  namesContainerExpander: {
-    display: 'flex',
-    marginTop: 'auto',
-    marginBottom: 'auto',
-  },
-  namesContainerBody: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    whiteSpace: 'nowrap',
-    height: '100%',
-    overflow: 'hidden',
-  },
-  displayName: {
-    marginTop: 4,
-    textOverflow: 'ellipsis',
-    width: '100%',
-    overflow: 'hidden',
-  },
-  leaf: {
-    width: 30,
-  },
-}));
-
-interface TaskNamesProps {
-  nodes: dNode[];
-  onScroll: () => void;
-  onToggle: (id: string, scopeId: string, level: number) => void;
-}
-
-export const TaskNames = React.forwardRef<HTMLDivElement, TaskNamesProps>((props, ref) => {
-  const { nodes, onScroll, onToggle } = props;
-  const styles = useStyles();
-
-  return (
-    <div className={styles.taskNamesList} ref={ref} onScroll={onScroll}>
-      {nodes.map((node) => {
-        const templateName = getNodeTemplateName(node);
-        const nodeLevel = node?.level ?? 0;
-        return (
-          <div
-            className={styles.namesContainer}
-            key={`level=${nodeLevel}-id=${node.id}-name=${node.scopedId}`}
-            style={{ paddingLeft: nodeLevel * 16 }}
-          >
-            <div className={styles.namesContainerExpander}>
-              {node.nodes?.length ? (
-                <RowExpander
-                  expanded={node.expanded || false}
-                  onClick={() => onToggle(node.id, node.scopedId, nodeLevel)}
-                />
-              ) : (
-                <div className={styles.leaf} />
-              )}
-            </div>
-
-            <div className={styles.namesContainerBody}>
-              <NodeExecutionName
-                name={node.name}
-                execution={node.execution!} // some nodes don't have associated execution
-              />
-              <Typography variant="subtitle1" color="textSecondary" className={styles.displayName}>
-                {templateName}
-              </Typography>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-});