diff --git a/client/src/Components/Fallback/index.css b/client/src/Components/Fallback/index.css
index cad46300b..357988b07 100644
--- a/client/src/Components/Fallback/index.css
+++ b/client/src/Components/Fallback/index.css
@@ -1,19 +1,22 @@
 [class*="fallback__"] {
 	width: fit-content;
 	margin: auto;
-	margin-top: 100px;
 }
+
 [class*="fallback__"] h1.MuiTypography-root {
 	font-size: var(--env-var-font-size-large);
 	font-weight: 600;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root,
 [class*="fallback__"] .check {
 	width: max-content;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root {
 	min-height: 34px;
 }
+
 [class*="fallback__"] .check span.MuiTypography-root,
 [class*="fallback__"] button.MuiButtonBase-root {
 	font-size: var(--env-var-font-size-medium);
@@ -35,6 +38,7 @@
 	background-size: cover;
 	background-repeat: no-repeat;
 }
+
 .fallback__status > .MuiStack-root {
 	margin-left: var(--env-var-spacing-2);
 }
diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/Fallback/index.jsx
index b77432d58..e5a212c00 100644
--- a/client/src/Components/Fallback/index.jsx
+++ b/client/src/Components/Fallback/index.jsx
@@ -67,113 +67,135 @@ const Fallback = ({
 			</>
 		);
 	};
-
 	return (
 		<Box
 			position="relative"
-			border={1}
-			borderColor={theme.palette.primary.lowContrast}
-			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.primary.main}
-			overflow="hidden"
 			sx={{
-				borderStyle: "dashed",
-				minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)",
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
 			}}
 		>
-			<Stack
-				className={`fallback__${title?.trim().split(" ")[0]}`}
-				alignItems="center"
-				gap={theme.spacing(20)}
+			<Box
+				border={1}
+				borderColor={theme.palette.primary.lowContrast}
+				borderRadius={theme.shape.borderRadius}
+				backgroundColor={theme.palette.primary.main}
+				overflow="hidden"
+				sx={{
+					display: "flex",
+					borderStyle: "dashed",
+					height: {
+						sm: "50vh",
+						md: "70vh",
+						lg: "60vh",
+						xl: "55vh",
+					},
+					width: {
+						sm: "90%",
+						md: "50%",
+						lg: "40%",
+					},
+					padding: theme.spacing(10),
+				}}
 			>
-				{mode === "light" ? (
-					<Skeleton style={{ zIndex: 1 }} />
-				) : (
-					<SkeletonDark style={{ zIndex: 1 }} />
-				)}
-				<Box
-					className="background-pattern-svg"
-					sx={{
-						"& svg g g:last-of-type path": {
-							stroke: theme.palette.primary.lowContrast,
-						},
-					}}
-				>
-					<Background style={{ width: "100%" }} />
-				</Box>
 				<Stack
-					gap={theme.spacing(4)}
-					maxWidth={"300px"}
-					zIndex={1}
+					className={`fallback__${title?.trim().split(" ")[0]}`}
+					alignItems="center"
+					gap={theme.spacing(20)}
 				>
-					<Typography
-						component="h1"
-						marginY={theme.spacing(4)}
-						color={theme.palette.primary.contrastTextTertiary}
+					{mode === "light" ? (
+						<Skeleton style={{ zIndex: 1 }} />
+					) : (
+						<SkeletonDark style={{ zIndex: 1 }} />
+					)}
+					<Box
+						className="background-pattern-svg"
+						sx={{
+							"& svg g g:last-of-type path": {
+								stroke: theme.palette.primary.lowContrast,
+							},
+						}}
 					>
-						{vowelStart ? "An" : "A"} {title} is used to:
-					</Typography>
-					{checks?.map((check, index) => (
-						<Check
-							text={check}
-							key={`${title.trim().split(" ")[0]}-${index}`}
-							outlined={true}
-						/>
-					))}
-				</Stack>
-				{/* TODO - display a different fallback if user is not an admin*/}
-				{isAdmin && (
-					<>
-						<Button
-							variant="contained"
-							color="accent"
-							sx={{ alignSelf: "center" }}
-							onClick={() => navigate(link)}
+						<Background style={{ width: "100%" }} />
+					</Box>
+					<Stack
+						gap={theme.spacing(4)}
+						maxWidth={theme.spacing(180)}
+						zIndex={1}
+					>
+						<Typography
+							alignSelf="center"
+							component="h1"
+							marginY={theme.spacing(4)}
+							color={theme.palette.primary.contrastTextTertiary}
 						>
-							Let's create your first {title}
-						</Button>
-						{/* Bulk create of uptime monitors */}
-						{title === "uptime monitor" && (
+							{vowelStart ? "An" : "A"} {title} is used to:
+						</Typography>
+						{checks?.map((check, index) => (
+							<Check
+								text={check}
+								key={`${title.trim().split(" ")[0]}-${index}`}
+								outlined={true}
+							/>
+						))}
+					</Stack>
+					{/* TODO - display a different fallback if user is not an admin*/}
+					{isAdmin && (
+						<>
 							<Button
 								variant="contained"
 								color="accent"
 								sx={{ alignSelf: "center" }}
-								onClick={() => navigate("/uptime/bulk-import")}
+								onClick={() => navigate(link)}
 							>
-								{t("bulkImport.fallbackPage")}
+								Let's create your first {title}
 							</Button>
-						)}
-
-						{/* Warning box for PageSpeed monitor */}
-						{title === "pagespeed monitor" && showPageSpeedWarning && (
-							<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
-								<Box
-									sx={{
-										"& .alert.row-stack": {
-											backgroundColor: theme.palette.warningSecondary.main,
-											borderColor: theme.palette.warningSecondary.lowContrast,
-											"& .MuiTypography-root": {
-												color: theme.palette.warningSecondary.contrastText,
-											},
-											"& .MuiBox-root > svg": {
-												color: theme.palette.warningSecondary.contrastText,
-											},
-										},
-									}}
+							{/* Bulk create of uptime monitors */}
+							{title === "uptime monitor" && (
+								<Button
+									variant="contained"
+									color="accent"
+									sx={{ alignSelf: "center" }}
+									onClick={() => navigate("/uptime/bulk-import")}
 								>
-									{settingsData?.pagespeedKeySet === false && (
-										<Alert
-											variant="warning"
-											hasIcon={true}
-											body={renderWarningMessage()}
-										/>
-									)}
+									{t("bulkImport.fallbackPage")}
+								</Button>
+							)}
+
+							{/* Warning box for PageSpeed monitor */}
+							{title === "pagespeed monitor" && showPageSpeedWarning && (
+								<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
+									<Box
+										sx={{
+											"& .alert.row-stack": {
+												backgroundColor: theme.palette.warningSecondary.main,
+												borderColor: theme.palette.warningSecondary.lowContrast,
+												"& .MuiTypography-root": {
+													color: theme.palette.warningSecondary.contrastText,
+												},
+												"& .MuiBox-root > svg": {
+													color: theme.palette.warningSecondary.contrastText,
+												},
+											},
+										}}
+									>
+										{settingsData?.pagespeedKeySet === false && (
+											<Alert
+												variant="warning"
+												hasIcon={true}
+												body={renderWarningMessage()}
+											/>
+										)}
+									</Box>
 								</Box>
-							</Box>
-						)}
-					</>
-				)}
-			</Stack>
+							)}
+						</>
+					)}
+				</Stack>
+			</Box>
 		</Box>
 	);
 };