diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart
index c8ad03c5..cc2b4b70 100644
--- a/example/lib/pages/components/progress_example.dart
+++ b/example/lib/pages/components/progress_example.dart
@@ -56,7 +56,7 @@ class ProgressExampleState extends State<ProgressExample> {
               ),
               Wrapper(
                 stepsCompleted: 0,
-                circleSize: ZetaCircleSizes.xl_1,
+                circleSize: ZetaCircleSizes.xl,
                 rounded: false,
                 isCircle: true,
               ),
diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart
index b5f7a92b..6edc683a 100644
--- a/example/widgetbook/pages/components/progress_widgetbook.dart
+++ b/example/widgetbook/pages/components/progress_widgetbook.dart
@@ -29,10 +29,11 @@ Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget(
         progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
         rounded: roundedKnob(context),
         size: context.knobs.list(
-          initialOption: ZetaCircleSizes.xl_1,
+          initialOption: ZetaCircleSizes.xl,
           label: 'Size',
           options: ZetaCircleSizes.values,
           labelBuilder: enumLabelBuilder,
         ),
+        onCancel: context.knobs.boolean(label: "Can Cancel") ? () {} : null,
       ),
     );
diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart
index 49fa305d..e948603f 100644
--- a/lib/src/components/progress/progress_circle.dart
+++ b/lib/src/components/progress/progress_circle.dart
@@ -20,7 +20,7 @@ enum ZetaCircleSizes {
   l,
 
   /// 64 X 64
-  xl_1
+  xl
 }
 
 ///Class definition for [ZetaProgressCircle]
@@ -30,12 +30,16 @@ class ZetaProgressCircle extends ZetaProgress {
     super.key,
     super.progress = 0,
     super.rounded,
-    this.size = ZetaCircleSizes.xl_1,
+    this.size = ZetaCircleSizes.xl,
+    this.onCancel,
   });
 
   ///Size of [ZetaProgressCircle]
   final ZetaCircleSizes size;
 
+  /// Cancel function => cancel upload.
+  final VoidCallback? onCancel;
+
   @override
   State<ZetaProgressCircle> createState() => ZetaProgressCircleState();
 
@@ -45,14 +49,42 @@ class ZetaProgressCircle extends ZetaProgress {
     properties
       ..add(EnumProperty<ZetaCircleSizes>('size', size))
       ..add(DoubleProperty('progress', progress))
-      ..add(DiagnosticsProperty<bool>('rounded', rounded));
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onCancel', onCancel));
   }
 }
 
 ///Class definition for [ZetaProgressCircleState]
 class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
+  final _controller = WidgetStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.addListener(() {
+      if (context.mounted && mounted && !_controller.value.contains(WidgetState.hovered)) {
+        setState(() {});
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final textVal = '${(widget.progress * 100).round()}%';
+    final colors = Zeta.of(context).colors;
+    final textWidget = Text(
+      textVal,
+      style: widget.size != ZetaCircleSizes.s
+          ? ZetaTextStyles.labelSmall
+          : ZetaTextStyles.labelSmall.copyWith(fontSize: ZetaSpacing.small),
+    );
+
     return ConstrainedBox(
       constraints: BoxConstraints.tight(_getSize()),
       child: AnimatedBuilder(
@@ -65,6 +97,46 @@ class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
               rounded: context.rounded,
               colors: Zeta.of(context).colors,
             ),
+            child: Center(
+              child: widget.size == ZetaCircleSizes.xs
+                  ? null
+                  : widget.onCancel != null
+                      ? ListenableBuilder(
+                          listenable: _controller,
+                          builder: (context, _) {
+                            return MouseRegion(
+                              onEnter: (hover) {
+                                if (mounted) {
+                                  _controller.update(WidgetState.hovered, true);
+                                }
+                              },
+                              onExit: (hover) {
+                                _controller.update(WidgetState.hovered, false);
+                              },
+                              child: _controller.value.contains(WidgetState.hovered)
+                                  ? InkWell(
+                                      enableFeedback: false,
+                                      onTap: widget.onCancel,
+                                      borderRadius: ZetaRadius.full,
+                                      child: Container(
+                                        decoration: BoxDecoration(
+                                          color: colors.surfaceHover,
+                                          borderRadius: ZetaRadius.full,
+                                        ),
+                                        padding: const EdgeInsets.all(ZetaSpacing.small),
+                                        child: Icon(
+                                          context.rounded ? ZetaIcons.close_round : ZetaIcons.close_sharp,
+                                          size:
+                                              widget.size == ZetaCircleSizes.s ? ZetaSpacing.medium : ZetaSpacing.large,
+                                        ),
+                                      ),
+                                    )
+                                  : textWidget,
+                            );
+                          },
+                        )
+                      : textWidget,
+            ),
           );
         },
       ),
@@ -81,7 +153,7 @@ class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
         return const Size(ZetaSpacing.xl_6, ZetaSpacing.xl_6);
       case ZetaCircleSizes.l:
         return const Size(ZetaSpacing.xl_8, ZetaSpacing.xl_8);
-      case ZetaCircleSizes.xl_1:
+      case ZetaCircleSizes.xl:
         return const Size(ZetaSpacing.xl_9, ZetaSpacing.xl_9);
     }
   }