diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
index 2d7fc3f304..3a0c9fcffb 100644
--- a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
@@ -87,16 +87,20 @@ const transformVerticalTimelineGraph = (data: any[]): any => [
 		return [...Array(count).fill(1), 2];
 	}),
 ];
-const datatest = [
-	{
-		timestamp: 1724941976.194,
-		value: 20,
-	},
-	{
-		timestamp: 1724855576.194,
-		value: 30,
-	},
-];
+
+const datatest: any[] = [];
+const now = Math.floor(Date.now() / 1000); // current timestamp in seconds
+const oneDay = 24 * 60 * 60; // one day in seconds
+
+for (let i = 0; i < 90; i++) {
+	const timestamp = now - i * oneDay;
+	const startOfDay = timestamp - (timestamp % oneDay);
+	datatest.push({
+		timestamp: startOfDay,
+		value: Math.floor(Math.random() * 60) + 1,
+	});
+}
+
 function VerticalTimelineGraph({
 	isDarkMode,
 	width,
diff --git a/frontend/src/lib/uPlotLib/plugins/heatmapPlugin.ts b/frontend/src/lib/uPlotLib/plugins/heatmapPlugin.ts
index d14cb63dbb..d2eb2c09e0 100644
--- a/frontend/src/lib/uPlotLib/plugins/heatmapPlugin.ts
+++ b/frontend/src/lib/uPlotLib/plugins/heatmapPlugin.ts
@@ -1,10 +1,11 @@
+import { Color } from '@signozhq/design-tokens';
 import uPlot from 'uplot';
 
 const bucketIncr = 5;
 
 function heatmapPlugin(): uPlot.Plugin {
 	function fillStyle(count: number): string {
-		const colors = ['#E5484D', '#25E192'];
+		const colors = [Color.BG_CHERRY_500, Color.BG_SLATE_400];
 		return colors[count - 1];
 	}