diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 191fe1ef6..18c26a9a2 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -32,6 +32,9 @@ import ReportingCard6 from '../reportingCards/ReportingCard6';
 import ReportingCard7 from '../reportingCards/ReportingCard7';
 import ReportingCard8 from '../reportingCards/ReportingCard8';
 import ReportingCard9 from '../reportingCards/ReportingCard9';
+import ReportingCard10 from '../reportingCards/ReportingCard10';
+import ReportingCard11 from '../reportingCards/ReportingCard11';
+import ReportingCard12 from '../reportingCards/ReportingCard12';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuMui from '@material-ui/core/Menu';
 import { format, subDays, formatDistanceToNow } from 'date-fns';
@@ -195,6 +198,17 @@ function Home(props) {
                 <Grid item xs={4}>
                   <ReportingCard8 startDate={startDate} endDate={endDate} />
                 </Grid>
+                <Grid item xs={4}>
+                  <ReportingCard10 startDate={startDate} endDate={endDate} />
+                </Grid>
+                {/*
+                <Grid item xs={4}>
+                  <ReportingCard11 startDate={startDate} endDate={endDate} />
+                </Grid>
+                */}
+                <Grid item xs={4}>
+                  <ReportingCard12 startDate={startDate} endDate={endDate} />
+                </Grid>
               </Grid>
             )}
           </div>
diff --git a/src/components/reportingCards/ReportingCard.js b/src/components/reportingCards/ReportingCard.js
index d088e712c..bf80b62bd 100644
--- a/src/components/reportingCards/ReportingCard.js
+++ b/src/components/reportingCards/ReportingCard.js
@@ -173,7 +173,7 @@ function ReportingCard(props) {
           </Box>
           <Box mt={6} />
           {data ? (
-            data.top.slice(0, 4).map((item, i) => (
+            data.top?.slice(0, 4).map((item, i) => (
               <Box key={i} className={classes.box4}>
                 <Typography className={classes.name}>{item.name}</Typography>
                 <Typography className={classes.number}>
diff --git a/src/components/reportingCards/ReportingCard10.js b/src/components/reportingCards/ReportingCard10.js
new file mode 100644
index 000000000..06149b343
--- /dev/null
+++ b/src/components/reportingCards/ReportingCard10.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_trees',
+    'trees',
+    undefined,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Trees',
+        text1: 'Total',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}
diff --git a/src/components/reportingCards/ReportingCard11.js b/src/components/reportingCards/ReportingCard11.js
new file mode 100644
index 000000000..c861606db
--- /dev/null
+++ b/src/components/reportingCards/ReportingCard11.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_species',
+    'surviving_species',
+    undefined,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Species',
+        text1: 'Total',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}
diff --git a/src/components/reportingCards/ReportingCard12.js b/src/components/reportingCards/ReportingCard12.js
new file mode 100644
index 000000000..41bfecc72
--- /dev/null
+++ b/src/components/reportingCards/ReportingCard12.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_catchments',
+    'catchments',
+    (d) => d.average,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Catchments',
+        text1: 'Average',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}