diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx
index e324a4dcc..0ae872e3f 100644
--- a/Client/src/Components/Charts/Gauge/index.jsx
+++ b/Client/src/Components/Charts/Gauge/index.jsx
@@ -2,8 +2,8 @@ import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 
-const MINIMUM_VALUE = 0 ;
-const MAXIMUM_VALUE = 100 ;
+const MINIMUM_VALUE = 0;
+const MAXIMUM_VALUE = 100;
 const DATA = [{ value: MAXIMUM_VALUE }];
 const PROGRESS_THRESHOLD = 50;
 const DEFAULT_CONTAINER_HEIGHT = 160;
@@ -11,14 +11,14 @@ const TEXT_POSITIONS = {
 	value: { x: "50%", y: "45%" },
 	label: { x: "50%", y: "55%" },
 };
-const COMMON_RADIALBAR_PROPS = {
+const COMMON_RADIAL_BAR_PROPS = {
 	minAngle: 15,
 	clockWise: true,
 	dataKey: "value",
 	cornerRadius: 0,
 };
 
-const RADIALBARCHART_PROPS = {
+const RADIAL_BAR_CHART_PROPS = {
 	cx: "50%",
 	cy: "50%",
 	innerRadius: "45%",
@@ -27,7 +27,7 @@ const RADIALBARCHART_PROPS = {
 	endAngle: -270,
 };
 
-const RADIALBAR_OVERLAY_PROPS = {
+const RADIAL_BAR_OVERLAY_PROPS = {
 	transform: "rotate(180deg)",
 	position: "absolute",
 	top: "0",
@@ -39,6 +39,29 @@ const COMMON_HEADER_PROPS = {
 	dominantBaseline: "middle",
 };
 
+/**
+ * A circular gauge component that displays a progress value and text.
+ * The gauge fills based on the progress value and changes color at a 50% threshold.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {number} props.progressValue - The value to display in the gauge (0-100)
+ * @param {string} props.displayText - The text to display below the progress value
+ * @param {number} [props.containerHeight=160] - Height of the gauge container in pixels
+ * @param {Object} [props.gaugeHeader] - Custom styles to apply to the progress value text
+ * @param {Object} [props.gaugeSubheader] - Custom styles to apply to the display text
+ *
+ * @returns {JSX.Element} A circular gauge chart with progress value and text
+ *
+ * @example
+ * <Gauge
+ *   progressValue={75}
+ *   displayText="Completion"
+ *   containerHeight={200}
+ *   gaugeHeader={{ fontSize: '24px' }}
+ *   gaugeSubheader={{ fill: 'gray' }}
+ * />
+ */
 const Gauge = ({
 	progressValue,
 	displayText,
@@ -46,17 +69,17 @@ const Gauge = ({
 	gaugeHeader,
 	gaugeSubheader,
 }) => {
-    const theme = useTheme();
+	const theme = useTheme();
 	const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE));
 
 	return (
 		<ResponsiveContainer height={containerHeight ?? DEFAULT_CONTAINER_HEIGHT}>
 			<RadialBarChart
-				{...RADIALBARCHART_PROPS}
+				{...RADIAL_BAR_CHART_PROPS}
 				data={DATA}
 			>
 				<RadialBar
-					{...COMMON_RADIALBAR_PROPS}
+					{...COMMON_RADIAL_BAR_PROPS}
 					fill={
 						progressValue > PROGRESS_THRESHOLD
 							? theme.palette.primary.main
@@ -66,15 +89,15 @@ const Gauge = ({
 					data={[{ value: myProgressValue }]}
 				/>
 				<RadialBar
-					{...COMMON_RADIALBAR_PROPS}
+					{...COMMON_RADIAL_BAR_PROPS}
 					data={DATA}
-					style={RADIALBAR_OVERLAY_PROPS}
+					style={RADIAL_BAR_OVERLAY_PROPS}
 				/>
 				<text
 					{...TEXT_POSITIONS.value}
 					role="text"
 					aria-label={`${myProgressValue}%`}
-					style={{...COMMON_HEADER_PROPS, ...theme.chart.header, ...gaugeHeader }}
+					style={{ ...COMMON_HEADER_PROPS, ...theme.chart.header, ...gaugeHeader }}
 				>
 					{`${myProgressValue}%`}
 				</text>
@@ -82,7 +105,7 @@ const Gauge = ({
 					{...TEXT_POSITIONS.label}
 					role="text"
 					aria-label={`${displayText}`}
-					style={{...COMMON_HEADER_PROPS,  ...theme.chart.subheader, ...gaugeSubheader }}
+					style={{ ...COMMON_HEADER_PROPS, ...theme.chart.subheader, ...gaugeSubheader }}
 				>
 					{`${displayText}`}
 				</text>