diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
index 6a68d1710..ba9a2fb0c 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/climatemappedafrica/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
index fca627bf5..e659b2925 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js
deleted file mode 100644
index 6e1be30f3..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React from "react";
-
-import useStyles from "./useStyles";
-
-function LocationHighlight({
-  className,
-  formattedValue: formattedValueProp,
-  isLoading,
-  value: valueProp,
-  title: titleProp,
-  ...props
-}) {
-  const classes = useStyles(props);
-
-  if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) {
-    return null;
-  }
-
-  const title = titleProp || (isLoading && "…");
-  const formattedValue = isLoading ? "…" : formattedValueProp || valueProp;
-  return (
-    <Box
-      alignItems="center"
-      display="inline-flex"
-      flexDirection="column"
-      flexGrow={1}
-      className={clsx(classes.root, className)}
-    >
-      <Typography variant="subtitle1" className={classes.title}>
-        {title}
-      </Typography>
-      <Typography variant="body2" className={classes.value}>
-        {formattedValue}
-      </Typography>
-    </Box>
-  );
-}
-
-LocationHighlight.propTypes = {
-  className: PropTypes.string,
-  isLoading: PropTypes.bool,
-  formattedValue: PropTypes.string,
-  title: PropTypes.string,
-  value: PropTypes.number,
-};
-
-LocationHighlight.defaultProps = {
-  className: undefined,
-  isLoading: undefined,
-  formattedValue: undefined,
-  title: undefined,
-  value: undefined,
-};
-
-export default LocationHighlight;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js
deleted file mode 100644
index ce1527380..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import LocationHighlight from ".";
-
-import { hurumapArgs } from "@/climatemappedafrica/config";
-
-const {
-  location: {
-    highlights: [highlight],
-  },
-} = hurumapArgs;
-export default {
-  title: "Components/HURUmap/LocationHighlight",
-};
-
-function Template(args) {
-  return <LocationHighlight {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = highlight;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js
deleted file mode 100644
index 18c304770..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography }) => ({
-  root: {},
-  title: {
-    fontSize: typography.pxToRem(10),
-    fontWeight: 300,
-    lineHeight: 24 / 10,
-    textTransform: "uppercase",
-  },
-  value: {},
-}));
-
-export default useStyles;
diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js
index feb8737cc..4b181ea1b 100644
--- a/apps/pesayetu/src/components/HURUmap/Location/index.js
+++ b/apps/pesayetu/src/components/HURUmap/Location/index.js
@@ -1,12 +1,10 @@
-import { LocationTag } from "@hurumap/core";
+import { LocationTag, LocationHighlight } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 
 import useStyles from "./useStyles";
 
-import LocationHighlight from "@/pesayetu/components/HURUmap/LocationHighlight";
-
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
 
@@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
               key={highlight.title}
               isLoading={isLoading}
               {...highlight}
-              classes={{
-                root: classes.highlight,
-                title: classes.highlightTitle,
-                value: classes.highlightValue,
-              }}
+              sx={(theme) => ({
+                paddingTop: "4.5px",
+                "&:not(:first-of-type)": {
+                  borderLeft: `1px solid ${theme.palette.grey.main}`,
+                },
+              })}
             />
           ))}
         </Box>
diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
index fca627bf5..e659b2925 100644
--- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
+++ b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
@@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     marginTop: 4.5,
     width: "100%",
   },
-  highlight: {
-    paddingTop: 4.5,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${palette.grey.main}`,
-    },
-  },
-  highlightTitle: {},
-  highlightValue: {},
 }));
 
 export default useStyles;
diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js
deleted file mode 100644
index 6e1be30f3..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React from "react";
-
-import useStyles from "./useStyles";
-
-function LocationHighlight({
-  className,
-  formattedValue: formattedValueProp,
-  isLoading,
-  value: valueProp,
-  title: titleProp,
-  ...props
-}) {
-  const classes = useStyles(props);
-
-  if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) {
-    return null;
-  }
-
-  const title = titleProp || (isLoading && "…");
-  const formattedValue = isLoading ? "…" : formattedValueProp || valueProp;
-  return (
-    <Box
-      alignItems="center"
-      display="inline-flex"
-      flexDirection="column"
-      flexGrow={1}
-      className={clsx(classes.root, className)}
-    >
-      <Typography variant="subtitle1" className={classes.title}>
-        {title}
-      </Typography>
-      <Typography variant="body2" className={classes.value}>
-        {formattedValue}
-      </Typography>
-    </Box>
-  );
-}
-
-LocationHighlight.propTypes = {
-  className: PropTypes.string,
-  isLoading: PropTypes.bool,
-  formattedValue: PropTypes.string,
-  title: PropTypes.string,
-  value: PropTypes.number,
-};
-
-LocationHighlight.defaultProps = {
-  className: undefined,
-  isLoading: undefined,
-  formattedValue: undefined,
-  title: undefined,
-  value: undefined,
-};
-
-export default LocationHighlight;
diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js
deleted file mode 100644
index 159936326..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import LocationHighlight from ".";
-
-import { hurumapArgs } from "@/pesayetu/config";
-
-const {
-  location: {
-    highlights: [highlight],
-  },
-} = hurumapArgs;
-export default {
-  title: "HURUmap/Components/LocationHighlight",
-};
-
-function Template(args) {
-  return <LocationHighlight {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = highlight;
diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js
deleted file mode 100644
index 18c304770..000000000
--- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography }) => ({
-  root: {},
-  title: {
-    fontSize: typography.pxToRem(10),
-    fontWeight: 300,
-    lineHeight: 24 / 10,
-    textTransform: "uppercase",
-  },
-  value: {},
-}));
-
-export default useStyles;
diff --git a/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js
new file mode 100644
index 000000000..cd960db2e
--- /dev/null
+++ b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js
@@ -0,0 +1,39 @@
+import { LocationHighlight } from "@hurumap/core";
+import React from "react";
+
+const highlights = [
+  {
+    title: "Population",
+    value: "1,000,000",
+  },
+  {
+    title: "GDP",
+    value: "1,000,000",
+  },
+  {
+    title: "Area",
+    value: "1,000,000",
+  },
+];
+
+export default {
+  title: "@hurumap/core/LocationHighlight",
+  argTypes: {
+    isLoading: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+function Template({ ...args }) {
+  return <LocationHighlight {...args} />;
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isLoading: false,
+  ...highlights[0],
+};
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
new file mode 100644
index 000000000..b0789e3ba
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js
@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+const LocationHighlight = React.forwardRef(function LocationHighlight(
+  {
+    TitleTypographyProps,
+    ValueTypographyProps,
+    title,
+    value,
+    isLoading,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <Box
+      alignItems="center"
+      display="inline-flex"
+      flexDirection="column"
+      flexGrow={1}
+      ref={ref}
+      {...props}
+    >
+      <Typography
+        variant="subtitle1"
+        {...TitleTypographyProps}
+        sx={(theme) => ({
+          fontSize: theme.typography.pxToRem(10),
+          fontWeight: 300,
+          lineHeight: 24 / 10,
+          textTransform: "uppercase",
+          ...TitleTypographyProps?.sx,
+        })}
+      >
+        {title}
+      </Typography>
+      <Typography variant="body2" {...ValueTypographyProps}>
+        {isLoading ? "…" : value}
+      </Typography>
+    </Box>
+  );
+});
+
+export default LocationHighlight;
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
new file mode 100644
index 000000000..c92cf918e
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocationHighlight renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1s0xv82"
+  >
+    <h6
+      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+    >
+      Population
+    </h6>
+    <p
+      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+    >
+      1,000,000
+    </p>
+  </div>
+</div>
+`;
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
new file mode 100644
index 000000000..4b417befa
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js
@@ -0,0 +1,13 @@
+import { render } from "@commons-ui/testing-library";
+import React from "react";
+
+import LocationHighlight from "./LocationHighlight";
+
+describe("LocationHighlight", () => {
+  it("renders unchanged", () => {
+    const { container } = render(
+      <LocationHighlight title="Population" value="1,000,000" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/hurumap-core/src/LocationHighlight/index.js b/packages/hurumap-core/src/LocationHighlight/index.js
new file mode 100644
index 000000000..5c355f40a
--- /dev/null
+++ b/packages/hurumap-core/src/LocationHighlight/index.js
@@ -0,0 +1,3 @@
+import LocationHighlight from "./LocationHighlight";
+
+export default LocationHighlight;
diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js
index 327f108d2..881ae0422 100644
--- a/packages/hurumap-core/src/index.js
+++ b/packages/hurumap-core/src/index.js
@@ -1,2 +1,3 @@
 /* eslint-disable import/prefer-default-export */
 export { default as LocationTag } from "./LocationTag";
+export { default as LocationHighlight } from "./LocationHighlight";