diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index d4b7ca756f..d907f1bf38 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -1,36 +1,26 @@
-import React, { useState, useMemo } from 'react';
-import { isEqual } from 'lodash-es';
-import styles from './style.module.css';
-import { useMeasure } from 'react-use';
-import { toFixed } from 'utils/toFixed';
-import {
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'container/TraceDetail/utils';
+import { INTERVAL_UNITS } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useMeasure } from 'react-use';
+
+import styles from './style.module.css';
 import { Interval } from './types';
-import { getIntervalSpread, getIntervals } from './utils';
-interface TimelineProps {
-	traceMetaData: object;
-	globalTraceMetadata: object;
-	intervalUnit: object;
-	setIntervalUnit: Function;
-}
+import { getIntervals, getIntervalSpread } from './utils';
+
+const Timeline_Height = 22;
+const Timeline_H_Spacing = 0;
+
 const Timeline = ({
 	traceMetaData,
 	globalTraceMetadata,
-	intervalUnit,
 	setIntervalUnit,
 }: TimelineProps) => {
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const { isDarkMode } = useThemeMode();
 
-	const Timeline_Height = 22;
-	const Timeline_H_Spacing = 0;
-
 	const [intervals, setIntervals] = useState<Interval[] | null>(null);
 
-	useMemo(() => {
+	useEffect(() => {
 		const {
 			baseInterval,
 			baseSpread,
@@ -41,16 +31,15 @@ const Timeline = ({
 		});
 
 		let intervalUnit = INTERVAL_UNITS[0];
-		for (const idx in INTERVAL_UNITS) {
+		for (let idx = 0; idx < INTERVAL_UNITS.length; idx++) {
 			const standard_interval = INTERVAL_UNITS[idx];
 			if (baseSpread * standard_interval.multiplier < 1) {
-				intervalUnit = INTERVAL_UNITS[idx - 1];
+				if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1];
 				break;
 			}
 		}
 
-		debugger;
-		intervalUnit = intervalUnit || INTERVAL_UNITS[0]
+		intervalUnit = intervalUnit || INTERVAL_UNITS[0];
 		setIntervals(
 			getIntervals({
 				baseInterval,
@@ -60,7 +49,7 @@ const Timeline = ({
 			}),
 		);
 		setIntervalUnit(intervalUnit);
-	}, [traceMetaData, globalTraceMetadata]);
+	}, [traceMetaData, globalTraceMetadata, setIntervalUnit]);
 
 	return (
 		<div ref={ref} style={{ flex: 1, overflow: 'inherit' }}>
@@ -81,9 +70,10 @@ const Timeline = ({
 				{intervals &&
 					intervals.map((interval, index) => (
 						<g
-							transform={`translate(${Timeline_H_Spacing +
+							transform={`translate(${
+								Timeline_H_Spacing +
 								(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
-								},0)`}
+							},0)`}
 							className={styles['timeline-tick']}
 							key={interval.label + interval.percentage + index}
 						>
@@ -103,4 +93,11 @@ const Timeline = ({
 	);
 };
 
+interface TimelineProps {
+	traceMetaData: object;
+	globalTraceMetadata: object;
+	intervalUnit: object;
+	setIntervalUnit: Function;
+}
+
 export default Timeline;
diff --git a/frontend/src/container/Timeline/utils.ts b/frontend/src/container/Timeline/utils.ts
index b710fc19a0..a1edf40817 100644
--- a/frontend/src/container/Timeline/utils.ts
+++ b/frontend/src/container/Timeline/utils.ts
@@ -1,9 +1,11 @@
-import { isEqual } from 'lodash-es';
-import { toFixed } from 'utils/toFixed';
 import {
 	INTERVAL_UNITS,
 	resolveTimeFromInterval,
 } from 'container/TraceDetail/utils';
+import { isEqual } from 'lodash-es';
+import { toFixed } from 'utils/toFixed';
+
+import { Interval } from './types';
 
 export const getIntervalSpread = ({
 	localTraceMetaData,
@@ -24,7 +26,7 @@ export const getIntervalSpread = ({
 
 	const MIN_INTERVALS = 5;
 	const baseSpread = localSpread;
-	let intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0;
+	const intervalSpread = (baseSpread / MIN_INTERVALS) * 1.0;
 	const integerPartString = intervalSpread.toString().split('.')[0];
 	const integerPartLength = integerPartString.length;
 	const intervalSpreadNormalized =
@@ -46,7 +48,6 @@ export const getIntervals = ({
 	intervalSpreadNormalized,
 	intervalUnit,
 }) => {
-	debugger
 	const intervals: Interval[] = [
 		{
 			label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${
@@ -69,7 +70,6 @@ export const getIntervals = ({
 			tempBaseSpread -= intervalSpreadNormalized;
 		}
 		elapsedIntervals = interval_time;
-		debugger;
 		const interval: Interval = {
 			label: `${toFixed(
 				resolveTimeFromInterval(interval_time + baseInterval, intervalUnit),