diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx
index 5cf8b7ddb..bf2531bba 100644
--- a/Client/src/Components/Alert/index.jsx
+++ b/Client/src/Components/Alert/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -5,12 +6,25 @@ import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
 import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
 import "./index.css";
 
+/**
+ * Icons mapping for different alert variants.
+ * @type {Object<string, JSX.Element>}
+ */
+
 const icons = {
   info: <InfoOutlinedIcon />,
   error: <ErrorOutlineOutlinedIcon />,
   warning: <WarningAmberOutlinedIcon />,
 };
 
+/**
+ * @param {Object} props
+ * @param {'info' | 'error' | 'warning'} props.variant - The type of alert.
+ * @param {string} [props.title] - The title of the alert.
+ * @param {string} [props.body] - The body text of the alert.
+ * @returns {JSX.Element}
+ */
+
 const Alert = ({ variant, title, body }) => {
   const theme = useTheme();
   const { bg, border, color } = theme.alert[variant];
@@ -37,4 +51,10 @@ const Alert = ({ variant, title, body }) => {
   );
 };
 
+Alert.propTypes = {
+  variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired,
+  title: PropTypes.string,
+  body: PropTypes.string,
+};
+
 export default Alert;
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index e4ab491a3..60273cd95 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -105,7 +105,7 @@ const theme = createTheme({
     },
     error: {
       color: "#d92d20",
-      bg: "#fffaef",
+      bg: "hsla(0, 100%, 52%, 0.03)",
       border: "#f04438",
     },
     warning: {