diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css
index 9b4d6f653..cad46300b 100644
--- a/Client/src/Components/Fallback/index.css
+++ b/Client/src/Components/Fallback/index.css
@@ -19,6 +19,22 @@
 	font-size: var(--env-var-font-size-medium);
 }
 
+[class*="fallback__"] .background-pattern-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 0;
+
+	width: 100%;
+	max-width: 800px;
+	height: 100%;
+	max-height: 800px;
+
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
 .fallback__status > .MuiStack-root {
 	margin-left: var(--env-var-spacing-2);
 }
diff --git a/Client/src/Components/NetworkErrorFallback/index.jsx b/Client/src/Components/NetworkErrorFallback/index.jsx
new file mode 100644
index 000000000..1039b256b
--- /dev/null
+++ b/Client/src/Components/NetworkErrorFallback/index.jsx
@@ -0,0 +1,85 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
+import Background from "../../assets/Images/background-grid.svg?react";
+import { useSelector } from "react-redux";
+
+/**
+ * Fallback component to display a fallback UI for network errors
+ *
+ * @returns {JSX.Element} The rendered fallback UI.
+ */
+
+const NetworkErrorFallback = () => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+
+	return (
+		<Box
+			className="page-speed"
+			position="relative"
+			border={1}
+			borderColor={theme.palette.primary.lowContrast}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.primary.main}
+			overflow="hidden"
+			sx={{
+				borderStyle: "dashed",
+			}}
+		>
+			<Stack
+				alignItems="center"
+				gap={theme.spacing(20)}
+				sx={{
+					width: "fit-content",
+					margin: "auto",
+					marginTop: "100px",
+				}}
+			>
+				{mode === "light" ? (
+					<Skeleton style={{ zIndex: 1 }} />
+				) : (
+					<SkeletonDark style={{ zIndex: 1 }} />
+				)}
+				<Box
+					sx={{
+						"& svg g g:last-of-type path": {
+							stroke: theme.palette.primary.lowContrast,
+						},
+						position: "absolute",
+						top: "0",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						width: "100%",
+						maxWidth: "800px",
+						height: "100%",
+						maxHeight: "800px",
+						backgroundPosition: "center",
+						backgroundSize: "cover",
+						backgroundRepeat: "no-repeat",
+					}}
+				>
+					<Background style={{ width: "100%" }} />
+				</Box>
+				<Stack
+					gap={theme.spacing(4)}
+					alignItems="center"
+					maxWidth={"300px"}
+					zIndex={1}
+				>
+					<Typography
+						variant="h1"
+						marginY={theme.spacing(4)}
+						color={theme.palette.primary.contrastTextTertiary}
+					>
+						Network error
+					</Typography>
+					<Typography>Please check your connection</Typography>
+				</Stack>
+			</Stack>
+		</Box>
+	);
+};
+
+export default NetworkErrorFallback;