diff --git a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts
index d04ef3d0cb..a9a7b07a07 100644
--- a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts
+++ b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts
@@ -91,7 +91,15 @@ export const getOptions = (theme: string): ChartOptions => {
 };
 
 export const borderColors = [
-	"rgba(250,174,50,1)",
+	"#00feff",
 	"rgba(227, 74, 51, 1.0)",
+	"rgba(250,174,50,1)",
+	"#058b00",
+	"#a47f00",
 	"rgba(57, 255, 20, 1.0)",
+	"#45a1ff",
+	"#ffe900",
+	"#30e60b",
+	"#8000d7",
+	"#ededf0"
 ];
diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx
index abcb09ca03..3b5a1ff276 100644
--- a/frontend/src/modules/Metrics/ServiceMetrics.tsx
+++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx
@@ -9,10 +9,12 @@ import {
 	getServicesMetrics,
 	metricItem,
 	getTopEndpoints,
+	getDbOverViewMetrics,
 	getExternalMetrics,
 	externalMetricsAvgDurationItem,
 	externalErrCodeMetricsItem,
 	externalMetricsItem,
+	dbOverviewMetricsItem,
 	getExternalAvgDurationMetrics,
 	getExternalErrCodeMetrics,
 	topEndpointListItem,
@@ -30,10 +32,12 @@ const { TabPane } = Tabs;
 
 interface ServicesMetricsProps extends RouteComponentProps<any> {
 	serviceMetrics: metricItem[];
+	dbOverviewMetrics: dbOverviewMetricsItem[];
 	getServicesMetrics: Function;
 	getExternalMetrics: Function;
 	getExternalErrCodeMetrics: Function;
 	getExternalAvgDurationMetrics: Function;
+	getDbOverViewMetrics: Function;
 	externalMetrics: externalMetricsItem[];
 	topEndpointsList: topEndpointListItem[];
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
@@ -51,6 +55,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 		props.getExternalMetrics(servicename, props.globalTime);
 		props.getExternalErrCodeMetrics(servicename, props.globalTime);
 		props.getExternalAvgDurationMetrics(servicename, props.globalTime);
+		props.getDbOverViewMetrics(servicename, props.globalTime);
 	}, [props.globalTime, servicename]);
 
 	const onTracePopupClick = (timestamp: number) => {
@@ -129,9 +134,9 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					<Col span={12}>
 						<Card bodyStyle={{ padding: 10 }}>
 							<ExternalApiGraph
-								title=" External Call Error Rate"
+								title="External Call Error Percentage (%)"
 								keyIdentifier="externalHttpUrl"
-								dataIdentifier="numCalls"
+								dataIdentifier="errorRate"
 								data={props.externalErrCodeMetrics}
 							/>
 						</Card>
@@ -175,6 +180,33 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					</Col>
 				</Row>
 			</TabPane>
+
+			<TabPane tab="Database Calls" key="3">
+				<Row gutter={32} style={{ margin: 20 }}>
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								title="Database Calls RPS"
+								keyIdentifier="dbSystem"
+								dataIdentifier="callRate"
+								data={props.dbOverviewMetrics}
+							/>
+						</Card>
+					</Col>
+
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								label="Average Duration"
+								title="DataBase Calls Avg Duration"
+								dataIdentifier="avgDuration"
+								fnDataIdentifier={(s) => Number(s) / 1000000}
+								data={props.dbOverviewMetrics}
+							/>
+						</Card>
+					</Col>
+				</Row>
+			</TabPane>
 		</Tabs>
 	);
 };
@@ -187,6 +219,7 @@ const mapStateToProps = (
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
 	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	externalMetrics: externalMetricsItem[];
+	dbOverviewMetrics: dbOverviewMetricsItem[];
 	globalTime: GlobalTime;
 } => {
 	return {
@@ -195,6 +228,7 @@ const mapStateToProps = (
 		topEndpointsList: state.topEndpointsList,
 		externalMetrics: state.externalMetrics,
 		globalTime: state.globalTime,
+		dbOverviewMetrics: state.dbOverviewMetrics,
 		externalAvgDurationMetrics: state.externalAvgDurationMetrics,
 	};
 };
@@ -207,5 +241,6 @@ export const ServiceMetrics = withRouter(
 		getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
 		getTopEndpoints: getTopEndpoints,
 		updateTimeInterval: updateTimeInterval,
+		getDbOverViewMetrics: getDbOverViewMetrics,
 	})(_ServiceMetrics),
 );
diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts
index f0bb09ab48..bd35b2415f 100644
--- a/frontend/src/store/actions/metrics.ts
+++ b/frontend/src/store/actions/metrics.ts
@@ -33,9 +33,9 @@ export interface externalMetricsAvgDurationItem {
 }
 
 export interface externalErrCodeMetricsItem {
-	callRate: number;
+	errorRate: number;
 	externalHttpUrl: string;
-	numCalls: number;
+	numErrors: number;
 	timestamp: number;
 }
 export interface topEndpointListItem {
@@ -54,6 +54,14 @@ export interface externalMetricsItem {
 	timestamp: number;
 }
 
+export interface dbOverviewMetricsItem {
+	avgDuration: number;
+	callRate: number;
+	dbSystem: string;
+	numCalls: number;
+	timestamp: number;
+}
+
 export interface customMetricsItem {
 	timestamp: number;
 	value: number;
@@ -81,6 +89,10 @@ export interface getExternalMetricsAction {
 	payload: externalMetricsItem[];
 }
 
+export interface getDbOverViewMetricsAction {
+	type: ActionTypes.getDbOverviewMetrics;
+	payload: dbOverviewMetricsItem[];
+}
 export interface getTopEndpointsAction {
 	type: ActionTypes.getTopEndpoints;
 	payload: topEndpointListItem[];
@@ -106,6 +118,29 @@ export const getServicesList = (globalTime: GlobalTime) => {
 	};
 };
 
+export const getDbOverViewMetrics = (
+	serviceName: string,
+	globalTime: GlobalTime,
+) => {
+	return async (dispatch: Dispatch) => {
+		let request_string =
+			"/service/dbOverview?service=" +
+			serviceName +
+			"&start=" +
+			globalTime.minTime +
+			"&end=" +
+			globalTime.maxTime +
+			"&step=60";
+		const response = await api.get<dbOverviewMetricsItem[]>(
+			apiV1 + request_string,
+		);
+		dispatch<getDbOverViewMetricsAction>({
+			type: ActionTypes.getDbOverviewMetrics,
+			payload: response.data,
+		});
+	};
+};
+
 export const getExternalMetrics = (
 	serviceName: string,
 	globalTime: GlobalTime,
diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts
index b8a32466ba..013a4ff77d 100644
--- a/frontend/src/store/actions/types.ts
+++ b/frontend/src/store/actions/types.ts
@@ -8,6 +8,7 @@ import {
 	getExternalMetricsAction,
 	getTopEndpointsAction,
 	getFilteredTraceMetricsAction,
+	getDbOverViewMetricsAction,
 } from "./metrics";
 import { getUsageDataAction } from "./usage";
 import { updateTimeIntervalAction } from "./global";
@@ -21,6 +22,7 @@ export enum ActionTypes {
 	getServiceMetrics = "GET_SERVICE_METRICS",
 	getAvgDurationMetrics = "GET_AVG_DURATION_METRICS",
 	getErrCodeMetrics = "GET_ERR_CODE_METRICS",
+	getDbOverviewMetrics = "GET_DB_OVERVIEW_METRICS",
 	getExternalMetrics = "GET_EXTERNAL_METRICS",
 	getTopEndpoints = "GET_TOP_ENDPOINTS",
 	getUsageData = "GET_USAGE_DATE",
@@ -41,4 +43,5 @@ export type Action =
 	| getFilteredTraceMetricsAction
 	| getExternalMetricsAction
 	| externalErrCodeMetricsActions
+	| getDbOverViewMetricsAction
 	| externalMetricsAvgDurationAction;
diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts
index d66fb530b5..57abab376c 100644
--- a/frontend/src/store/reducers/index.ts
+++ b/frontend/src/store/reducers/index.ts
@@ -20,6 +20,7 @@ import {
 	externalErrCodeMetricsReducer,
 	serviceTableReducer,
 	topEndpointsReducer,
+	dbOverviewMetricsReducer,
 	externalMetricsReducer,
 	externalAvgDurationMetricsReducer,
 } from "./metrics";
@@ -36,6 +37,7 @@ export interface StoreState {
 	serviceMetrics: metricItem[];
 	topEndpointsList: topEndpointListItem[];
 	externalMetrics: externalMetricsItem[];
+	dbOverviewMetrics: externalMetricsItem[];
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
 	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	usageDate: usageDataItem[];
@@ -50,6 +52,7 @@ const reducers = combineReducers<StoreState>({
 	traceItem: traceItemReducer,
 	servicesList: serviceTableReducer,
 	serviceMetrics: serviceMetricsReducer,
+	dbOverviewMetrics: dbOverviewMetricsReducer,
 	topEndpointsList: topEndpointsReducer,
 	externalAvgDurationMetrics: externalAvgDurationMetricsReducer,
 	externalMetrics: externalMetricsReducer,
diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts
index 65a0568485..f1afd73738 100644
--- a/frontend/src/store/reducers/metrics.ts
+++ b/frontend/src/store/reducers/metrics.ts
@@ -7,6 +7,7 @@ import {
 	externalErrCodeMetricsItem,
 	customMetricsItem,
 	externalMetricsItem,
+	dbOverviewMetricsItem,
 	externalMetricsAvgDurationItem,
 } from "../actions";
 
@@ -125,6 +126,26 @@ export const externalMetricsReducer = (
 	}
 };
 
+export const dbOverviewMetricsReducer = (
+	state: dbOverviewMetricsItem[] = [
+		{
+			avgDuration: 0,
+			callRate: 0,
+			dbSystem: "",
+			numCalls: 0,
+			timestamp: 0,
+		},
+	],
+	action: Action,
+) => {
+	switch (action.type) {
+		case ActionTypes.getDbOverviewMetrics:
+			return action.payload;
+		default:
+			return state;
+	}
+};
+
 export const filteredTraceMetricsReducer = (
 	state: customMetricsItem[] = [{ timestamp: 0, value: 0 }],
 	action: Action,