FIX-1848 addressed the comments in order to modify the theme implementation.

src/Components/Alert/index.jsx

@@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 	*/
 
 	const text = theme.palette.secondary.contrastText;
-	const border = theme.palette.alert.border;
-	const bg = theme.palette.alert.background;
+	const border = theme.palette.alert.contrastText;
+	const bg = theme.palette.alert.main;
 	const icon = icons[variant];
 
 	return (

src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 
 // This can be used to add any extra/additional section/stacks on top of existing sections on the tab
-const SectionStack = ({ title, description, children }) => {
+const ConfigStack = ({ title, description, children }) => {
 	const theme = useTheme();
 	return (
 		<ConfigBox>
@@ -17,10 +17,10 @@ const SectionStack = ({ title, description, children }) => {
 	);
 };
 
-SectionStack.propTypes = {
+ConfigStack.propTypes = {
 	title: PropTypes.string.isRequired, // Title must be a string and is required
 	description: PropTypes.string.isRequired, // Description must be a string and is required
 	children: PropTypes.node.isRequired,
 };
 
-export default SectionStack;
+export default ConfigStack;

src/Pages/StatusPage/Create/Components/Tabs/Content.jsx

@@ -7,7 +7,7 @@ import Checkbox from "../../../../../Components/Inputs/Checkbox";
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
-import SectionStack from "./SectionStack";
+import ConfigStack from "./ConfigStack";
 const Content = ({
 	tabValue,
 	form,
@@ -34,7 +34,7 @@ const Content = ({
 	return (
 		<TabPanel value={tabValue}>
 			<Stack gap={theme.spacing(10)}>
-				<SectionStack
+				<ConfigStack
 					title="Status page servers"
 					description="You can add any number of servers that you monitor to your status page. You can also reorder them for the best viewing experience."
 				>
@@ -68,8 +68,8 @@ const Content = ({
 							setSelectedMonitors={handleMonitorsChange}
 						/>
 					</Stack>
-				</SectionStack>
-				<SectionStack
+				</ConfigStack>
+				<ConfigStack
 					title="Features"
 					description="Show more details on the status page"
 				>
@@ -89,7 +89,7 @@ const Content = ({
 							onChange={handleFormChange}
 						/>
 					</Stack>
-				</SectionStack>
+				</ConfigStack>
 			</Stack>
 		</TabPanel>
 	);

src/Utils/Theme/constants.js

@@ -292,11 +292,11 @@ const newSemanticColors = {
 		},
 	},
 	alert: {
-		background: {
+		main: {
 			light: newColors.gray200,
 			dark: newColors.gray900,
 		},
-		border: {
+		contrastText: {
 			light: newColors.blueGray600,
 			dark: newColors.blueGray900,
 		},