diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 0927197bd0..c50a2fd4ea 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -28,7 +28,7 @@ function GridGraph(): JSX.Element {
 	const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
-	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
+
 	const [saveLayoutState, setSaveLayoutState] = useState<State>({
 		loading: false,
 		error: false,
@@ -47,6 +47,8 @@ function GridGraph(): JSX.Element {
 	const isDeleted = useRef(false);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
+
 	const [saveLayout] = useComponentPermission(['save_layout'], role);
 
 	const getPreLayouts: () => LayoutProps[] = useCallback(() => {
@@ -74,32 +76,25 @@ function GridGraph(): JSX.Element {
 				};
 			});
 		}
-
-		return widgets.map((widget, index) => {
-			const allLayouts = data?.layout;
-			const lastLayout = (data?.layout || [])[(allLayouts?.length || 0) - 1];
-
-			const currentLayout = (allLayouts || [])[index] || {
-				h: lastLayout.h,
-				i: (lastLayout.i + 1).toString(),
-				w: lastLayout.w,
-				x: (lastLayout.x % 2) * 6,
-				y: lastLayout.y,
-			};
-
-			return {
-				...currentLayout,
-				Component: (): JSX.Element => (
-					<Graph
-						name={widget.id + index}
-						isDeleted={isDeleted}
-						widget={widget}
-						yAxisUnit={widget.yAxisUnit}
-					/>
-				),
-			};
-		});
-	}, [widgets, data.layout]);
+		return data.layout
+			.filter((_, index) => widgets[index])
+			.map((e, index) => ({
+				...e,
+				Component: (): JSX.Element => {
+					if (widgets[index]) {
+						return (
+							<Graph
+								name={e.i + index}
+								isDeleted={isDeleted}
+								widget={widgets[index]}
+								yAxisUnit={widgets[index].yAxisUnit}
+							/>
+						);
+					}
+					return <div />;
+				},
+			}));
+	}, [widgets, data?.layout]);
 
 	useEffect(() => {
 		if (
@@ -224,8 +219,6 @@ function GridGraph(): JSX.Element {
 		return <Spinner height="40vh" size="large" tip="Loading..." />;
 	}
 
-	console.log({ layouts });
-
 	return (
 		<>
 			{saveLayout && (
@@ -264,7 +257,7 @@ function GridGraph(): JSX.Element {
 						<CardContainer
 							isQueryType={isQueryType}
 							isDarkMode={isDarkMode}
-							key={rest.i + JSON.stringify(widget)}
+							key={rest.i}
 							data-grid={rest}
 						>
 							<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>