diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 385a3e7307deed5be8a75354f7037acc77bb0a2e..cd3b4c8ac6e7383f706826ad92455acfa272f947 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -98,6 +98,10 @@
     #Cystic\ Fibrosis6 h2 {
         font-size: 1.5em !important; /* Mobile size */
       }
+      .pie-chart-container-small {
+        width: 200px; /* Make smaller for mobile */
+        height: 200px; /* Adjust height accordingly */
+      }  
 
     .row-if-small{
         --bs-gutter-x: 1.5rem;
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 76685112606211c697e53303f8965f5031b4f684..a52d18ede42dcb5c717acecfb63ffdd3f43eeb13 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -56,11 +56,16 @@ const PieChart: React.FC = () => {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
-      title: {
+      legend: {
         display: true,
-        text: '',
+        position: 'bottom' as const, // Puts labels below the chart
+        labels: {
+          boxWidth: 20, // Controls the size of the color box next to the labels
+          padding: 15,   // Adds some padding between labels and the chart
+          usePointStyle: true, 
       },
-    }
+    },
+   },
   };
 
   return (