diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx
new file mode 100644
index 000000000..5826788a6
--- /dev/null
+++ b/src/Components/Charts/Bar/index.jsx
@@ -0,0 +1,47 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+/**
+ * A customizable Bar component that renders a colored bar with optional children.
+ *
+ * @component
+ *
+ * @param {string} width The width of the bar (e.g., "100px").
+ * @param {string} height The height of the bar (e.g., "50px").
+ * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733").
+ * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px").
+ * @param {node} children The content to be rendered inside the bar.
+ *
+ * @returns {JSX.Element} The Bar component.
+ */
+
+const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			position="relative"
+			width={width}
+			height={height}
+			backgroundColor={backgroundColor}
+			sx={{
+				borderRadius: borderRadius || theme.spacing(1.5),
+				gap: "2px",
+				display: "flex",
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+Bar.propTypes = {
+	width: PropTypes.string.isRequired,
+	height: PropTypes.string.isRequired,
+	backgroundColor: PropTypes.string.isRequired,
+	borderRadius: PropTypes.string,
+	children: PropTypes.node,
+};
+
+export default Bar;
diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx
index 46e8ae2a1..84015da4a 100644
--- a/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -3,6 +3,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import Bar from "../Bar";
 
 /* TODO add prop validation and jsdocs */
 const StatusPageBarChart = ({ checks = [] }) => {
@@ -24,21 +25,6 @@ const StatusPageBarChart = ({ checks = [] }) => {
 		checks = [...checks, ...placeholders];
 	}
 
-	const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => (
-		<Box
-			marginRight="5px"
-			position="relative"
-			width={width}
-			height={height}
-			backgroundColor={backgroundColor}
-			sx={{
-				borderRadius: borderRadius || theme.spacing(1.5),
-			}}
-		>
-			{children}
-		</Box>
-	);
-
 	return (
 		<Stack
 			direction="row"
@@ -56,9 +42,9 @@ const StatusPageBarChart = ({ checks = [] }) => {
 					/* TODO what is the purpose of this box? 	*/
 					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
 					// even if there are less than 25 checks
-					<BarBox
+					<Bar
 						key={`${check}-${index}`}
-						width="calc(30rem / 25)"
+						width="calc(85% / 25)"
 						height="100%"
 						backgroundColor={theme.palette.primary.lowContrast}
 					/>
@@ -151,8 +137,8 @@ const StatusPageBarChart = ({ checks = [] }) => {
 							},
 						}}
 					>
-						<BarBox
-							width="calc(30rem / 25)"
+						<Bar
+							width="calc(85% / 25)"
 							height="100%"
 							backgroundColor={theme.palette.primary.lowContrast}
 						>
@@ -171,7 +157,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
 								}}
 							/>
-						</BarBox>
+						</Bar>
 					</Tooltip>
 				)
 			)}