diff --git a/my-app/src/components/visualizations/IslandBarChart.jsx b/my-app/src/components/visualizations/IslandBarChart.jsx
index a5920ee..de594ee 100644
--- a/my-app/src/components/visualizations/IslandBarChart.jsx
+++ b/my-app/src/components/visualizations/IslandBarChart.jsx
@@ -31,7 +31,6 @@ export const options = {
       position: "bottom",
     },
   },
-  responsive: true,
   interaction: {
     mode: "index",
     intersect: false,
@@ -76,21 +75,21 @@ const IslandBarChart = ({ data }) => {
       {
         label: "Complete",
         data: completedEvents,
-        backgroundColor: '#06b6d4',
+        backgroundColor: '#0e7490',
         stack: "Stack 0",
       },
       {
         label: "In Progress",
         data: notCompletedEvents,
-        backgroundColor: '#164e63',
+        backgroundColor: '#06b6d4',
         stack: "Stack 0",
       },
     ],
   };
 
   return (
-    <div>
-      <Bar options={options} data={dataPlot} className="h-full" />
+    <div className="h-full flex flex-col">
+      <Bar options={options} data={dataPlot} className="my-auto" />
 
       {graphReady ? (
         <></>
diff --git a/my-app/src/components/visualizations/IslandPieChart.jsx b/my-app/src/components/visualizations/IslandPieChart.jsx
index 87a4a33..4d69cfe 100644
--- a/my-app/src/components/visualizations/IslandPieChart.jsx
+++ b/my-app/src/components/visualizations/IslandPieChart.jsx
@@ -23,7 +23,7 @@ const IslandPieChart = ({ data }) => {
       {
         label: "% of Events",
         data: totalEvents,
-        backgroundColor: islands.map(() => getRandomColor()),
+        backgroundColor: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d', '#052e16'],
         borderWidth: 1,
       },
     ],
@@ -35,17 +35,16 @@ const IslandPieChart = ({ data }) => {
         display: false,
         text: "",
       },
-    },
-    legend: {
-      display: true,
-      position: "bottom",
+      legend: {
+        position: "bottom",
+      },
     },
     responsive: true,
     maintainAspectRatio: false,
   };
 
   return (
-    <div style={{ width: "460px", height: "260px" }}>
+    <div className="h-full py-4">
       <Pie data={dataPlot} options={options} />
     </div>
   );
diff --git a/my-app/src/pages/data-insights/index.jsx b/my-app/src/pages/data-insights/index.jsx
index 334bc48..2c3fb90 100644
--- a/my-app/src/pages/data-insights/index.jsx
+++ b/my-app/src/pages/data-insights/index.jsx
@@ -52,23 +52,22 @@ const DataInsights = () => {
   }, []);
 
   const tabContent = [
-    <div key="tab1" className="bg-base-200 rounded-xl p-8 mt-3">
-      <div className="flex flex-row justify-between mt-2 rounded-xl bg-base-200">
+    <div key="tab1" className="bg-base-200 rounded-xl px-8 py-5 mt-3">
+      <div className="flex flex-row justify-between rounded-xl bg-base-200">
         <div className="w-full">
           <h6 className="text-secondary text-lg font-bold mb-4">
-            Current Events Location
+            Debris Report Locations
           </h6>
           {/* <CityMap /> */}
           <LocationAggregatorMap data={coordinates} />
         </div>
       </div>
-      <div className="divider my-4" />
-      <div>
+      <div className="mt-5">
         <h6 className="block text-secondary text-lg font-bold mb-4">
           Debris Reports by Island
         </h6>
         <div className="flex flex-col lg:flex-row justify-between items-start gap-3">
-          <div className="h-80 bg-neutral p-4 justify-between flex flex-col rounded-xl w-full lg:w-1/2 items-center">
+          <div className="h-80 bg-neutral p-4 rounded-xl w-full lg:w-1/2 items-center">
             <h6 className="block text-secondary text-sm font-bold text-center">
               Status
             </h6>
@@ -109,7 +108,7 @@ const DataInsights = () => {
   return (
     <Container>
       <div>
-        <h1 className="w-full text-4xl font-bold mb-12">
+        <h1 className="w-full text-4xl font-bold mb-6">
           Data Insights
         </h1>
         <div className="tabs tabs-boxed">