diff --git a/src/components/TotalOrgSummary/GlobalVolunteerMap/GlobalVolunteerMap.jsx b/src/components/TotalOrgSummary/GlobalVolunteerMap/GlobalVolunteerMap.jsx
index 9b4ff9a0e8..2aad3a8f0f 100644
--- a/src/components/TotalOrgSummary/GlobalVolunteerMap/GlobalVolunteerMap.jsx
+++ b/src/components/TotalOrgSummary/GlobalVolunteerMap/GlobalVolunteerMap.jsx
@@ -1,8 +1,10 @@
-import { useEffect } from 'react';
+/* eslint-disable react/no-array-index-key */
+import { useEffect, useMemo } from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, useMap, CircleMarker } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.heat';
+
 import Loading from '~/components/common/Loading';
 
 const volunteerColors = {
@@ -13,86 +15,138 @@ function HeatMap({ points }) {
   const map = useMap();
 
   useEffect(() => {
-    if (points.length > 0) {
-      const heat = L.heatLayer(points, {
-        radius: 20,
-        blur: 20,
-        maxZoom: 2,
-        gradient: {
-          0.4: '#00f',
-          0.6: '#0f0',
-          0.7: '#ff0',
-          0.8: '#ffa500',
-          1.0: '#f00',
-        },
-      }).addTo(map);
-
-      return () => {
-        map.removeLayer(heat);
-      };
-    }
-    return undefined;
-  }, [points, map]);
+    if (!map || !points.length) return undefined;
+
+    const heatLayer = L.heatLayer(points, {
+      radius: 20,
+      blur: 20,
+      maxZoom: 4,
+      gradient: {
+        0.2: '#00f',
+        0.4: '#0f0',
+        0.6: '#ff0',
+        0.8: '#ffa500',
+        1.0: '#f00',
+      },
+    });
+
+    heatLayer.addTo(map);
+
+    return () => {
+      map.removeLayer(heatLayer);
+    };
+  }, [map, points]);
 
   return null;
 }
 
-function MapComponent({ locations = [], isLoading, error }) {
-  const heatMapPoints = (locations || []).map(location => [
-    location._id.lat,
-    location._id.lng,
-    location.count,
-  ]);
+function GlobalVolunteerMap({ locations = [], isLoading, error }) {
+  /**
+   * Normalize backend response safely
+   */
+  const normalizedLocations = useMemo(() => {
+    if (!Array.isArray(locations)) return [];
+
+    return locations
+      .map(location => {
+        const lat = location?._id?.lat ?? location?.lat ?? location?.latitude;
+
+        const lng = location?._id?.lng ?? location?.lng ?? location?.longitude;
 
-  const activeVolunteers = (locations || []).filter(v => v.status === 'active');
+        const count = Number(location?.count || 1);
+
+        return {
+          lat: Number(lat),
+          lng: Number(lng),
+          count,
+        };
+      })
+      .filter(
+        item =>
+          !Number.isNaN(item.lat) &&
+          !Number.isNaN(item.lng) &&
+          item.lat >= -90 &&
+          item.lat <= 90 &&
+          item.lng >= -180 &&
+          item.lng <= 180,
+      );
+  }, [locations]);
+
+  /**
+   * Build heatmap points
+   */
+  const heatMapPoints = useMemo(
+    () => normalizedLocations.map(location => [location.lat, location.lng, location.count]),
+    [normalizedLocations],
+  );
 
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center">
-        <div className="w-100vh">
+        <div className="w-100">
           <Loading />
         </div>
       </div>
     );
   }
 
+  if (error) {
+    return (
+      <div className="error-container text-center p-4">
+        <p>Error loading map data</p>
+      </div>
+    );
+  }
+
+  if (!normalizedLocations.length) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{
+          height: '500px',
+          border: '1px solid #ddd',
+          borderRadius: '8px',
+        }}
+      >
+        <p>No volunteer location data available</p>
+      </div>
+    );
+  }
+
   return (
     <div className="map-container" style={{ marginTop: '20px' }}>
-      {error && (
-        <div className="error-container">
-          <p>Error: {error}</p>
-          <button
-            type="button"
-            onClick={() => {
-              /* Add retry logic here */
-            }}
-          >
-            Retry
-          </button>
-        </div>
-      )}
-      <MapContainer center={[20, 0]} zoom={2} style={{ height: '500px', width: '100%' }}>
+      <MapContainer
+        center={[20, 0]}
+        zoom={2}
+        scrollWheelZoom
+        style={{
+          height: '500px',
+          width: '100%',
+          borderRadius: '8px',
+        }}
+      >
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          attribution="&copy; OpenStreetMap contributors"
         />
+
         <HeatMap points={heatMapPoints} />
-        {activeVolunteers.length > 0 &&
-          activeVolunteers.map(volunteer => (
-            <CircleMarker
-              key={`active-${volunteer._id.lat}-${volunteer._id.lng}`}
-              center={[volunteer._id.lat, volunteer._id.lng]}
-              radius={8}
-              pathOptions={{
-                color: volunteerColors.active,
-                fillColor: volunteerColors.active,
-                fillOpacity: 0.8,
-              }}
-            />
-          ))}
+
+        {normalizedLocations.map((location, index) => (
+          <CircleMarker
+            key={`${location.lat}-${location.lng}-${index}`}
+            center={[location.lat, location.lng]}
+            radius={Math.min(10, Math.max(4, location.count))}
+            pathOptions={{
+              color: volunteerColors.active,
+              fillColor: volunteerColors.active,
+              fillOpacity: 0.7,
+            }}
+          />
+        ))}
       </MapContainer>
     </div>
   );
 }
 
-export default MapComponent;
+export default GlobalVolunteerMap;
diff --git a/src/components/TotalOrgSummary/PieChart.jsx b/src/components/TotalOrgSummary/PieChart.jsx
index a55b0f6e38..495033f954 100644
--- a/src/components/TotalOrgSummary/PieChart.jsx
+++ b/src/components/TotalOrgSummary/PieChart.jsx
@@ -1,44 +1,52 @@
-// // import * as React from 'react';
-// import { DefaultizedPieValueType } from '@mui/x-charts/models';
-// import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
+import * as React from 'react';
+import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
 
-// const data = [
-//   { label: 'Group A', value: 400, color: '#0088FE' },
-//   { label: 'Group B', value: 300, color: '#00C49F' },
-//   { label: 'Group C', value: 300, color: '#FFBB28' },
-//   { label: 'Group D', value: 200, color: '#FF8042' },
-// ];
+const data = [
+  { id: 0, label: 'Administrator', value: 6, color: '#fb0505' },
+  { id: 1, label: 'Volunteer', value: 4, color: '#8ebfff' },
+  { id: 2, label: 'Owner', value: 3, color: '#f68d42' },
+  { id: 3, label: 'Mentor', value: 1, color: '#f2ff00' },
+];
 
-// const sizing = {
-//   margin: { right: 5 },
-//   width: 200,
-//   height: 200,
-//   legend: { hidden: true },
-// };
-// const TOTAL = data.map(item => item.value).reduce((a, b) => a + b, 0);
+const TOTAL = data.reduce((sum, item) => sum + item.value, 0);
 
-// const getArcLabel = (params: DefaultizedPieValueType) => {
-//   const percent = params.value / TOTAL;
-//   return `${(percent * 100).toFixed(0)}%`;
-// };
+const getArcLabel = params => {
+  const percent = params.value / TOTAL;
+  return `${params.value}\n(${(percent * 100).toFixed(0)}%)`;
+};
 
-// export default function PieChartWithCustomizedLabel() {
-//   return (
-//     <PieChart
-//       series={[
-//         {
-//           outerRadius: 80,
-//           data,
-//           arcLabel: getArcLabel,
-//         },
-//       ]}
-//       sx={{
-//         [`& .${pieArcLabelClasses.root}`]: {
-//           fill: 'white',
-//           fontSize: 14,
-//         },
-//       }}
-//       {...sizing}
-//     />
-//   );
-// }
+export default function RoleDistributionPieChart() {
+  return (
+    <PieChart
+      series={[
+        {
+          data,
+          innerRadius: 70,
+          outerRadius: 145,
+          arcLabel: getArcLabel,
+          arcLabelMinAngle: 10,
+          arcLabelRadius: 105,
+          cornerRadius: 0,
+          paddingAngle: 0,
+        },
+      ]}
+      width={520}
+      height={430}
+      slotProps={{
+        legend: {
+          hidden: false,
+        },
+      }}
+      sx={{
+        [`& .${pieArcLabelClasses.root}`]: {
+          fill: '#ffffff',
+          fontSize: 14,
+          fontWeight: 700,
+        },
+        [`& .${pieArcLabelClasses.root}`]: {
+          whiteSpace: 'pre',
+        },
+      }}
+    />
+  );
+}
diff --git a/src/components/TotalOrgSummary/TotalOrgSummary.module.css b/src/components/TotalOrgSummary/TotalOrgSummary.module.css
index 7e39bd65bd..f83cce2b7b 100644
--- a/src/components/TotalOrgSummary/TotalOrgSummary.module.css
+++ b/src/components/TotalOrgSummary/TotalOrgSummary.module.css
@@ -34,7 +34,7 @@
     padding-top: 10px !important;
     padding-bottom: 10px !important;
   }
-  
+
   .containerTotalOrgWrapper:global(.mb-5) {
     margin-bottom: 20px !important;
   }
@@ -215,6 +215,29 @@
   color: #fff !important;
 }
 
+/* Role Distribution slice label overrides */
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-dark),
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-dark)
+  tspan {
+  fill: #000 !important;
+  color: #000 !important;
+}
+
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-light),
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-light)
+  tspan {
+  fill: #fff !important;
+  color: #fff !important;
+}
+
 .containerTotalOrgWrapper.bg-oxford-blue h3 {
   color: #fff;
 }
@@ -382,8 +405,6 @@
   transform: translateX(4px) !important;
 }
 
-/* Dark mode dropdown consistency */
-
 /* Component containers - Clean borderless design */
 .componentContainer {
   margin: 0 0 15px;
@@ -696,4 +717,4 @@
   }
 }
 
-/* stylelint-enable no-descending-specificity */
+/* stylelint-enable no-descending-specificity */
\ No newline at end of file
diff --git a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
index ac34eedc74..33b9abff19 100644
--- a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
@@ -1,21 +1,22 @@
+import React from 'react';
 import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Tooltip } from 'recharts';
 import Loading from '~/components/common/Loading';
+import CustomTooltip from '../../CustomTooltip';
 
 const COLORS = [
-  '#2F80ED', // blue
-  '#56CCF2', // light blue
-  '#27AE60', // green
-  '#6FCF97', // light green
-  '#F2994A', // orange
-  '#F2C94C', // yellow
-  '#E14848', // red
-  '#9B51E0', // purple
-  '#F765A3', // pink
-  '#4F4F4F', // dark
-  '#828282', // grey
+  '#2F80ED',
+  '#56CCF2',
+  '#27AE60',
+  '#6FCF97',
+  '#F2994A',
+  '#F2C94C',
+  '#E14848',
+  '#9B51E0',
+  '#F765A3',
+  '#4F4F4F',
+  '#828282',
 ];
 
-// Explicit role-to-color mapping to keep key roles visually distinct and stable.
 const ROLE_COLOR_MAP = {
   Volunteer: '#8ebfff',
   Manager: '#27AE60',
@@ -25,7 +26,19 @@ const ROLE_COLOR_MAP = {
   Mentor: '#f2ff00',
 };
 
-import CustomTooltip from '../../CustomTooltip';
+const RADIAN = Math.PI / 180;
+
+const getContrastTextColor = hexColor => {
+  const hex = hexColor.replace('#', '');
+
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+  return brightness > 160 ? '#000000' : '#FFFFFF';
+};
 
 const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkMode }) => {
   // Reusable function to sort data and assign colors.
@@ -50,114 +63,153 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
     );
   }
 
-  let data = [];
-  // This is to handle the case when we are comparing the data with other time periods. In that case, the data structure is different and we need to access the comparison data.
-  if (roleDistributionStats?.comparison) {
-    data = sortDataAndAssignColors(roleDistributionStats?.comparison);
-  }
-  // Fallback to the original data structure when we are not comparing the data with other time periods.
-  else {
-    data = sortDataAndAssignColors(roleDistributionStats);
-  }
+  const sortedStats = [...roleDistributionStats].sort((a, b) => b.count - a.count);
+
+  const data = sortedStats.map((item, index) => ({
+    name: item._id,
+    value: item.count,
+    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
+  }));
 
   const totalValue = data.reduce((sum, entry) => sum + entry.value, 0);
 
-  const RADIAN = Math.PI / 180;
-  const renderCustomizedLabel = ({
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    percent,
-    index,
-  }) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const renderLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
+    if (percent <= 0.01 || !data[index]) return null;
+
+    const slice = data[index];
+
+    const isSmallSlice = percent < 0.1;
+
+    const labelColor = getContrastTextColor(slice.color);
+
+    const labelClass =
+      labelColor === '#000000' ? 'role-distribution-label-dark' : 'role-distribution-label-light';
+
+    const radius =
+      innerRadius + (outerRadius - innerRadius) * (slice.name === 'Mentor' ? 0.34 : 0.52);
+
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
+
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
-    return (
-      <g>
-        <text fill="black" textAnchor="middle" dominantBaseline="central">
-          {percent > 0.01 && (
-            <>
-              <tspan x={x} y={y - 5} fontSize="0.7em" fontWeight="bold">
-                {`${data[index].value}`}
-              </tspan>
-              <tspan x={x} y={y + 5} fontSize="0.5em" fontWeight="bold">
-                {`(${(percent * 100).toFixed(0)}%)`}
-              </tspan>
-            </>
-          )}
-        </text>
-        <text fill="blue" textAnchor="middle" dominantBaseline="central">
-          <tspan x={cx} y={cy - 15} fontSize="1.2em" fill={darkMode ? 'white ' : 'grey'}>
-            TOTAL ROLES
-          </tspan>
-          <tspan x={cx} y={cy + 15} fontSize="1.5em" fill={darkMode ? 'white ' : 'grey'}>
-            {data.length}
-          </tspan>
+    if (isSmallSlice) {
+      return (
+        <text
+          x={x}
+          y={y}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={labelColor}
+          stroke="none"
+          className={labelClass}
+          style={{
+            fontSize: '11px',
+            fontWeight: 700,
+            pointerEvents: 'none',
+          }}
+        >
+          {`${slice.value} (${(percent * 100).toFixed(0)}%)`}
         </text>
-      </g>
-    );
-  };
-
-  const renderCustomLegend = props => {
-    const { payload } = props; // payload is an array of legend items provided by Recharts
+      );
+    }
 
     return (
-      <ul
-        style={{
-          listStyle: 'none', // Remove default bullet points
-          margin: 0,
-          paddingLeft: '20px', // Indent legend from the pie
-          textAlign: 'left', // Align text to the left
-          maxHeight: '400px', // Max height for the legend area
-          overflowY: 'auto', // Make legend scrollable if it exceeds maxHeight
-        }}
+      <text
+        x={x}
+        y={y}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fill={labelColor}
+        stroke="none"
+        className={labelClass}
+        style={{ pointerEvents: 'none' }}
       >
-        {payload.map(entry => {
-          // 'entry.value' here corresponds to the 'nameKey' of the Pie (which we set to 'name')
-          const itemName = entry.value;
-          // Find the original data object to get the count and original color
-          const itemData = data.find(d => d.name === itemName);
-
-          // If for some reason data is not found, skip rendering this legend item
-          if (!itemData) {
-            return null;
-          }
-
-          const { value, color } = itemData; // 'value' is the count
-          const percentage = totalValue > 0 ? (value / totalValue) * 100 : 0;
-
-          return (
-            <li
-              key={`item-${itemName}`} // Use itemName for a stable key
-              style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}
-            >
-              <div
-                style={{
-                  width: '10px',
-                  height: '10px',
-                  backgroundColor: color, // Use the color from our mapped data
-                  marginRight: '5px',
-                  flexShrink: 0, // Prevent the color swatch from shrinking
-                }}
-              />
-              <span style={{ color: darkMode ? 'white' : 'grey', fontSize: '12px' }}>
-                {`${itemName}: ${value} (${percentage.toFixed(1)}%)`}
-              </span>
-            </li>
-          );
-        })}
-      </ul>
+        <tspan
+          x={x}
+          y={y - 6}
+          fill={labelColor}
+          style={{
+            fontSize: '0.7em',
+            fontWeight: 700,
+          }}
+        >
+          {slice.value}
+        </tspan>
+
+        <tspan
+          x={x}
+          y={y + 10}
+          fill={labelColor}
+          style={{
+            fontSize: '0.5em',
+            fontWeight: 700,
+          }}
+        >
+          {`(${(percent * 100).toFixed(0)}%)`}
+        </tspan>
+      </text>
     );
   };
 
+  const renderCustomLegend = ({ payload }) => (
+    <ul
+      style={{
+        listStyle: 'none',
+        margin: 0,
+        paddingLeft: '20px',
+        textAlign: 'left',
+        maxHeight: '400px',
+        overflowY: 'auto',
+      }}
+    >
+      {payload.map(entry => {
+        const itemName = entry.value;
+
+        const itemData = data.find(d => d.name === itemName);
+
+        if (!itemData) return null;
+
+        const { value, color } = itemData;
+
+        const percentage = totalValue > 0 ? (value / totalValue) * 100 : 0;
+
+        return (
+          <li
+            key={`item-${itemName}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: '5px',
+            }}
+          >
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                backgroundColor: color,
+                marginRight: '5px',
+                flexShrink: 0,
+              }}
+            />
+
+            <span
+              style={{
+                color: darkMode ? 'white' : 'grey',
+                fontSize: '12px',
+              }}
+            >
+              {`${itemName}: ${value} (${percentage.toFixed(1)}%)`}
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
   return (
     <div style={{ margin: '15px 10px 10px 10px', overflowX: 'auto' }}>
-      <div style={{ minWidth: 500 }}>
-        <ResponsiveContainer width="100%" height="100%" minWidth={400} minHeight={430}>
+      <div style={{ minWidth: 500, width: '100%', height: 430 }}>
+        <ResponsiveContainer width="100%" height={430}>
           <PieChart>
             <Pie
               data={data}
@@ -167,22 +219,25 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
               outerRadius="100%"
               legendType="square"
               labelLine={false}
-              label={renderCustomizedLabel}
+              label={renderLabel}
               startAngle={-270}
               endAngle={90}
               stroke="none"
               dataKey="value"
+              isAnimationActive={false}
             >
               {data.map(entry => (
                 <Cell key={`cell-${entry.name}`} fill={entry.color} />
               ))}
             </Pie>
+
             <Legend
               layout="vertical"
               verticalAlign="middle"
               align="right"
               content={renderCustomLegend}
             />
+
             <Tooltip content={<CustomTooltip darkMode={darkMode} />} />
           </PieChart>
         </ResponsiveContainer>