diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 444c976999..0927197bd0 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -74,24 +74,31 @@ function GridGraph(): JSX.Element {
 				};
 			});
 		}
-		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 />;
-				},
-			}));
+
+		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]);
 
 	useEffect(() => {
@@ -217,6 +224,8 @@ function GridGraph(): JSX.Element {
 		return <Spinner height="40vh" size="large" tip="Loading..." />;
 	}
 
+	console.log({ layouts });
+
 	return (
 		<>
 			{saveLayout && (
@@ -255,7 +264,7 @@ function GridGraph(): JSX.Element {
 						<CardContainer
 							isQueryType={isQueryType}
 							isDarkMode={isDarkMode}
-							key={rest.i}
+							key={rest.i + JSON.stringify(widget)}
 							data-grid={rest}
 						>
 							<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>