diff --git a/client/src/Components/Fallback/FallbackBackground.jsx b/client/src/Components/Fallback/FallbackBackground.jsx
index 29214d6bb..8767837dc 100644
--- a/client/src/Components/Fallback/FallbackBackground.jsx
+++ b/client/src/Components/Fallback/FallbackBackground.jsx
@@ -3,28 +3,25 @@ import Box from "@mui/material/Box";
 import Background from "../../assets/Images/background-grid.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import OutputAnimation from "../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif";
 import { useSelector } from "react-redux";
 const FallbackBackground = () => {
 	const theme = useTheme();
 	const mode = useSelector((state) => state.ui.mode);
 	return (
 		<>
-			{mode === "light" ? (
-				<Box
-					component="img"
-					src={OutputAnimation}
-					Background="transparent"
-					alt="Loading animation"
-					sx={{
-						zIndex: 1,
-						border: "none",
-						borderRadius: theme.spacing(8),
-						width: "100%",
-					}}
-				/>
-			) : (
-				<SkeletonDark style={{ zIndex: 1 }} />
-			)}
+			<Box
+				component="img"
+				src={mode === "light" ? OutputAnimation : DarkmodeOutput}
+				Background="transparent"
+				alt="Loading animation"
+				sx={{
+					zIndex: 1,
+					border: "none",
+					borderRadius: theme.spacing(8),
+					width: "100%",
+				}}
+			/>
 			<Box
 				className="background-pattern-svg"
 				sx={{
diff --git a/client/src/assets/Animations/darkmodeOutput.gif b/client/src/assets/Animations/darkmodeOutput.gif
new file mode 100644
index 000000000..7629e30b4
Binary files /dev/null and b/client/src/assets/Animations/darkmodeOutput.gif differ