diff --git a/src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts b/src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts
index dc750b0463..b67899e845 100644
--- a/src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts
+++ b/src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts
@@ -21,7 +21,6 @@ export const ProgressCircle = styled.circle<{
     ((100 - percent) / 100) * circumference};
   stroke: ${(props) => props.color || props.theme.statusHealthy};
   stroke-width: ${(props) => props.strokeWidth};
-  stroke-linecap: round;
   fill: none;
 `;
 export const BackgroundCircle = styled.circle<{ backgroundColor?: string }>`
diff --git a/src/lib/components/circularprogressbar/CircularProgressBar.component.tsx b/src/lib/components/circularprogressbar/CircularProgressBar.component.tsx
index e62f95d54b..f5e0b3852c 100644
--- a/src/lib/components/circularprogressbar/CircularProgressBar.component.tsx
+++ b/src/lib/components/circularprogressbar/CircularProgressBar.component.tsx
@@ -1,9 +1,10 @@
 import {
+  BackgroundCircle,
   CircularProgressBarContainer,
-  Title,
   ProgressCircle,
-  BackgroundCircle,
+  Title,
 } from './CircularProgressBar.component.style';
+
 type Props = {
   percent: number;
   radius: number;
@@ -14,6 +15,29 @@ type Props = {
   children?: JSX.Element;
 };
 
+/**
+ *
+ * 
+ * @example 
+ * <CircularProgressBar 
+ * title="Total Capacity" 
+ * percent={60} 
+ * radius={70} 
+ * color="red" 
+ * backgroundColor="blue" 
+ * strokeWidth={10} 
+ * > 
+ * 	<text
+        x="50%"
+        y="50%"
+        dominantBaseline="middle"
+        textAnchor="middle"  
+        fontSize={fontSize.smaller}
+      >
+        text content
+      </text> 
+    </CircularProgressBar>
+ */
 function CircularProgressBar({
   percent,
   radius,