diff --git a/apps/climatemappedafrica/src/assets/icons/x-logo.svg b/apps/climatemappedafrica/src/assets/icons/x-logo.svg
new file mode 100644
index 000000000..5526e4215
--- /dev/null
+++ b/apps/climatemappedafrica/src/assets/icons/x-logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"/></svg>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
index a354b90d0..2884d8752 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
@@ -1,32 +1,54 @@
-import { RichTypography } from "@commons-ui/legacy";
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
-import Image from "@/climatemappedafrica/components/Image";
-
 function CategoryHeader({ title, description, icon, ...props }) {
-  const classes = useStyles();
-
   if (!title) {
     return null;
   }
   return (
-    <div className={classes.root}>
-      <Typography {...props} variant="h3" className={classes.title}>
+    <Box>
+      <Typography
+        {...props}
+        variant="h3"
+        sx={({ typography }) => ({
+          fontSize: typography.pxToRem(28),
+          display: "flex",
+          alignItems: "center",
+          scrollMarginTop: typography.pxToRem(110),
+          paddingTop: typography.pxToRem(40),
+          paddingBottom: typography.pxToRem(20),
+        })}
+      >
         {icon && (
-          <div className={classes.icon}>
-            <Image src={icon} layout="fill" />
-          </div>
+          <Box
+            sx={({ typography }) => ({
+              position: "relative",
+              height: typography.pxToRem(32),
+              width: typography.pxToRem(32),
+              marginRight: typography.pxToRem(10),
+              backgroundImage: `url(${icon})`,
+              backgroundSize: "contain",
+              backgroundRepeat: "no-repeat",
+            })}
+          />
         )}
         {title}
       </Typography>
-      <RichTypography variant="body2" className={classes.description}>
-        {description}
-      </RichTypography>
-    </div>
+      {description && (
+        <Typography
+          variant="body2"
+          sx={({ typography }) => ({
+            paddingBottom: typography.pxToRem(20),
+            "& p": {
+              margin: 0,
+            },
+          })}
+        >
+          {description}
+        </Typography>
+      )}
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js
deleted file mode 100644
index af084f80a..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography }) => ({
-  root: {},
-  title: {
-    fontSize: typography.pxToRem(28),
-    display: "flex",
-    alignItems: "center",
-    scrollMarginTop: typography.pxToRem(110),
-    paddingTop: typography.pxToRem(40),
-    paddingBottom: typography.pxToRem(20),
-  },
-  description: {
-    paddingBottom: typography.pxToRem(20),
-    "& p": {
-      margin: 0,
-    },
-  },
-  icon: {
-    position: "relative",
-    height: typography.pxToRem(32),
-    width: typography.pxToRem(32),
-    marginRight: typography.pxToRem(10),
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js
index 17827fdfa..68551c9f4 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js
@@ -1,5 +1,4 @@
-import { ButtonBase } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, ButtonBase } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState, useCallback } from "react";
 
@@ -7,21 +6,13 @@ import { idify } from "./utils";
 
 import ChartFilter from "@/climatemappedafrica/components/HURUmap/ChartFilter";
 
-const useStyles = makeStyles(({ typography }) => ({
-  root: {
-    paddingBottom: typography.pxToRem(18),
-  },
-}));
-
 function Filters({
   filterGroups,
   defaultFilters,
   filterSelectProps,
   setFilterSelectProps,
   view,
-  ...props
 }) {
-  const classes = useStyles(props);
   const [availableGroups, setAvailableGroups] = useState([]);
 
   const handleFilterSelectProps = (v) => {
@@ -122,7 +113,11 @@ function Filters({
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingBottom: typography.pxToRem(18),
+      })}
+    >
       {
         // default filters cannot be deleted
         // & their attributes cannot be changes, but values can
@@ -149,7 +144,7 @@ function Filters({
       {availableGroups?.length > 0 && (
         <ButtonBase onClick={addFilter}>Add new filter</ButtonBase>
       )}
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
index 5a048f711..ba7f1a382 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -1,8 +1,7 @@
 import { RichTypography } from "@commons-ui/legacy";
 import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
 import { Source } from "@hurumap/next";
-import { useMediaQuery, useTheme } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import * as vega from "vega";
 import embed from "vega-embed";
@@ -18,26 +17,13 @@ import FacebookIcon from "@/climatemappedafrica/assets/icons/Facebook.svg";
 import LinkedInIcon from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
 import InfoIcon from "@/climatemappedafrica/assets/icons/plus.svg";
 import ShareIcon from "@/climatemappedafrica/assets/icons/share.svg";
-import TwitterIcon from "@/climatemappedafrica/assets/icons/Twitter.svg";
 import WhatsAppIcon from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
+import XLogo from "@/climatemappedafrica/assets/icons/x-logo.svg";
 import cfalogo from "@/climatemappedafrica/assets/logos/cfa.svg";
 import projectlogo from "@/climatemappedafrica/assets/logos/projectLogo.svg";
 import config, { hurumapArgs } from "@/climatemappedafrica/config";
 import site from "@/climatemappedafrica/utils/site";
 
-const useStyles = makeStyles(({ typography }) => ({
-  root: {
-    position: "relative",
-    width: "100%",
-    "&:last-of-type": {
-      marginBottom: typography.pxToRem(32),
-    },
-  },
-  chart: {
-    width: "100%",
-  },
-}));
-
 function Chart({
   indicator,
   indicatorTitle,
@@ -48,7 +34,6 @@ function Chart({
   isCompare,
   ...props
 }) {
-  const classes = useStyles(props);
   const chartRef = useRef();
   const tooltipRef = useRef();
   const [view, setView] = useState(null);
@@ -228,7 +213,7 @@ function Chart({
     },
     {
       name: "Twitter",
-      icon: TwitterIcon,
+      icon: XLogo,
       props: { title, via: "Code4Africa", related: ["Code4Africa"] },
     },
     {
@@ -328,7 +313,16 @@ function Chart({
   ];
 
   return (
-    <div className={classes.root} id={`chart-${id}-${geoCode}`}>
+    <Box
+      id={`chart-${id}-${geoCode}`}
+      sx={({ typography }) => ({
+        position: "relative",
+        width: "100%",
+        "&:last-of-type": {
+          marginBottom: typography.pxToRem(32),
+        },
+      })}
+    >
       <IndicatorTitle
         title={title}
         description={description}
@@ -357,7 +351,12 @@ function Chart({
           view={view}
         />
       )}
-      <div ref={chartRef} className={classes.chart} />
+      <Box
+        ref={chartRef}
+        sx={{
+          width: "100%",
+        }}
+      />
       <RichTypography
         variant="body2"
         sx={(theme) => ({
@@ -393,7 +392,7 @@ function Chart({
           }
         />
       )}
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
index e986d16f4..c54b4a642 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
@@ -1,9 +1,7 @@
-import { Grid, IconButton } from "@mui/material";
+import { Box, Grid, IconButton, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
-import useStyles from "./useStyles";
-
 import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg";
 import Select from "@/climatemappedafrica/components/Select";
 
@@ -17,10 +15,7 @@ function ChartFilter({
   valueText = "Select a value:",
   selectedAttribute: selectedAttributeProp,
   selectedValue: selectedValueProp,
-  ...props
 }) {
-  const classes = useStyles(props);
-
   const [selectedAttribute, setSelectedAttribute] = useState(
     selectedAttributeProp,
   );
@@ -29,6 +24,8 @@ function ChartFilter({
   const [attributeOptions, setAttributeOptions] = useState([]);
   const [valueOptions, setValueOptions] = useState([]);
 
+  const theme = useTheme();
+
   useEffect(() => {
     if (index === "default") {
       setAttributeOptions([selectedAttribute]);
@@ -86,36 +83,75 @@ function ChartFilter({
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingBottom: typography.pxToRem(10),
+      })}
+    >
       <Grid container alignItems="flex-end">
         {attributeOptions?.length > 0 && (
-          <Grid item className={classes.grid}>
+          <Grid
+            sx={({ typography }) => ({
+              marginRight: { md: typography.pxToRem(10) },
+            })}
+          >
             <Select
               helperText={attributeText}
               options={attributeOptions}
               selected={selectedAttribute}
               onChange={onAtrributeChange}
               disabled={index === "default"}
-              classes={{
-                select: classes.select,
-                filled: classes.filled,
-                paper: classes.selectPaper,
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  maxHeight: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                  borderRadius: 0,
+                  marginTop: theme.typography.pxToRem(5),
+                },
               }}
             />
           </Grid>
         )}
         {valueOptions?.length > 0 && (
-          <Grid item className={classes.grid}>
+          <Grid
+            item
+            sx={({ typography }) => ({
+              marginRight: { md: typography.pxToRem(10) },
+            })}
+          >
             <Select
               helperText={valueText}
               options={valueOptions}
               selected={selectedValue}
               label={selectedValue?.length ? "" : "Select a value"}
               onChange={onValueChange}
-              classes={{
-                select: classes.select,
-                filled: classes.filled,
-                paper: classes.selectPaper,
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  maxHeight: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                  borderRadius: 0,
+                  marginTop: theme.typography.pxToRem(5),
+                },
               }}
             />
           </Grid>
@@ -123,7 +159,15 @@ function ChartFilter({
         {index !== "default" && index !== 0 && (
           <Grid item>
             <IconButton
-              className={classes.icon}
+              sx={({ palette, typography }) => ({
+                padding: 0,
+                background: palette.background.paper,
+                "& :hover": {
+                  background: palette.background.paper,
+                },
+                height: typography.pxToRem(36),
+                width: typography.pxToRem(36),
+              })}
               onClick={removeFilter}
               size="large"
             >
@@ -132,7 +176,7 @@ function ChartFilter({
           </Grid>
         )}
       </Grid>
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js
deleted file mode 100644
index 1a6c85531..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
-  root: {
-    paddingBottom: typography.pxToRem(10),
-  },
-  grid: {
-    [breakpoints.up("md")]: {
-      marginRight: typography.pxToRem(10),
-    },
-  },
-  icon: {
-    padding: 0,
-    background: palette.background.paper,
-    "& :hover": {
-      background: palette.background.paper,
-    },
-    height: typography.pxToRem(36),
-    width: typography.pxToRem(36),
-  },
-  select: {
-    width: typography.pxToRem(165),
-    height: typography.pxToRem(40),
-    paddingLeft: 0,
-    [breakpoints.up("lg")]: {
-      width: typography.pxToRem(200),
-    },
-  },
-  filled: {
-    padding: `${typography.pxToRem(10)} ${typography.pxToRem(
-      40,
-    )} ${typography.pxToRem(10)} ${typography.pxToRem(20)} !important`,
-  },
-  selectPaper: {
-    maxHeight: typography.pxToRem(310),
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
index 5257ff0e9..d2cca6a5f 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
@@ -1,13 +1,9 @@
 import { Source } from "@hurumap/next";
-import { Tooltip, Typography, LinearProgress } from "@mui/material";
-import clsx from "clsx";
+import { Tooltip, Typography, LinearProgress, Box, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 function KeyMetric({
-  className,
   formattedValue: formattedValueProp,
   value: valueProp,
   title,
@@ -17,10 +13,8 @@ function KeyMetric({
   parentName,
   parentFormattedValue,
   metadata: { source, url } = {},
-  ...props
+  sx,
 }) {
-  const classes = useStyles(props);
-
   if (!((valueProp || formattedValueProp) && title)) {
     return null;
   }
@@ -33,13 +27,37 @@ function KeyMetric({
   const tooltipTitle = `${title}: ${formattedValue}`;
 
   return (
-    <div className={clsx(classes.root, className)}>
-      <div className={classes.metric}>
+    <Grid
+      container
+      direction="column"
+      justifyContent="space-between"
+      sx={({ typography }) => ({
+        width: "100%",
+        marginBottom: typography.pxToRem(20),
+        ...sx,
+      })}
+    >
+      <Box
+        sx={({ palette, typography }) => ({
+          backgroundColor: palette.background.paper,
+          padding: `${typography.pxToRem(10)} ${typography.pxToRem(
+            20,
+          )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`,
+        })}
+      >
         <Typography variant="h3">{formattedValue}</Typography>
         <Tooltip title={tooltipTitle}>
           <Typography
             variant="caption"
-            className={clsx(classes.text, classes.title)}
+            sx={({ typography }) => ({
+              fontSize: typography.pxToRem(11),
+              overflow: "hidden",
+              display: "-webkit-box",
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: "vertical",
+              textOverflow: "ellipsis",
+              marginBottom: typography.pxToRem(8),
+            })}
           >
             {title}
           </Typography>
@@ -48,20 +66,25 @@ function KeyMetric({
           sensitivity: "accent",
         }) === 0 ? (
           <LinearProgress
-            classes={{
-              root: classes.progressBar,
-              determinate: classes.progressBarDeterminate,
-            }}
+            sx={({ palette }) => ({
+              "&.MuiLinearProgress-determinate": {
+                backgroundColor: palette.grey.main,
+              },
+            })}
             value={parseFloat(`${value}`.replace(",", ""))}
             color={color}
             variant="determinate"
           />
         ) : null}
-      </div>
+      </Box>
       {parentValue && (
         <Typography
           variant="caption"
-          className={clsx(classes.text, classes.description)}
+          sx={({ typography }) => ({
+            fontSize: typography.pxToRem(11),
+            padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`,
+            color: "#666666",
+          })}
         >
           {parentValue}
         </Typography>
@@ -74,12 +97,11 @@ function KeyMetric({
       >
         {source}
       </Source>
-    </div>
+    </Grid>
   );
 }
 
 KeyMetric.propTypes = {
-  className: PropTypes.string,
   color: PropTypes.string,
   description: PropTypes.string,
   displayFormat: PropTypes.string,
diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js
deleted file mode 100644
index 035b5d260..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    marginBottom: typography.pxToRem(20),
-  },
-  metric: {
-    backgroundColor: palette.background.paper,
-    padding: `${typography.pxToRem(10)} ${typography.pxToRem(
-      20,
-    )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`,
-  },
-
-  progressBar: {},
-  progressBarDeterminate: {
-    backgroundColor: palette.grey.main,
-  },
-  text: {
-    fontSize: typography.pxToRem(11),
-  },
-  title: {
-    overflow: "hidden",
-    display: "-webkit-box",
-    WebkitLineClamp: 1,
-    WebkitBoxOrient: "vertical",
-    textOverflow: "ellipsis",
-    marginBottom: typography.pxToRem(8),
-  },
-  description: {
-    padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`,
-    color: "#666666",
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js
index ca10402df..1f473d41b 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Grid,
   IconButton,
@@ -8,8 +9,6 @@ import {
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import CloseIcon from "@/climatemappedafrica/assets/icons/closeBlack.svg";
 import Image from "@/climatemappedafrica/components/Image";
 import slugify from "@/climatemappedafrica/utils/slugify";
@@ -18,19 +17,37 @@ function SvgIcon(props) {
   return <MuiSvgIcon {...props} />;
 }
 
-function LocationHeader({ icon, level, onClick, parent, title, ...props }) {
-  const classes = useStyles(props);
-
+function LocationHeader({ icon, level, onClick, parent, title }) {
   if (!title) {
     return null;
   }
   return (
-    <div id={slugify(title)} className={classes.root}>
+    <Box
+      id={slugify(title)}
+      sx={({ typography, palette }) => ({
+        borderBottom: `solid 1px ${palette.divider}`,
+        paddingTop: typography.pxToRem(20),
+        position: {
+          lg: "relative",
+        },
+      })}
+    >
       <Grid container justifyContent="space-between">
         <Grid item>
           <Grid container alignItems="flex-start">
             <Grid item>
-              <Typography variant="h3" className={classes.title}>
+              <Typography
+                variant="h3"
+                sx={({ palette, typography }) => ({
+                  borderBottom: ({ variant }) =>
+                    `solid 5px ${
+                      variant === "secondary"
+                        ? palette.secondary.main
+                        : palette.primary.main
+                    }`,
+                  marginBottom: typography.pxToRem(20),
+                })}
+              >
                 {title}
               </Typography>
             </Grid>
@@ -38,14 +55,28 @@ function LocationHeader({ icon, level, onClick, parent, title, ...props }) {
               <Grid item>
                 <IconButton
                   onClick={onClick}
-                  className={classes.closeButton}
+                  sx={({ typography }) => ({
+                    marginLeft: typography.pxToRem(20),
+                    maxHeight: typography.pxToRem(44),
+                    maxWidth: typography.pxToRem(44),
+                    overflow: "hidden",
+                    padding: 0,
+                  })}
                   size="large"
                 >
                   <SvgIcon
                     component={CloseIcon}
                     style={{ fontSize: 44 }}
                     viewBox="0 0 44 44"
-                    className={classes.closeButtonIcon}
+                    sx={({ palette }) => ({
+                      color: palette.grey.light,
+                      "&:hover": {
+                        color: "#666",
+                        "& .Component_108-1_svg__b": {
+                          stroke: palette.common.white,
+                        },
+                      },
+                    })}
                   />
                 </IconButton>
               </Grid>
@@ -54,20 +85,47 @@ function LocationHeader({ icon, level, onClick, parent, title, ...props }) {
         </Grid>
         {icon ? (
           <Grid item>
-            <Button variant="contained" className={classes.button}>
-              <div className={classes.icon}>
+            <Button
+              variant="contained"
+              sx={({ typography, palette }) => ({
+                borderRadius: "50%",
+                backgroundColor: palette.grey.light,
+                width: typography.pxToRem(44),
+                height: typography.pxToRem(44),
+                minWidth: typography.pxToRem(44),
+                boxShadow: "none",
+                marginTop: {
+                  // quick fix to ensure print button aligns with rich data/pin buttons
+                  lg: "10px",
+                },
+              })}
+            >
+              <Box
+                sx={({ typography }) => ({
+                  position: "relative",
+                  height: typography.pxToRem(20),
+                  minWidth: typography.pxToRem(20),
+                })}
+              >
                 <Image src={icon} layout="fill" />
-              </div>
+              </Box>
             </Button>
           </Grid>
         ) : null}
       </Grid>
       {parent && (
-        <Typography variant="subtitle2" className={classes.description}>
+        <Typography
+          variant="subtitle2"
+          sx={({ palette, typography }) => ({
+            textTransform: "uppercase",
+            borderBottom: `solid 1px ${palette.divider}`,
+            paddingBottom: typography.pxToRem(10),
+          })}
+        >
           {`A ${level} in ${parent}`}
         </Typography>
       )}
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js
deleted file mode 100644
index 2f17071f0..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
-  root: {
-    borderBottom: `solid 1px ${palette.divider}`,
-    paddingTop: typography.pxToRem(20),
-    [breakpoints.up("lg")]: {
-      position: "relative",
-    },
-  },
-  titleContent: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  title: {
-    borderBottom: ({ variant }) =>
-      `solid 5px ${
-        variant === "secondary" ? palette.secondary.main : palette.primary.main
-      }`,
-    marginBottom: typography.pxToRem(20),
-  },
-  description: {
-    textTransform: "uppercase",
-    borderBottom: `solid 1px ${palette.divider}`,
-    paddingBottom: typography.pxToRem(10),
-  },
-  icon: {
-    position: "relative",
-    height: typography.pxToRem(20),
-    minWidth: typography.pxToRem(20),
-  },
-  button: {
-    borderRadius: "50%",
-    backgroundColor: palette.grey.light,
-    width: typography.pxToRem(44),
-    height: typography.pxToRem(44),
-    minWidth: typography.pxToRem(44),
-    boxShadow: "none",
-    [breakpoints.up("lg")]: {
-      // quick fix to ensure print button aligns with rich data/pin buttons
-      marginTop: "10px",
-    },
-  },
-  closeButton: {
-    marginLeft: typography.pxToRem(20),
-    maxHeight: typography.pxToRem(44),
-    maxWidth: typography.pxToRem(44),
-    overflow: "hidden",
-    padding: 0,
-  },
-  closeButtonIcon: {
-    color: palette.grey.light,
-    "&:hover": {
-      color: "#666",
-      "& .Component_108-1_svg__b": {
-        stroke: palette.common.white,
-      },
-    },
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js
index 3fc789a10..8d07887ba 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js
@@ -1,4 +1,4 @@
-import { Button, Typography } from "@mui/material";
+import { Button, Typography, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -14,12 +14,11 @@ import { hurumapArgs } from "@/climatemappedafrica/config";
 
 // being last is necessary for style override to work
 // eslint-disable-next-line import/order
-import useStyles from "./useStyles";
 
 function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) {
-  const classes = useStyles(props);
   const { onSelectLocation, primaryProfile, dataNotAvailable } = props;
   const { geography, items } = primaryProfile;
+  const theme = useTheme();
 
   const { pinAndCompare } = hurumapArgs;
 
@@ -85,13 +84,55 @@ function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) {
         name="mobilepanel"
         items={formatedItems}
         activeTab={activeTab}
-        classes={{
-          divider: classes.tabsDivider,
-          indicator: classes.tabIndicator,
-          tabs: classes.tabs,
-          tab: classes.tab,
-          tabPanels: classes.tabPanels,
-          tabSelected: classes.tabSelected,
+        DividerProps={{
+          display: "none",
+        }}
+        TabIndicatorProps={{
+          display: "none",
+        }}
+        TabPanelProps={{
+          marginTop: 0,
+        }}
+        TabsProps={{
+          paddingBottom: theme.typography.pxToRem(16),
+          paddingTop: theme.typography.pxToRem(16),
+          paddingLeft: {
+            xs: theme.typography.pxToRem(20),
+            md: theme.typography.pxToRem(80),
+          },
+          paddingRight: {
+            xs: theme.typography.pxToRem(20),
+            md: theme.typography.pxToRem,
+          },
+          backgroundColor: theme.palette.background.paper,
+          zIndex: theme.zIndex.appBar,
+          width: "100%",
+          position: "sticky",
+          top: 66, // below navbar
+        }}
+        TabProps={{
+          color: "#212529",
+          backgroundColor: theme.palette.background.default,
+          fontWeight: 500,
+          fontSize: theme.typography.pxToRem(12),
+          letterSpacing: theme.typography.pxToRem(1.6),
+          lineHeight: 30 / 12,
+          marginRight: theme.typography.pxToRem(20),
+          padding: `${theme.typography.pxToRem(6)} ${theme.typography.pxToRem(20)}`,
+          height: theme.typography.pxToRem(29),
+          maxWidth: "unset",
+          textTransform: "unset",
+          "&:last-of-type": {
+            marginRight: 0,
+          },
+          "&.Mui-selected": {
+            color: theme.palette.background.default,
+            backgroundColor: "#666666",
+          },
+          "&:hover, &:focus, &$selected": {
+            color: theme.palette.background.default,
+            backgroundColor: "#666666",
+          },
         }}
       />
       {items?.length > 0 && (
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js
deleted file mode 100644
index 5dd914e38..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-// We can't migrate these styles to sx until components/Tabs is upgraded
-const useStyles = makeStyles(
-  ({ typography, palette, zIndex, breakpoints }) => ({
-    tabs: {
-      paddingBottom: typography.pxToRem(16),
-      paddingTop: typography.pxToRem(16),
-      paddingLeft: typography.pxToRem(20),
-      paddingRight: typography.pxToRem(20),
-      backgroundColor: palette.background.paper,
-      zIndex: zIndex.appBar,
-      width: "100%",
-      position: "sticky",
-      top: 66, // below navbar
-      [breakpoints.up("md")]: {
-        paddingLeft: typography.pxToRem(80),
-        paddingRight: typography.pxToRem(80),
-      },
-    },
-    tabsDivider: {
-      display: "none",
-    },
-    tab: {
-      color: "#212529",
-      backgroundColor: palette.background.default,
-      fontWeight: 500,
-      fontSize: typography.pxToRem(12),
-      letterSpacing: typography.pxToRem(1.6),
-      lineHeight: 30 / 12,
-      marginRight: typography.pxToRem(20),
-      padding: `${typography.pxToRem(6)} ${typography.pxToRem(20)}`,
-      height: typography.pxToRem(29),
-      maxWidth: "unset",
-      textTransform: "unset",
-      "&:last-of-type": {
-        marginRight: 0,
-      },
-    },
-    tabIndicator: {
-      display: "none",
-    },
-    tabPanels: {
-      marginTop: 0,
-    },
-    tabSelected: {
-      "&.Mui-selected": {
-        color: palette.background.default,
-      },
-      backgroundColor: "#666666",
-      "&:hover, &:focus, &$selected": {
-        color: palette.background.default,
-        backgroundColor: "#666666",
-      },
-    },
-  }),
-);
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
index 09342406a..88c1c86e8 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
@@ -1,6 +1,4 @@
 import { Grid } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import clsx from "clsx";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
 import React, { Fragment, memo } from "react";
@@ -20,33 +18,6 @@ const Chart = dynamic(
   },
 );
 
-const useStyles = makeStyles(({ typography, breakpoints }) => ({
-  metrics: {
-    marginTop: typography.pxToRem(24),
-  },
-  metricRow: {
-    [breakpoints.up("lg")]: {
-      marginBottom: typography.pxToRem(14),
-      marginLeft: typography.pxToRem(18),
-      maxWidth: typography.pxToRem(224),
-      "&:first-of-type": {
-        marginLeft: 0,
-      },
-    },
-  },
-  secondaryMetricRow: {
-    [breakpoints.up("lg")]: {
-      maxWidth: "100%",
-      marginLeft: 0,
-    },
-  },
-  secondaryMetric: {
-    [breakpoints.up("lg")]: {
-      maxWidth: typography.pxToRem(350),
-    },
-  },
-}));
-
 const ProfileItems = memo(
   function ProfileItems({
     categories,
@@ -57,8 +28,6 @@ const ProfileItems = memo(
     secondaryProfile,
     geoCode,
   }) {
-    const classes = useStyles();
-
     return (
       <>
         {categories.map((category, categoryIndex) => (
@@ -76,7 +45,12 @@ const ProfileItems = memo(
                   id={slugify(`${category.title}-${child.title}`)}
                   title={child.title}
                 />
-                <Grid container className={classes.metrics}>
+                <Grid
+                  container
+                  sx={({ typography }) => ({
+                    marginTop: typography.pxToRem(24),
+                  })}
+                >
                   {child?.metrics?.map(
                     (
                       {
@@ -116,8 +90,21 @@ const ProfileItems = memo(
                           container
                           lg={secondaryProfile ? 12 : 4}
                           key={label}
-                          className={clsx(classes.metricRow, {
-                            [classes.secondaryMetricRow]: secondaryProfile,
+                          sx={({ typography }) => ({
+                            marginBottom: {
+                              lg: typography.pxToRem(14),
+                            },
+                            marginLeft: {
+                              lg: secondaryProfile ? typography.pxToRem(18) : 0,
+                            },
+                            maxWidth: {
+                              lg: secondaryProfile
+                                ? typography.pxToRem(224)
+                                : "100%",
+                            },
+                            "&:first-of-type": {
+                              marginLeft: 0,
+                            },
                           })}
                         >
                           <Grid item xs={12} lg={secondaryProfile ? 6 : 12}>
@@ -132,11 +119,11 @@ const ProfileItems = memo(
                               value={value}
                               displayFormat={displayFormat}
                               metadata={metadata}
-                              classes={{
-                                root: clsx({
-                                  [classes.secondaryMetric]: secondaryProfile,
-                                }),
-                              }}
+                              sx={({ typography }) => ({
+                                maxWidth: {
+                                  lg: typography.pxToRem(350),
+                                },
+                              })}
                             />
                           </Grid>
                           {secondaryMetric && (
@@ -152,7 +139,11 @@ const ProfileItems = memo(
                                 value={secondaryValue}
                                 displayFormat={secondaryDisplayFormat}
                                 metadata={secondaryMetric.metric}
-                                className={classes.secondaryMetric}
+                                sx={({ typography }) => ({
+                                  maxWidth: {
+                                    lg: typography.pxToRem(350),
+                                  },
+                                })}
                               />
                             </Grid>
                           )}
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js
index 1de16dbb2..f60a2d27f 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js
@@ -1,4 +1,4 @@
-import { Box, IconButton, SvgIcon } from "@mui/material";
+import { Grid, IconButton, SvgIcon, alpha, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 
@@ -6,10 +6,6 @@ import PinIconDefault from "@/climatemappedafrica/assets/pinBlack.svg";
 import PinIconSelected from "@/climatemappedafrica/assets/pinSelected.svg";
 import Select from "@/climatemappedafrica/components/Select";
 
-// useStyles uses import/definition order to determine how classes are ordered.
-// eslint-disable-next-line import/order
-import useStyles from "./useStyles";
-
 function PinIcon(props) {
   return <SvgIcon {...props} />;
 }
@@ -23,9 +19,8 @@ function PinAndCompare({
   onClickPin,
   onClose,
   placeholder,
-  ...props
 }) {
-  const classes = useStyles(props);
+  const theme = useTheme();
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState(null);
   const options = locations
@@ -67,11 +62,30 @@ function PinAndCompare({
   const component = open ? PinIconSelected : PinIconDefault;
 
   return (
-    <Box display="flex" alignItems="flex-end" className={classes.root}>
+    <Grid
+      container
+      alignItems="flex-end"
+      sx={({ palette, typography }) => ({
+        padding: `${typography.pxToRem(20)} 0`,
+        borderBottom: `solid 1px ${palette.divider}`,
+      })}
+    >
       {!isMobile && (
         <IconButton
           onClick={handleButtonClick}
-          className={classes.pinButton}
+          sx={({ palette, typography }) => ({
+            maxHeight: typography.pxToRem(40),
+            maxWidth: typography.pxToRem(40),
+            overflow: "hidden",
+            padding: 0,
+            marginRight: typography.pxToRem(14),
+            backgroundColor: palette.grey.light,
+            borderRadius: "0px 2px 2px 0px",
+            boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`, // #00000029
+            "&:hover,&:focus,&:focus-within": {
+              backgroundColor: palette.grey.light,
+            },
+          })}
           size="large"
         >
           <PinIcon
@@ -91,13 +105,24 @@ function PinAndCompare({
         options={options}
         placeholder={placeholder}
         selected={selected}
-        classes={{
-          select: classes.locationSelect,
-          paper: classes.selectPaper,
-          filled: classes.filled,
+        SelectProps={{
+          width: theme.typography.pxToRem(205),
+          height: theme.typography.pxToRem(40),
+          paddingLeft: 0,
+          "& .MuiSelect-filled": {
+            padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+              10,
+            )} ${theme.typography.pxToRem(15)} !important`,
+          },
+        }}
+        MenuProps={{
+          "& .MuiMenu-paper": {
+            height: theme.typography.pxToRem(310),
+            boxShadow: "none",
+          },
         }}
       />
-    </Box>
+    </Grid>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js
deleted file mode 100644
index ec69a427c..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { alpha } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    padding: `${typography.pxToRem(20)} 0`,
-    borderBottom: `solid 1px ${palette.divider}`,
-  },
-  pinButton: {
-    maxHeight: typography.pxToRem(40),
-    maxWidth: typography.pxToRem(40),
-    overflow: "hidden",
-    padding: 0,
-    marginRight: typography.pxToRem(14),
-    backgroundColor: palette.grey.light,
-    borderRadius: "0px 2px 2px 0px",
-    boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`, // #00000029
-    "&:hover,&:focus,&:focus-within": {
-      backgroundColor: palette.grey.light,
-    },
-  },
-  locationSelect: {
-    width: typography.pxToRem(205),
-    height: typography.pxToRem(40),
-    paddingLeft: 0,
-  },
-  filled: {
-    padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem(
-      10,
-    )} ${typography.pxToRem(15)} !important`,
-  },
-  selectPaper: {
-    height: typography.pxToRem(310),
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js
index ba5067077..8f723bae9 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js
@@ -1,50 +1,51 @@
-import { RichTypography } from "@commons-ui/legacy";
-import { Typography } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
-  root: {
-    borderBottom: `solid 1px ${palette.divider}`,
-    borderTop: `solid 1px ${palette.divider}`,
-  },
-  title: {
-    color: "#1c2030",
-    fontWeight: 400,
-    letterSpacing: typography.pxToRem(2),
-    paddingBottom: typography.pxToRem(20),
-    paddingTop: typography.pxToRem(20),
-    // In mobile, we need to account for navbar + category tabs
-    scrollMarginTop: typography.pxToRem(160),
-    textTransform: "uppercase",
-    [breakpoints.up("lg")]: {
-      scrollMarginTop: typography.pxToRem(110),
-    },
-  },
-  description: {
-    paddingBottom: typography.pxToRem(20),
-    "& p": {
-      margin: 0,
-    },
-  },
-}));
-
 function SubcategoryHeader({ title, description, ...props }) {
-  const classes = useStyles(props);
-
   if (!title) {
     return null;
   }
   return (
-    <div className={classes.root}>
-      <Typography {...props} variant="h5" className={classes.title}>
+    <Box
+      sx={({ palette }) => ({
+        borderBottom: `solid 1px ${palette.divider}`,
+        borderTop: `solid 1px ${palette.divider}`,
+      })}
+    >
+      <Typography
+        {...props}
+        variant="h5"
+        sx={({ typography }) => ({
+          color: "#1c2030",
+          fontWeight: 400,
+          letterSpacing: typography.pxToRem(2),
+          paddingBottom: typography.pxToRem(20),
+          paddingTop: typography.pxToRem(20),
+          // In mobile, we need to account for navbar + category tabs
+          scrollMarginTop: {
+            xs: typography.pxToRem(160),
+            lg: typography.pxToRem(110),
+          },
+          textTransform: "uppercase",
+        })}
+      >
         {title}
       </Typography>
-      <RichTypography variant="body2" className={classes.description}>
-        {description}
-      </RichTypography>
-    </div>
+      {description && (
+        <Typography
+          variant="body2"
+          sx={({ typography }) => ({
+            paddingBottom: typography.pxToRem(20),
+            "& p": {
+              margin: 0,
+            },
+          })}
+        >
+          {description}
+        </Typography>
+      )}
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js
index d5b49488b..031a05865 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js
@@ -1,18 +1,37 @@
+import { Box, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
-function Line({ x1, x2, y1, y2, ...props }) {
-  const classes = useStyles(props);
+function Line({ x1, x2, y1, y2 }) {
+  const theme = useTheme();
 
   return (
-    <div className={classes.lineContainer}>
-      <svg className={classes.line} height="100vh" width="100vw">
-        <line x1={x1} y1={y1} x2={x2} y2={y2} />
+    <Box
+      sx={{
+        position: "fixed",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999999,
+        pointerEvents: "none",
+      }}
+    >
+      <svg height="100vh" width="100vw">
+        <line
+          x1={x1}
+          y1={y1}
+          x2={x2}
+          y2={y2}
+          style={{
+            strokeWidth: theme.typography.pxToRem(1),
+            stroke: theme.palette.primary.main,
+            fill: theme.palette.primary.main,
+          }}
+        />
         <circle cx={x2} cy={y2} r="9" strokeWidth={2} stroke="white" />
       </svg>
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
index 1613f2e3f..2cf007a75 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
@@ -1,46 +1,43 @@
 import { RichText } from "@commons-ui/payload";
-import { Grid, Typography, IconButton, Avatar } from "@mui/material";
+import { Grid, Typography, IconButton, Avatar, Box } from "@mui/material";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import CloseIcon from "@/climatemappedafrica/assets/icons/close.svg";
 import Image from "@/climatemappedafrica/components/Image";
 
-function TutorialStep({ description, title, image, selector, ...props }) {
-  const classes = useStyles(props);
+function TutorialStep({ description, title, image }) {
   const { setIsOpen, currentStep } = useTour();
   const handleClose = () => {
     setIsOpen(false);
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingLeft: typography.pxToRem(34),
+        paddingTop: typography.pxToRem(25),
+        paddingRight: typography.pxToRem(39),
+        width: typography.pxToRem(964),
+      })}
+    >
       <Grid
-        className={classes.header}
+        sx={({ typography }) => ({
+          marginBottom: typography.pxToRem(48),
+        })}
         container
         justifyContent="space-between"
         alignItems="center"
       >
         <Grid item>
-          <Typography
-            id={`tutorial-title-${currentStep}`}
-            className={classes.title}
-            variant="h4"
-          >
+          <Typography id={`tutorial-title-${currentStep}`} variant="h4">
             {title}
           </Typography>
         </Grid>
         {handleClose && (
           <Grid item>
-            <IconButton
-              aria-label="close"
-              className={classes.closeButton}
-              onClick={handleClose}
-              size="large"
-            >
+            <IconButton aria-label="close" onClick={handleClose} size="large">
               <CloseIcon />
             </IconButton>
           </Grid>
@@ -49,7 +46,13 @@ function TutorialStep({ description, title, image, selector, ...props }) {
       <Grid container justifyContent="space-between">
         <Grid item xs={12} md={5} container wrap="nowrap">
           <Grid item>
-            <Avatar className={classes.currentStep}>
+            <Avatar
+              sx={({ palette, typography }) => ({
+                background: palette.primary.main,
+                width: typography.pxToRem(48),
+                height: typography.pxToRem(48),
+              })}
+            >
               <Typography color="textSecondary" variant="h3">
                 {currentStep + 1}
               </Typography>
@@ -74,16 +77,14 @@ function TutorialStep({ description, title, image, selector, ...props }) {
           <Image width={376} height={325} src={image} />
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
 
 TutorialStep.propTypes = {
   description: PropTypes.arrayOf(PropTypes.shape({})),
   image: PropTypes.string,
-  onClose: PropTypes.func,
   title: PropTypes.string,
-  selector: PropTypes.string,
 };
 
 export default TutorialStep;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js
deleted file mode 100644
index e6059fd98..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    paddingLeft: typography.pxToRem(34),
-    paddingTop: typography.pxToRem(25),
-    paddingRight: typography.pxToRem(39),
-    width: typography.pxToRem(964),
-  },
-  header: {
-    marginBottom: typography.pxToRem(48),
-  },
-  description: {
-    marginLeft: typography.pxToRem(16),
-    width: typography.pxToRem(278),
-    lineHeight: 30 / 16,
-    "& p": {
-      marginTop: 0,
-      marginBottom: typography.pxToRem(32),
-    },
-  },
-  currentStep: {
-    background: palette.primary.main,
-    width: typography.pxToRem(48),
-    height: typography.pxToRem(48),
-  },
-  title: {},
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js
index 49f334e16..8d411070c 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js
@@ -1,4 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { styled } from "@mui/material/styles";
 import { TourProvider, useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -6,29 +6,22 @@ import React, { useState } from "react";
 import Connector from "@/climatemappedafrica/components/HURUmap/Tutorial/Connector";
 import TutorialStep from "@/climatemappedafrica/components/HURUmap/Tutorial/TutorialStep";
 
-const useStyles = makeStyles(({ typography, palette }) => ({
-  tour: {
-    width: typography.pxToRem(1000),
-    maxWidth: "100vw  !important",
-    top: `${typography.pxToRem(200)} !important`,
-    left: "50% !important",
-    transform: "translateX(-50%) !important",
-    paddingBottom: `${typography.pxToRem(48.62)} !important`,
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "column",
-    border: `1px solid ${palette.primary.main}`,
-    borderRadius: typography.pxToRem(10),
-    "--reactour-accent": "#1C2030",
-  },
-  mask: {
-    color: "#666666 !important",
-    opacity: "0.5 !important",
-  },
+const StyledTour = styled(TourProvider)(({ theme }) => ({
+  width: theme.typography.pxToRem(1000),
+  maxWidth: "100vw  !important",
+  top: `${theme.typography.pxToRem(200)} !important`,
+  left: "50% !important",
+  transform: "translateX(-50%) !important",
+  paddingBottom: `${theme.typography.pxToRem(48.62)} !important`,
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "column",
+  border: `1px solid ${theme.palette.primary.main}`,
+  borderRadius: theme.typography.pxToRem(10),
+  "--reactour-accent": "#1C2030",
 }));
 
-function Tutorial({ children, defaultOpen = false, items, ...props }) {
-  const classes = useStyles(props);
+function Tutorial({ children, defaultOpen = false, items }) {
   const { setIsOpen } = useTour();
   setIsOpen(defaultOpen);
 
@@ -42,7 +35,7 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
   };
 
   return (
-    <TourProvider
+    <StyledTour
       padding={{ mask: 0 }}
       styles={{
         dot: (base) => ({
@@ -51,9 +44,13 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
           height: 16,
           border: "2px solid #1C2030",
         }),
+        maskWrapper: (base) => ({
+          ...base,
+          color: "#666666",
+          opacity: 0.5,
+        }),
       }}
       position="center"
-      className={classes.tour}
       showPrevNextButtons={false}
       showBagde={false}
       defaultOpen={defaultOpen}
@@ -61,8 +58,6 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
       beforeClose={setTourClosed}
       showCloseButton={false}
       accentColor="#fff"
-      maskClassName={classes.mask}
-      highlightedMaskClassName={classes.highlightedMask}
       steps={items?.map((item, index) => ({
         selector: item?.selector,
         content: <TutorialStep activeStep={index} {...item} />,
@@ -70,7 +65,7 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
     >
       {children}
       {isOpened && <Connector />}
-    </TourProvider>
+    </StyledTour>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js
deleted file mode 100644
index 8aafb717f..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    width: typography.pxToRem(964),
-  },
-  lineContainer: {
-    position: "fixed",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 9999999,
-    pointerEvents: "none",
-  },
-  line: {
-    strokeWidth: typography.pxToRem(1),
-    stroke: palette.primary.main,
-    fill: palette.primary.main,
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js
index 2f951926a..4c2356952 100644
--- a/apps/climatemappedafrica/src/components/Select/index.js
+++ b/apps/climatemappedafrica/src/components/Select/index.js
@@ -7,13 +7,10 @@ import {
   InputLabel,
   Typography,
 } from "@mui/material";
-import clsx from "clsx";
 import { uniqueId } from "lodash";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 
-import useStyles from "./useStyles";
-
 import ExpandMore from "@/climatemappedafrica/assets/icons/expand_more.svg";
 
 function ExpandMoreIcon(props) {
@@ -21,6 +18,8 @@ function ExpandMoreIcon(props) {
 }
 
 function Input({
+  SelectProps,
+  MenuProps,
   disabled,
   helperText,
   label: labelProp,
@@ -31,9 +30,7 @@ function Input({
   options,
   selected,
   placeholder,
-  ...props
 }) {
-  const classes = useStyles(props);
   const [value, setValue] = useState();
   const handleChange = (event) => {
     setValue(event.target.value);
@@ -48,14 +45,44 @@ function Input({
       variant="filled"
       size="small"
       disabled={disabled}
-      className={classes.formControl}
+      sx={{
+        "& .MuiFilledInput-underline": {
+          "&::before": {
+            display: "none",
+          },
+        },
+      }}
     >
       {helperText ? (
-        <FormHelperText className={classes.helper}>{helperText}</FormHelperText>
+        <FormHelperText
+          sx={({ typography }) => ({
+            fontSize: {
+              xs: typography.pxToRem(10),
+            },
+            fontWeight: "700",
+            color: "#666666",
+            textTransform: "uppercase",
+            marginLeft: 0,
+            marginBottom: typography.pxToRem(5),
+          })}
+        >
+          {helperText}
+        </FormHelperText>
       ) : null}
       {labelId ? (
-        <InputLabel htmlFor={labelId} shrink className={classes.inputLabel}>
-          <Typography variant="caption" className={classes.label}>
+        <InputLabel
+          htmlFor={labelId}
+          shrink
+          sx={({ typography }) => ({
+            marginTop: typography.pxToRem(15),
+          })}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: "#959696",
+            }}
+          >
             {labelProp}
           </Typography>
         </InputLabel>
@@ -71,10 +98,31 @@ function Input({
         defaultValue={selected || ""}
         IconComponent={ExpandMoreIcon}
         MenuProps={{
-          classes: {
-            paper: classes.paper,
-            list: classes.list,
-          },
+          sx: ({ typography }) => ({
+            "& .MuiMenu-paper": {
+              borderBottomLeftRadius: 4,
+              borderBottomRightRadius: 4,
+              backgroundColor: "#F8F8F8",
+              marginTop: typography.pxToRem(5),
+              boxShadow: "none",
+              "&.MuiPaper-rounded": {
+                borderRadius: "0",
+              },
+            },
+            "& .MuiMenu-list": {
+              paddingTop: 0,
+              paddingBottom: 0,
+              "& li": {
+                fontWeight: 400,
+                paddingTop: typography.pxToRem(12),
+                paddingBottom: typography.pxToRem(12),
+              },
+              "& li.Mui-selected": {
+                fontWeight: "bold",
+              },
+            },
+            ...MenuProps,
+          }),
           anchorOrigin: {
             vertical: "bottom",
             horizontal: "left",
@@ -86,13 +134,45 @@ function Input({
           },
           getContentAnchorEl: null,
         }}
-        classes={{
-          root: classes.select,
-          filled: clsx(classes.filled, { [classes.filledPlaceholder]: !value }),
-        }}
+        sx={({ typography, palette }) => ({
+          width: {
+            sx: typography.pxToRem(135),
+            lg: typography.pxToRem(185),
+          },
+          background: palette.background.paper,
+          color: "#959696",
+          borderStyle: "none",
+          borderRadius: typography.pxToRem(2),
+          paddingBottom: typography.pxToRem(15),
+          paddingTop: typography.pxToRem(15),
+          fontSize: `${typography.caption.fontSize} !important`,
+          "&:focus": {
+            borderRadius: 2,
+            background: palette.background.paper,
+            borderColor: "none",
+          },
+          "&::before": {
+            display: "none",
+          },
+          "& .MuiSelect-filled": {
+            color: value ? "#959696" : "unset",
+          },
+          "& .MuiSelect-filled:focus": {
+            borderRadius: 0,
+          },
+          ...SelectProps,
+        })}
       >
         {placeholder ? (
-          <MenuItem value="" className={classes.placeholder}>
+          <MenuItem
+            value=""
+            sx={{
+              color: "#959696",
+              "&.Mui-selected": {
+                display: "none",
+              },
+            }}
+          >
             {placeholder}
           </MenuItem>
         ) : null}
diff --git a/apps/climatemappedafrica/src/components/Select/useStyles.js b/apps/climatemappedafrica/src/components/Select/useStyles.js
deleted file mode 100644
index 3872af0c0..000000000
--- a/apps/climatemappedafrica/src/components/Select/useStyles.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette, breakpoints }) => ({
-  root: {},
-  formControl: {
-    "& .MuiFilledInput-underline": {
-      "&::before": {
-        display: "none",
-      },
-    },
-  },
-  select: {
-    width: typography.pxToRem(135),
-    background: palette.background.paper,
-    borderStyle: "none",
-    borderRadius: 2,
-    paddingBottom: typography.pxToRem(15),
-    paddingTop: typography.pxToRem(15),
-    fontSize: typography.caption.fontSize,
-    "&:focus": {
-      borderRadius: 2,
-      background: palette.background.paper,
-      borderColor: "none",
-    },
-    "&::before": {
-      display: "none",
-    },
-    [breakpoints.up("lg")]: {
-      width: typography.pxToRem(185),
-    },
-  },
-  paper: {
-    borderBottomLeftRadius: 4,
-    borderBottomRightRadius: 4,
-    backgroundColor: "#F8F8F8",
-    marginTop: typography.pxToRem(5),
-    boxShadow: "none",
-    "&.MuiPaper-rounded": {
-      borderRadius: "0",
-    },
-  },
-
-  list: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    "& li": {
-      fontWeight: 400,
-      paddingTop: 12,
-      paddingBottom: 12,
-    },
-    "& li.Mui-selected": {
-      fontWeight: "bold",
-    },
-  },
-  inputLabel: {
-    marginTop: typography.pxToRem(15),
-  },
-  label: {
-    color: "#959696",
-  },
-  helper: {
-    fontSize: typography.pxToRem(10),
-    fontWeight: "700",
-    color: "#666666",
-    textTransform: "uppercase",
-    marginLeft: 0,
-    marginBottom: typography.pxToRem(5),
-  },
-  filled: {},
-  filledPlaceholder: {
-    color: "#959696",
-  },
-  placeholder: {
-    color: "#959696",
-    "&.Mui-selected": {
-      display: "none",
-    },
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/Tabs/TabPanel.js b/apps/climatemappedafrica/src/components/Tabs/TabPanel.js
index b815e2aab..690174c92 100644
--- a/apps/climatemappedafrica/src/components/Tabs/TabPanel.js
+++ b/apps/climatemappedafrica/src/components/Tabs/TabPanel.js
@@ -1,11 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 function TabPanel({ children, value, name, selected, ...props }) {
-  const classes = useStyles(props);
-
   if (selected !== value || !children) {
     return null;
   }
@@ -16,7 +12,6 @@ function TabPanel({ children, value, name, selected, ...props }) {
       id={`${name}-tabpanel-${value}`}
       aria-labelledby={`${name}-tab-${value}`}
       {...props}
-      className={classes.tabPanel}
     >
       {children}
     </div>
diff --git a/apps/climatemappedafrica/src/components/Tabs/index.js b/apps/climatemappedafrica/src/components/Tabs/index.js
index 75bc7844f..8af33627c 100644
--- a/apps/climatemappedafrica/src/components/Tabs/index.js
+++ b/apps/climatemappedafrica/src/components/Tabs/index.js
@@ -1,10 +1,8 @@
-import { Tab, Divider, Tabs as MuiTabs } from "@mui/material";
+import { Tab, Divider, Tabs as MuiTabs, Box } from "@mui/material";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 
-import useStyles from "./useStyles";
-
 import TabPanel from "@/climatemappedafrica/components/Tabs/TabPanel";
 
 function a11yProps(name, index) {
@@ -15,15 +13,18 @@ function a11yProps(name, index) {
 }
 
 function Tabs({
+  DividerProps,
+  TabIndicatorProps,
+  TabProps,
+  TabsProps,
+  TabPanelProps,
   activeTab = 0,
   items,
   name: nameProp,
   onChange,
   linkComponent,
-  ...props
 }) {
   const router = useRouter();
-  const classes = useStyles(props);
   const [value, setValue] = useState(activeTab);
   const name = nameProp || "simple";
 
@@ -38,17 +39,28 @@ function Tabs({
     return null;
   }
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        flexGrow: 1,
+      }}
+    >
       <MuiTabs
         value={value}
         onChange={linkComponent ? undefined : handleChange}
         variant="scrollable"
         scrollButtons={false}
         aria-label={`${name} tabs`}
-        classes={{
-          root: classes.tabs,
-          indicator: classes.indicator,
-        }}
+        sx={({ palette, typography }) => ({
+          minHeight: typography.pxToRem(23),
+          textTransform: "none",
+          "& .MuiTabs-indicator": {
+            backgroundColor: palette.primary.main,
+            height: 2,
+            marginBottom: 0,
+            ...TabIndicatorProps,
+          },
+          ...TabsProps,
+        })}
       >
         {items.map(({ label, href, slug }, index) => (
           <Tab
@@ -68,15 +80,38 @@ function Tabs({
             }
             {...a11yProps(name, index)}
             disableRipple
-            classes={{
-              root: classes.tab,
-              selected: classes.tabSelected,
-            }}
+            sx={({ typography }) => ({
+              color: "#666666",
+              fontWeight: 600,
+              fontSize: typography.pxToRem(16),
+              letterSpacing: typography.pxToRem(1.6),
+              lineHeight: 25 / 16,
+              marginRight: typography.pxToRem(40),
+              minHeight: typography.pxToRem(23),
+              minWidth: 0,
+              padding: `0 0 ${typography.pxToRem(4)} 0`,
+              textTransform: "uppercase",
+              "&:last-of-type": {
+                marginRight: 0,
+              },
+              ...TabProps,
+            })}
           />
         ))}
       </MuiTabs>
-      <Divider className={classes.divider} />
-      <div className={classes.tabPanels}>
+      <Divider
+        sx={({ typography }) => ({
+          marginTop: typography.pxToRem(-2),
+          height: typography.pxToRem(2),
+          ...DividerProps,
+        })}
+      />
+      <Box
+        sx={({ typography }) => ({
+          marginTop: typography.pxToRem(40),
+          ...TabPanelProps,
+        })}
+      >
         {items.map((item, index) => (
           <TabPanel
             key={item.label}
@@ -87,8 +122,8 @@ function Tabs({
             {item.children}
           </TabPanel>
         ))}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 
diff --git a/packages/hurumap-core/src/Share/ShareButton.js b/packages/hurumap-core/src/Share/ShareButton.js
index 9773811fb..373bebfec 100644
--- a/packages/hurumap-core/src/Share/ShareButton.js
+++ b/packages/hurumap-core/src/Share/ShareButton.js
@@ -54,7 +54,7 @@ const ShareButton = React.forwardRef(function ShareButton(
         <CopyToClipboard text={url} onCopy={onCopy} {...ButtonProps}>
           <SvgIcon
             component={icon}
-            viewBox="0 0 24 24"
+            viewBox="0 0 28 28" // The copy icon has a different viewBox
             {...IconProps}
             sx={{
               width: "100%",