diff --git a/package-lock.json b/package-lock.json
index 8aa620f73a..cd10e10a6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,7 +68,6 @@
                 "react-apexcharts": "^1.4.1",
                 "react-aria-components": "^1.0.0-alpha.6",
                 "react-beautiful-dnd": "^13.1.1",
-                "react-circular-progressbar": "^2.1.0",
                 "react-csv": "^2.0.1",
                 "react-currency-input-field": "^3.6.10",
                 "react-datepicker": "^4.16.0",
@@ -29959,14 +29958,6 @@
                 }
             }
         },
-        "node_modules/react-circular-progressbar": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-            "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
-            "peerDependencies": {
-                "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-            }
-        },
         "node_modules/react-colorful": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
@@ -57992,12 +57983,6 @@
                 }
             }
         },
-        "react-circular-progressbar": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-            "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
-            "requires": {}
-        },
         "react-colorful": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
diff --git a/package.json b/package.json
index e79a7f5ffe..3d59066e9d 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,6 @@
         "react-apexcharts": "^1.4.1",
         "react-aria-components": "^1.0.0-alpha.6",
         "react-beautiful-dnd": "^13.1.1",
-        "react-circular-progressbar": "^2.1.0",
         "react-csv": "^2.0.1",
         "react-currency-input-field": "^3.6.10",
         "react-datepicker": "^4.16.0",
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx
index 792a30f76e..75e4f18d44 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx
@@ -1,38 +1,91 @@
 import {__} from '@wordpress/i18n';
-import {
-    CircularProgressbarWithChildren,
-    buildStyles
-} from "react-circular-progressbar";
-import 'react-circular-progressbar/dist/styles.css';
+import Chart from "react-apexcharts";
+import React from "react";
+
+const currency = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+})
 
 const GoalProgressChart = ({ value, goal }) => {
     const percentage: number = Math.abs((value / goal) * 100);
     return (
         <>
             <div style={{
-                display: 'grid',
-                gridTemplateColumns: '2fr 3fr',
+                display: 'flex',
                 gap: '20px',
                 alignItems: 'center',
             }}>
                 <div style={{
-                    padding: '10px',
+                    /**
+                     * The size of the chart is relative to the container.
+                     * To get close to the design,
+                     *  the size is balances at flex 3/2
+                     *  and the margins use negative values to control padding
+                     */
+                    flex: 3,
+                    margin: '0 -50px',
                 }}>
-                    <CircularProgressbarWithChildren
-                        value={percentage}
-                        styles={buildStyles({
-                            strokeLinecap: "butt",
-                            pathColor: "#459948",
-                        })}
-                    >
-                        {percentage}%
-                        <small>{value}</small>
-                    </CircularProgressbarWithChildren>
+                    <Chart
+                        options={{
+                            chart: {
+                                height: 1024,
+                                type: 'radialBar',
+                            },
+                            plotOptions: {
+                                radialBar: {
+                                    hollow: {
+                                        margin: 15,
+                                        size: "60%",
+                                    },
+                                    dataLabels: {
+                                        /**
+                                         * The "name" is the top label, here it is the value/amount
+                                         * The "value" is the percent progress
+                                         *
+                                         * Note: These are visually inverted (using offsetY) to match the design
+                                         */
+                                        name: {
+                                            offsetY: 20,
+                                            show: true,
+                                            color: "#4B5563",
+                                            fontSize: "12px"
+                                        },
+                                        value: {
+                                            offsetY: -20,
+                                            color: "#060C1A",
+                                            fontSize: "24px",
+                                            show: true
+                                        }
+                                    }
+                                }
+                            },
+                            colors: ['#459948'],
+                            labels: [currency.format(value)],
+                        }}
+                        series={[percentage]}
+                        type="radialBar"
+                    />
                 </div>
-                <div>
-                    <div>{__('Goal')}</div>
-                    <div>{goal}</div>
-                    <div>{__('Amount raised')}</div>
+                <div style={{ flex: 2 }}>
+                    <div style={{
+                        fontSize: '14px',
+                        fontWeight: 400,
+                        lineHeight: '20px',
+                    }}>
+                        {__('Goal')}
+                    </div>
+                    <div style={{
+                        color: '#2D802F',
+                        fontSize: '18px',
+                        fontWeight: 600,
+                        lineHeight: '20px',
+                    }}>{currency.format(goal)}</div>
+                    <div style={{
+                        fontSize: '12px',
+                        fontWeight: 400,
+                        lineHeight: '18px',
+                    }}>{__('Amount raised')}</div>
                 </div>
             </div>
         </>