diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index 164753104..976440f7d 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/Client/src/Components/Fallback/index.jsx
@@ -1,7 +1,8 @@
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import background from "../../assets/Images/background_pattern_decorative.png";
import Button from "../Button";
import Check from "../Check/Check";
import { useNavigate } from "react-router-dom";
@@ -28,8 +29,12 @@ const Fallback = ({ title, checks, link = "/" }) => {
alignItems="center"
gap={theme.gap.xl}
>
-
-
+
+
+
A {title} is used to:
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index a62016a60..2798bd292 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -32,3 +32,28 @@
min-height: calc(100vh - var(--env-var-spacing-2) * 2);
flex: 1;
}
+
+.home-layout > div:has(> [class*="fallback__"]) {
+ border: solid 1px var(--env-var-color-6);
+ border-radius: var(--env-var-radius-1);
+ border-style: dashed;
+ background-color: var(--env-var-color-8);
+ overflow: hidden;
+ position: relative;
+}
+.home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -33%);
+ z-index: 0;
+
+ width: 100%;
+ max-width: 800px;
+ height: 100%;
+ max-height: 800px;
+
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+}