diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx
index a8ebedbb..fb9bf8cc 100644
--- a/src/pages/Stream/components/EventTimeLineGraph.tsx
+++ b/src/pages/Stream/components/EventTimeLineGraph.tsx
@@ -11,44 +11,71 @@ import { useFilterStore, filterStoreReducers } from '../providers/FilterProvider
 const { setTimeRange } = logsStoreReducers;
 
 const { parseQuery } = filterStoreReducers;
-const getCompactType = (interval: number) => {
+
+type CompactInterval = 'minute' | 'day' | 'hour' | 'quarter-hour' | 'half-hour' | 'month';
+
+const getCompactType = (interval: number): CompactInterval => {
 	const totalMinutes = interval / (1000 * 60);
 	if (totalMinutes <= 60) {
-		// 1 hour
+		// upto 1 hour
 		return 'minute';
+	} else if (totalMinutes <= 300) {
+		// upto 5 hours
+		return 'quarter-hour';
+	} else if (totalMinutes <= 1440) {
+		// upto 5 hours
+		return 'half-hour';
 	} else if (totalMinutes <= 4320) {
-		// 3 days
+		// upto 3 days
 		return 'hour';
-	} else {
+	} else if (totalMinutes <= 259200) {
 		return 'day';
+	} else {
+		return 'month'
 	}
 };
 
-const getStartOfTs = (time: Date, compactType: 'day' | 'hour' | 'minute'): Date => {
+const getStartOfTs = (time: Date, compactType: CompactInterval): Date => {
 	if (compactType === 'minute') {
 		return time;
 	} else if (compactType === 'hour') {
 		return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours());
-	} else {
+	} else if (compactType === 'quarter-hour') {
+		const roundOff = 1000 * 60 * 15;
+		return new Date(Math.floor(time.getTime() / roundOff) * roundOff);
+	} else if (compactType === 'half-hour') {
+		const roundOff = 1000 * 60 * 30;
+		return new Date(Math.floor(time.getTime() / roundOff) * roundOff);
+	} else if (compactType === 'day') {
 		return new Date(time.getFullYear(), time.getMonth(), time.getDate());
+	} else {
+		return new Date(time.getFullYear(), time.getMonth());
 	}
 };
 
-const getEndOfTs = (time: Date, compactType: 'day' | 'hour' | 'minute'): Date => {
+const getEndOfTs = (time: Date, compactType: CompactInterval): Date => {
 	if (compactType === 'minute') {
 		return time;
 	} else if (compactType === 'hour') {
 		return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours() + 1);
-	} else {
+	} else if (compactType === 'quarter-hour') {
+		const roundOff = 1000 * 60 * 15;
+		return new Date(Math.round(time.getTime() / roundOff) * roundOff);
+	} else if (compactType === 'half-hour') {
+		const roundOff = 1000 * 60 * 30;
+		return new Date(Math.round(time.getTime() / roundOff) * roundOff);
+	} else if (compactType === 'day') {
 		return new Date(time.getFullYear(), time.getMonth(), time.getDate() + 1);
+	} else {
+		return new Date(time.getFullYear(), time.getMonth() + 1);
 	}
 };
 
-const getAllIntervals = (start: Date, end: Date, compactType: 'minute' | 'hour' | 'day'): Date[] => {
+const getAllIntervals = (start: Date, end: Date, compactType: CompactInterval): Date[] => {
 	const result = [];
 	const current = new Date(start);
 
-	const increment = (date: Date, type: 'minute' | 'hour' | 'day') => {
+	const increment = (date: Date, type: CompactInterval) => {
 		switch (type) {
 			case 'minute':
 				date.setMinutes(date.getMinutes() + 1);
@@ -59,6 +86,15 @@ const getAllIntervals = (start: Date, end: Date, compactType: 'minute' | 'hour'
 			case 'day':
 				date.setDate(date.getDate() + 1);
 				break;
+			case 'quarter-hour':
+				date.setMinutes(date.getMinutes() + 15);
+				break;
+			case 'half-hour':
+				date.setMinutes(date.getMinutes() + 30);
+				break;
+			case 'month':
+				date.setMonth(date.getMonth() + 1);
+				break;
 		}
 	};
 
@@ -74,7 +110,7 @@ const getModifiedTimeRange = (
 	startTime: Date,
 	endTime: Date,
 	interval: number,
-): { modifiedStartTime: Date; modifiedEndTime: Date; compactType: 'day' | 'minute' | 'hour' } => {
+): { modifiedStartTime: Date; modifiedEndTime: Date; compactType: CompactInterval } => {
 	const compactType = getCompactType(interval);
 	const modifiedStartTime = getStartOfTs(startTime, compactType);
 	const modifiedEndTime = getEndOfTs(endTime, compactType);
@@ -85,13 +121,16 @@ const compactTypeIntervalMap = {
 	minute: '1 minute',
 	hour: '1 hour',
 	day: '24 hour',
+	'quarter-hour': '15 minute',
+	'half-hour': '30 minute',
+	month: '1 month'
 };
 
 const generateCountQuery = (
 	streamName: string,
 	startTime: Date,
 	endTime: Date,
-	compactType: 'day' | 'minute' | 'hour',
+	compactType: CompactInterval,
 	whereClause: string,
 ) => {
 	const range = compactTypeIntervalMap[compactType];
@@ -102,7 +141,7 @@ const NoDataView = () => {
 	return (
 		<Stack style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
 			<Stack className={classes.noDataContainer}>
-				<Text className={classes.noDataText}>No new events in the last 30 minutes.</Text>
+				<Text className={classes.noDataText}>No new events in the selected time range.</Text>
 			</Stack>
 		</Stack>
 	);
@@ -122,8 +161,8 @@ const calcAverage = (data: GraphRecord[]) => {
 	return parseInt(Math.abs(total / data.length).toFixed(0));
 };
 
-// date_trunc removes tz info
-// filling data empty values where there is no rec
+// date_bin removes tz info
+// filling data with empty values where there is no rec
 const parseGraphData = (data: GraphRecord[] = [], avg: number, startTime: Date, endTime: Date, interval: number) => {
 	if (!Array.isArray(data)) return [];
 	const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval);
@@ -162,11 +201,20 @@ function ChartTooltip({ payload }: ChartTooltipProps) {
 	const { minute, aboveAvgPercent, events, compactType } = payload[0]?.payload || {};
 	const isAboveAvg = aboveAvgPercent > 0;
 	const startTime = dayjs(minute).utc(true);
-	const endTime = dayjs(minute).add(1, compactType);
+	const endTime = (() => {
+		if (compactType === 'half-hour') {
+			return dayjs(minute).add(30, 'minute');
+		} else if (compactType === 'quarter-hour') {
+			return dayjs(minute).add(15, 'minute');
+		} else {
+			return dayjs(minute).add(1, compactType);
+		}
+	})();
+
 	return (
 		<Paper px="md" py="sm" withBorder shadow="md" radius="md">
 			<Text fw={600} mb={5}>
-				{`${startTime.format('DD MMM HH:mm A')} - ${endTime.format('DD MMM HH:mm A')}`}
+				{`${startTime.format('DD MMM YY HH:mm A')} - ${endTime.format('DD MMM YY HH:mm A')}`}
 			</Text>
 			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 				<Text>Events</Text>
@@ -254,6 +302,8 @@ const EventTimeLineGraph = () => {
 						areaChartProps={{ onClick: setTimeRangeFromGraph, style: { cursor: 'pointer' } }}
 						gridAxis="xy"
 						fillOpacity={0.5}
+						strokeWidth={1.25}
+						dotProps={{ strokeWidth: 1, r: 2.5 }}
 					/>
 				) : (
 					<NoDataView />