diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
index df58ca6cf1..dc0945be84 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -5,6 +5,7 @@ import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
 import DashboardReducer from 'types/reducer/dashboards';
 
 import { NewWidgetProps } from '../../index';
@@ -18,6 +19,7 @@ function WidgetGraph({
 	const { dashboards, isQueryFired } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [selectedDashboard] = dashboards;
 	const { search } = useLocation();
 
@@ -31,7 +33,11 @@ function WidgetGraph({
 	const selectedWidget = widgets.find((e) => e.id === widgetId);
 
 	if (selectedWidget === undefined) {
-		return <Card isQueryType={false}>Invalid widget</Card>;
+		return (
+			<Card isDarkMode={isDarkMode} isQueryType={false}>
+				Invalid widget
+			</Card>
+		);
 	}
 
 	const { queryData } = selectedWidget;