diff --git a/.changeset/spicy-dragons-teach.md b/.changeset/spicy-dragons-teach.md
new file mode 100644
index 000000000..0f33741ea
--- /dev/null
+++ b/.changeset/spicy-dragons-teach.md
@@ -0,0 +1,10 @@
+---
+"@ifrc-go/ui": patch
+---
+
+- PieChart Component
+
+  - Added a `colorSelector` prop to select color for each pie
+
+- ProgressBar Component
+  - Introduced a `color` prop to customize the progress bar's color
diff --git a/.changeset/tricky-hornets-trade.md b/.changeset/tricky-hornets-trade.md
new file mode 100644
index 000000000..993d75b62
--- /dev/null
+++ b/.changeset/tricky-hornets-trade.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Added color mapping based on PER Area and Rating across all PER charts
diff --git a/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx b/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
index 89b3cc526..077243c90 100644
--- a/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
+++ b/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
@@ -49,7 +49,7 @@ function PreviousAssessmentCharts(props: Props) {
     const ratingTitleMap = listToMap(
         ratingOptions,
         (option) => option.value,
-        (option) => option.title,
+        (option) => `${option.title} ${option.value}`,
     );
 
     const chartData = useNumericChartData(
diff --git a/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx b/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx
index fe5213731..3eae6c8f4 100644
--- a/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx
+++ b/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx
@@ -44,7 +44,7 @@ function RatingByAreaChart(props: Props) {
     const ratingTitleMap = listToMap(
         ratingOptions,
         (option) => option.value,
-        (option) => option.title,
+        (option) => `${option.title} ${option.value}`,
     );
 
     const formAreaMap = listToMap(