diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index 2c163c2b05..0cf795b06d 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -23,7 +23,7 @@ import { Widgets } from 'types/api/dashboard/getAll';
 
 import Bar from './Bar';
 import FullView from './FullView';
-import { Modal, FullViewContainer } from './styles';
+import { Modal, FullViewContainer, ErrorContainer } from './styles';
 
 const GridCardGraph = ({
 	widget,
@@ -124,6 +124,38 @@ const GridCardGraph = ({
 		[],
 	);
 
+	const getModals = () => {
+		return (
+			<>
+				<Modal
+					destroyOnClose
+					onCancel={(): void => onToggleModal(setDeletModal)}
+					visible={deleteModal}
+					title="Delete"
+					height="10vh"
+					onOk={onDeleteHandler}
+					centered
+				>
+					<Typography>Are you sure you want to delete this widget</Typography>
+				</Modal>
+
+				<Modal
+					title="View"
+					footer={[]}
+					centered
+					visible={modal}
+					onCancel={(): void => onToggleModal(setModal)}
+					width="85%"
+					destroyOnClose
+				>
+					<FullViewContainer>
+						<FullView name={name + 'expanded'} widget={widget} />
+					</FullViewContainer>
+				</Modal>
+			</>
+		);
+	};
+
 	const onDeleteHandler = useCallback(() => {
 		deleteWidget({ widgetId: widget.id });
 		onToggleModal(setDeletModal);
@@ -131,7 +163,18 @@ const GridCardGraph = ({
 	}, [deleteWidget, widget, onToggleModal, isDeleted]);
 
 	if (state.error) {
-		return <div>{state.errorMessage}</div>;
+		return (
+			<>
+				{getModals()}
+				<Bar
+					onViewFullScreenHandler={(): void => onToggleModal(setModal)}
+					widget={widget}
+					onDeleteHandler={(): void => onToggleModal(setDeletModal)}
+				/>
+
+				<ErrorContainer>{state.errorMessage}</ErrorContainer>
+			</>
+		);
 	}
 
 	if (state.loading === true || state.payload === undefined) {
@@ -146,31 +189,7 @@ const GridCardGraph = ({
 				onDeleteHandler={(): void => onToggleModal(setDeletModal)}
 			/>
 
-			<Modal
-				destroyOnClose
-				onCancel={(): void => onToggleModal(setDeletModal)}
-				visible={deleteModal}
-				title="Delete"
-				height="10vh"
-				onOk={onDeleteHandler}
-				centered
-			>
-				<Typography>Are you sure you want to delete this widget</Typography>
-			</Modal>
-
-			<Modal
-				title="View"
-				footer={[]}
-				centered
-				visible={modal}
-				onCancel={(): void => onToggleModal(setModal)}
-				width="85%"
-				destroyOnClose
-			>
-				<FullViewContainer>
-					<FullView name={name + 'expanded'} widget={widget} />
-				</FullViewContainer>
-			</Modal>
+			{getModals()}
 
 			<GridGraphComponent
 				{...{
diff --git a/frontend/src/container/GridGraphLayout/Graph/styles.ts b/frontend/src/container/GridGraphLayout/Graph/styles.ts
index 61f4c7c9c9..7a5d9f1a62 100644
--- a/frontend/src/container/GridGraphLayout/Graph/styles.ts
+++ b/frontend/src/container/GridGraphLayout/Graph/styles.ts
@@ -15,3 +15,9 @@ export const Modal = styled(ModalComponent)<Props>`
 export const FullViewContainer = styled.div`
 	height: 70vh;
 `;
+
+export const ErrorContainer = styled.div`
+	margin-top: 2rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+`;