diff --git a/client/src/Components/ConfigBox/index.jsx b/client/src/Components/ConfigBox/index.jsx
index 44ae38472..e26e49e8d 100644
--- a/client/src/Components/ConfigBox/index.jsx
+++ b/client/src/Components/ConfigBox/index.jsx
@@ -4,15 +4,14 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	display: "flex",
 	flexDirection: "row",
 	justifyContent: "space-between",
-	gap: theme.spacing(20),
 	backgroundColor: theme.palette.primary.main,
 	border: 1,
 	borderStyle: "solid",
 	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: theme.spacing(2),
 	"& > *": {
-		paddingTop: theme.spacing(12),
-		paddingBottom: theme.spacing(18),
+		paddingTop: theme.spacing(15),
+		paddingBottom: theme.spacing(15),
 	},
 	"& > div:first-of-type": {
 		flex: 0.7,
@@ -25,7 +24,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	"& > div:last-of-type": {
 		flex: 1,
 		paddingRight: theme.spacing(20),
-		paddingLeft: theme.spacing(18),
+		paddingLeft: theme.spacing(20),
 	},
 	"& h1, & h2": {
 		color: theme.palette.primary.contrastTextSecondary,
diff --git a/client/src/Components/Inputs/FieldWrapper/index.jsx b/client/src/Components/Inputs/FieldWrapper/index.jsx
new file mode 100644
index 000000000..cc5061af8
--- /dev/null
+++ b/client/src/Components/Inputs/FieldWrapper/index.jsx
@@ -0,0 +1,51 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+
+const DEFAULT_GAP = 6;
+const FieldWrapper = ({
+	label,
+	children,
+	gap,
+	labelMb,
+	labelFontWeight = 500,
+	labelVariant = "h3",
+	labelSx = {},
+	sx = {},
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			gap={gap ?? theme.spacing(DEFAULT_GAP)}
+			sx={sx}
+		>
+			{label && (
+				<Typography
+					component={labelVariant}
+					color={theme.palette.primary.contrastTextSecondary}
+					fontWeight={labelFontWeight}
+					sx={{
+						...(labelMb !== undefined && { mb: theme.spacing(labelMb) }),
+						...labelSx,
+					}}
+				>
+					{label}
+				</Typography>
+			)}
+			{children}
+		</Stack>
+	);
+};
+
+FieldWrapper.propTypes = {
+	label: PropTypes.node,
+	children: PropTypes.node.isRequired,
+	gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+	labelMb: PropTypes.number,
+	labelFontWeight: PropTypes.number,
+	labelVariant: PropTypes.string,
+	labelSx: PropTypes.object,
+	sx: PropTypes.object,
+};
+
+export default FieldWrapper;
diff --git a/client/src/Components/Inputs/Radio/index.jsx b/client/src/Components/Inputs/Radio/index.jsx
index 646b38e93..4c687de1e 100644
--- a/client/src/Components/Inputs/Radio/index.jsx
+++ b/client/src/Components/Inputs/Radio/index.jsx
@@ -24,7 +24,17 @@ import "./index.css";
  * @returns {JSX.Element} - The rendered Radio component.
  */
 
-const Radio = ({ name, checked, value, id, size, title, desc, onChange }) => {
+const Radio = ({
+	name,
+	checked,
+	value,
+	id,
+	size,
+	title,
+	desc,
+	onChange,
+	labelSpacing,
+}) => {
 	const theme = useTheme();
 
 	return (
@@ -53,7 +63,14 @@ const Radio = ({ name, checked, value, id, size, title, desc, onChange }) => {
 			onChange={onChange}
 			label={
 				<>
-					<Typography component="p">{title}</Typography>
+					<Typography
+						component="p"
+						mb={
+							labelSpacing !== undefined ? theme.spacing(labelSpacing) : theme.spacing(2)
+						}
+					>
+						{title}
+					</Typography>
 					<Typography
 						component="h6"
 						mt={theme.spacing(1)}
diff --git a/client/src/Components/Inputs/Search/index.jsx b/client/src/Components/Inputs/Search/index.jsx
index 4624b2cba..6c1d3e9a1 100644
--- a/client/src/Components/Inputs/Search/index.jsx
+++ b/client/src/Components/Inputs/Search/index.jsx
@@ -12,6 +12,7 @@ import { useTheme } from "@emotion/react";
 import SearchIcon from "../../../assets/icons/search.svg?react";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import FieldWrapper from "../FieldWrapper";
 
 /**
  * Search component using Material UI's Autocomplete.
@@ -49,7 +50,7 @@ const SearchAdornment = () => {
 	);
 };
 
-//TODO keep search state inside of component
+//TODO keep search state inside of component.
 const Search = ({
 	label,
 	id,
@@ -68,6 +69,12 @@ const Search = ({
 	startAdornment,
 	endAdornment,
 	onBlur,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
 }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -139,15 +146,17 @@ const Search = ({
 			getOptionLabel={(option) => option[filteredBy]}
 			isOptionEqualToValue={(option, value) => option._id === value._id} // Compare by unique identifier
 			renderInput={(params) => (
-				<Stack>
-					<Typography
-						component="h3"
-						fontSize={"var(--env-var-font-size-medium)"}
-						color={theme.palette.primary.contrastTextSecondary}
-						fontWeight={500}
-					>
-						{label}
-					</Typography>
+				<FieldWrapper
+					label={label}
+					labelMb={labelMb}
+					labelVariant={labelVariant}
+					labelFontWeight={labelFontWeight}
+					labelSx={labelSx}
+					gap={gap}
+					sx={{
+						...sx,
+					}}
+				>
 					<TextField
 						{...params}
 						error={Boolean(error)}
@@ -175,7 +184,7 @@ const Search = ({
 							{error}
 						</Typography>
 					)}
-				</Stack>
+				</FieldWrapper>
 			)}
 			filterOptions={(options, { inputValue }) => {
 				if (inputValue.trim() === "" && multiple && isAdorned) {
diff --git a/client/src/Components/Inputs/Select/index.jsx b/client/src/Components/Inputs/Select/index.jsx
index 679a5b3b5..a438b6bb2 100644
--- a/client/src/Components/Inputs/Select/index.jsx
+++ b/client/src/Components/Inputs/Select/index.jsx
@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import FieldWrapper from "../FieldWrapper";
 
 import "./index.css";
 
@@ -50,8 +51,14 @@ const Select = ({
 	onBlur,
 	sx,
 	name = "",
-	labelControlSpacing = 2,
+	labelControlSpacing = 6,
 	maxWidth,
+	//FieldWrapper's props
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	fieldWrapperSx = {},
 }) => {
 	const theme = useTheme();
 	const itemStyles = {
@@ -69,20 +76,17 @@ const Select = ({
 	};
 
 	return (
-		<Stack
-			gap={theme.spacing(labelControlSpacing)}
-			className="select-wrapper"
+		<FieldWrapper
+			label={label}
+			labelMb={labelMb}
+			labelVariant={labelVariant}
+			labelFontWeight={labelFontWeight}
+			labelSx={labelSx}
+			gap={labelControlSpacing}
+			sx={{
+				...fieldWrapperSx,
+			}}
 		>
-			{label && (
-				<Typography
-					component="h3"
-					color={theme.palette.primary.contrastTextSecondary}
-					fontWeight={500}
-					fontSize={13}
-				>
-					{label}
-				</Typography>
-			)}
 			<MuiSelect
 				className="select-component"
 				value={value}
@@ -107,6 +111,13 @@ const Select = ({
 					"& svg path": {
 						fill: theme.palette.primary.contrastTextTertiary,
 					},
+					"& .MuiSelect-select": {
+						padding: "0 13px",
+						minHeight: "34px",
+						display: "flex",
+						alignItems: "center",
+						lineHeight: 1,
+					},
 					...sx,
 				}}
 				renderValue={(selected) => {
@@ -151,7 +162,7 @@ const Select = ({
 					</MenuItem>
 				))}
 			</MuiSelect>
-		</Stack>
+		</FieldWrapper>
 	);
 };
 
diff --git a/client/src/Components/Inputs/TextInput/index.jsx b/client/src/Components/Inputs/TextInput/index.jsx
index bb2df5d21..469791704 100644
--- a/client/src/Components/Inputs/TextInput/index.jsx
+++ b/client/src/Components/Inputs/TextInput/index.jsx
@@ -2,6 +2,7 @@ import { Stack, TextField, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { forwardRef, useState, cloneElement } from "react";
 import PropTypes from "prop-types";
+import FieldWrapper from "../FieldWrapper";
 
 const getSx = (theme, type, maxWidth) => {
 	const sx = {
@@ -85,31 +86,43 @@ const TextInput = forwardRef(
 			marginLeft,
 			disabled = false,
 			hidden = false,
+			//FieldWrapper's props
+			gap,
+			labelMb,
+			labelFontWeight,
+			labelVariant,
+			labelSx = {},
+			sx = {},
 		},
 		ref
 	) => {
 		const [fieldType, setFieldType] = useState(type);
 		const theme = useTheme();
+		const labelContent = label && (
+			<>
+				{label}
+				{isRequired && <Required />}
+				{isOptional && <Optional optionalLabel={optionalLabel} />}
+			</>
+		);
 		return (
-			<Stack
-				flex={flex}
-				display={hidden ? "none" : ""}
-				marginTop={marginTop}
-				marginRight={marginRight}
-				marginBottom={marginBottom}
-				marginLeft={marginLeft}
+			<FieldWrapper
+				label={labelContent}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					flex,
+					display: hidden ? "none" : "",
+					mt: marginTop,
+					mr: marginRight,
+					mb: marginBottom,
+					ml: marginLeft,
+					...sx,
+				}}
 			>
-				<Typography
-					component="h3"
-					fontSize={"var(--env-var-font-size-medium)"}
-					color={theme.palette.primary.contrastTextSecondary}
-					fontWeight={500}
-					mb={theme.spacing(2)}
-				>
-					{label}
-					{isRequired && <Required />}
-					{isOptional && <Optional optionalLabel={optionalLabel} />}
-				</Typography>
 				<TextField
 					id={id}
 					name={name}
@@ -132,7 +145,7 @@ const TextInput = forwardRef(
 					}}
 					disabled={disabled}
 				/>
-			</Stack>
+			</FieldWrapper>
 		);
 	}
 );
diff --git a/client/src/Components/NotificationConfig/index.jsx b/client/src/Components/NotificationConfig/index.jsx
index d3707eae4..c37889eff 100644
--- a/client/src/Components/NotificationConfig/index.jsx
+++ b/client/src/Components/NotificationConfig/index.jsx
@@ -10,7 +10,18 @@ import { useState, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
 
-const NotificationConfig = ({ notifications, setMonitor, setNotifications }) => {
+const NotificationConfig = ({
+	notifications,
+	setMonitor,
+	setNotifications,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	sx = {},
+}) => {
 	// Local state
 	const [notificationsSearch, setNotificationsSearch] = useState("");
 	const [selectedNotifications, setSelectedNotifications] = useState([]);
@@ -66,6 +77,14 @@ const NotificationConfig = ({ notifications, setMonitor, setNotifications }) =>
 				handleChange={(value) => {
 					handleSearch(value);
 				}}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					...sx,
+				}}
 			/>
 			<Stack
 				flex={1}
diff --git a/client/src/Pages/Infrastructure/Create/Components/CustomThreshold/index.jsx b/client/src/Pages/Infrastructure/Create/Components/CustomThreshold/index.jsx
index d91e899c5..865698f44 100644
--- a/client/src/Pages/Infrastructure/Create/Components/CustomThreshold/index.jsx
+++ b/client/src/Pages/Infrastructure/Create/Components/CustomThreshold/index.jsx
@@ -62,14 +62,15 @@ export const CustomThreshold = ({
 	const theme = useTheme();
 	return (
 		<Stack
-			direction={"row"}
-			sx={{
-				width: "50%",
-				justifyContent: "space-between",
-				flexWrap: "wrap",
-			}}
+			direction={{ sm: "column", md: "row" }}
+			spacing={theme.spacing(2)}
 		>
-			<Box>
+			<Box
+				sx={{
+					width: { md: "45%", lg: "25%", xl: "20%" },
+				}}
+				justifyContent="flex-start"
+			>
 				<Checkbox
 					id={checkboxId}
 					name={checkboxName}
@@ -81,8 +82,10 @@ export const CustomThreshold = ({
 			<Stack
 				direction={"row"}
 				sx={{
-					justifyContent: "flex-end",
+					justifyContent: "flex-start",
 				}}
+				alignItems="center"
+				spacing={theme.spacing(4)}
 			>
 				<TextInput
 					maxWidth="var(--env-var-width-4)"
diff --git a/client/src/Pages/Infrastructure/Create/index.jsx b/client/src/Pages/Infrastructure/Create/index.jsx
index bcdf09785..0800bb500 100644
--- a/client/src/Pages/Infrastructure/Create/index.jsx
+++ b/client/src/Pages/Infrastructure/Create/index.jsx
@@ -25,6 +25,7 @@ import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
 import { createToast } from "../../../Utils/toastUtils";
 import Select from "../../../Components/Inputs/Select";
 import { CustomThreshold } from "./Components/CustomThreshold";
+import FieldWrapper from "../../../Components/Inputs/FieldWrapper";
 
 const SELECT_VALUES = [
 	{ _id: 0.25, name: "15 seconds" },
@@ -283,7 +284,7 @@ const CreateInfrastructureMonitor = () => {
 							/>
 						</Typography>
 					</Stack>
-					<Stack gap={theme.spacing(15)}>
+					<Stack gap={theme.spacing(8)}>
 						<TextInput
 							type="url"
 							id="url"
@@ -299,8 +300,10 @@ const CreateInfrastructureMonitor = () => {
 							disabled={!isCreate}
 						/>
 						{isCreate && (
-							<Box>
-								<Typography component="p">{t("infrastructureProtocol")}</Typography>
+							<FieldWrapper
+								label={t("infrastructureProtocol")}
+								labelVariant="p"
+							>
 								<ButtonGroup>
 									<Button
 										variant="group"
@@ -317,7 +320,7 @@ const CreateInfrastructureMonitor = () => {
 										{t("http")}
 									</Button>
 								</ButtonGroup>
-							</Box>
+							</FieldWrapper>
 						)}
 						<TextInput
 							type="text"
diff --git a/client/src/Pages/Settings/SettingsEmail.jsx b/client/src/Pages/Settings/SettingsEmail.jsx
index 5897ee36d..1f86b1984 100644
--- a/client/src/Pages/Settings/SettingsEmail.jsx
+++ b/client/src/Pages/Settings/SettingsEmail.jsx
@@ -117,8 +117,8 @@ const SettingsEmail = ({
 			<Box>
 				<Stack gap={theme.spacing(10)}>
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelHost")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelHost")}
 							name="systemEmailHost"
 							placeholder="smtp.gmail.com"
 							value={systemEmailHost}
@@ -126,8 +126,8 @@ const SettingsEmail = ({
 						/>
 					</Box>
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelPort")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelPort")}
 							name="systemEmailPort"
 							placeholder="425"
 							type="number"
@@ -136,8 +136,8 @@ const SettingsEmail = ({
 						/>
 					</Box>
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelUser")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelUser")}
 							name="systemEmailUser"
 							placeholder={t("settingsPage.emailSettings.placeholderUser")}
 							value={systemEmailUser}
@@ -145,8 +145,8 @@ const SettingsEmail = ({
 						/>
 					</Box>
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelAddress")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelAddress")}
 							name="systemEmailAddress"
 							placeholder="uptime@bluewavelabs.ca"
 							value={systemEmailAddress}
@@ -155,8 +155,8 @@ const SettingsEmail = ({
 					</Box>
 					{(isEmailPasswordSet === false || emailPasswordHasBeenReset === true) && (
 						<Box>
-							<Typography>{t("settingsPage.emailSettings.labelPassword")}</Typography>
 							<TextInput
+								label={t("settingsPage.emailSettings.labelPassword")}
 								name="systemEmailPassword"
 								type="password"
 								placeholder="123 456 789 101112"
@@ -188,8 +188,8 @@ const SettingsEmail = ({
 						</Box>
 					)}
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelTLSServername")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelTLSServername")}
 							name="systemEmailTLSServername"
 							placeholder="bluewavelabs.ca"
 							value={systemEmailTLSServername}
@@ -197,8 +197,8 @@ const SettingsEmail = ({
 						/>
 					</Box>
 					<Box>
-						<Typography>{t("settingsPage.emailSettings.labelConnectionHost")}</Typography>
 						<TextInput
+							label={t("settingsPage.emailSettings.labelConnectionHost")}
 							name="systemEmailConnectionHost"
 							placeholder="bluewavelabs.ca"
 							value={systemEmailConnectionHost}