diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
index 722d0d1ac..d4760e94f 100644
--- a/apps/climatemappedafrica/package.json
+++ b/apps/climatemappedafrica/package.json
@@ -37,6 +37,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@hurumap/core": "workspace:*",
+ "@hurumap/next": "workspace:*",
"@mui/lab": "5.0.0-alpha.155",
"@mui/material": "^5.16.1",
"@mui/styles": "^5.16.1",
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
index 2ecc33ebe..c818dacf8 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -1,3 +1,4 @@
+import { Source } from "@hurumap/next";
import { useMediaQuery } from "@mui/material";
import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
@@ -12,10 +13,9 @@ import { calculateTooltipPosition, idify } from "./utils";
import ChartTooltip from "@/climatemappedafrica/components/HURUmap/ChartTooltip";
import IndicatorTitle from "@/climatemappedafrica/components/HURUmap/IndicatorTitle";
-import Source from "@/climatemappedafrica/components/HURUmap/Source";
import theme from "@/climatemappedafrica/theme";
-const useStyles = makeStyles(({ typography }) => ({
+const useStyles = makeStyles(() => ({
root: {
position: "relative",
width: "100%",
@@ -23,9 +23,6 @@ const useStyles = makeStyles(({ typography }) => ({
chart: {
width: "100%",
},
- source: {
- margin: `${typography.pxToRem(20)} 0`,
- },
}));
function Chart({
@@ -242,7 +239,12 @@ function Chart({
/>
)}
-