diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 20c977918..051dcee4b 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -143,7 +143,7 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
                 position: "absolute",
                 right: 0,
                 top: theme.typography.pxToRem(52),
-                zIndex: theme.zIndex.appBar,
+                zIndex: theme.zIndex.appBar - 1,
               },
             }}
           />
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js
new file mode 100644
index 000000000..4dcb508f8
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js
@@ -0,0 +1,96 @@
+import { Box, Drawer } from "@mui/material";
+import { useTour } from "@reactour/tour";
+import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+
+import PanelButtons from "./PanelButtons";
+import PanelItem from "./PanelItem";
+
+function DesktopPanel({ sx, ...props }) {
+  const [value, setValue] = useState();
+  const { isOpen: tutorialOpen } = useTour();
+
+  const closeDrawer = () => {
+    setValue(undefined);
+  };
+  const handleValueChange = useCallback((newValue) => {
+    // toggle value if the same
+    setValue((oldValue) => (oldValue !== newValue ? newValue : undefined));
+  }, []);
+
+  const open = value === "rich-data" && !tutorialOpen;
+  return (
+    <Box sx={sx}>
+      <Drawer
+        // variant="persistent"
+        anchor="left"
+        onClose={closeDrawer}
+        open={open}
+        sx={({ typography }) => ({
+          display: "flex",
+          height: "100%",
+          minWidth: typography.pxToRem(1050),
+          maxWidth: "max-content",
+          overflowY: "visible",
+          position: "relative",
+        })}
+        // This needs to match panel button open/close duration
+        transitionDuration={200}
+        ModalProps={{
+          sx: {
+            overflowY: "scroll",
+            overscrollBehaviorBlock: "none",
+            top: 104, // Toolbar height
+          },
+        }}
+        PaperProps={{
+          elevation: 0,
+          square: true,
+          sx: {
+            background: "transparent",
+            border: "none",
+            display: "flex",
+            flexDirection: "row",
+            height: "100%",
+            overflowY: "visible",
+            position: "absolute",
+          },
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            height: "100%",
+          }}
+        >
+          <PanelItem {...props} item={{ value: "rich-data" }} />
+        </Box>
+      </Drawer>
+      <PanelButtons
+        {...props}
+        onValueChange={handleValueChange}
+        open={open}
+        value={value}
+      />
+    </Box>
+  );
+}
+
+DesktopPanel.propTypes = {
+  isCompare: PropTypes.bool,
+  isPinning: PropTypes.bool,
+  onClickPin: PropTypes.func,
+  onClickUnpin: PropTypes.func,
+  panelItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      children: PropTypes.node,
+      tree: PropTypes.shape({}),
+    }),
+  ),
+  primaryProfile: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
+};
+
+export default DesktopPanel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js
index 60404788e..697cf25ba 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/PanelButtons.js
@@ -1,10 +1,6 @@
-import { useTour } from "@reactour/tour";
-import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
-import useStyles from "./useStyles";
-
 import PanelButtonGroup from "@/climatemappedafrica/components/HURUmap/PanelButtonGroup";
 
 function PanelButtons({
@@ -12,28 +8,28 @@ function PanelButtons({
   isCompare,
   onClickPin,
   onClickUnpin,
+  onValueChange,
+  open,
   panelItems: panelItemsProp,
   primaryProfile,
   secondaryProfile,
-  drawerRef,
-  ...props
+  value,
 }) {
-  const [value, setValue] = useState();
   const [pins, setPins] = useState([]);
   const [panelItems, setPanelItems] = useState([]);
-  const classes = useStyles({ ...props });
-  const { isOpen: tutorialOpen } = useTour();
 
   useEffect(() => {
-    if (primaryProfile.items.length || secondaryProfile?.items?.length) {
-      const timeoutId = setTimeout(() => setValue("rich-data"), 200);
+    if (
+      (primaryProfile.items.length || secondaryProfile?.items?.length) &&
+      onValueChange
+    ) {
+      const timeoutId = setTimeout(() => onValueChange("rich-data"), 200);
       return () => {
         clearTimeout(timeoutId);
       };
     }
-    // useEffect requires a return statement
     return () => {};
-  }, [primaryProfile.items, secondaryProfile?.items]);
+  }, [onValueChange, primaryProfile.items, secondaryProfile?.items]);
 
   useEffect(() => {
     const pItems =
@@ -86,13 +82,14 @@ function PanelButtons({
     }
   }, [isPinning, isCompare]);
 
+  if (!panelItems?.length) {
+    return null;
+  }
+
   const isPin = (current) => {
     const found = panelItems.find((item) => item.value === current);
     return !!found?.pin;
   };
-  if (!panelItems?.length) {
-    return null;
-  }
 
   function addOrRemovePin(array, pin) {
     const newArray = [...array];
@@ -118,44 +115,44 @@ function PanelButtons({
       setPins([]);
     }
 
-    setValue(nextValue);
+    if (onValueChange) {
+      onValueChange(nextValue);
+    }
   };
 
-  const open = value === "rich-data" && !tutorialOpen;
-  /* eslint-disable no-param-reassign */
-  if (open) {
-    drawerRef.current.style.visibility = "visible";
-  } else {
-    drawerRef.current.style.visibility = "hidden";
-  }
-
   return (
     <PanelButtonGroup
       onChange={handleChange}
       items={panelItems}
-      value={open ? value : undefined}
+      value={value}
       pins={pins}
-      classes={{
-        root: clsx(classes.panelButtons, {
-          [classes.panelButtonsOpen]: open,
+      sx={[
+        ({ typography, transitions, zIndex }) => ({
+          marginTop: typography.pxToRem(52),
+          width: typography.pxToRem(44),
+          position: "fixed",
+          left: 0,
+          zIndex: zIndex.drawer + 1,
+          transition: transitions.create(["left"], {
+            duration: transitions.duration.shorter, // average-ish of entering & leaving screen
+          }),
         }),
-      }}
+        ({ widths }) =>
+          open && {
+            left: `max(calc((100vw - ${widths.values.lg}px)/2 + 833px),1100px)`,
+          },
+      ]}
     />
   );
 }
 
 PanelButtons.propTypes = {
-  drawerRef: PropTypes.shape({
-    current: PropTypes.shape({
-      style: PropTypes.shape({
-        visibility: PropTypes.string,
-      }),
-    }),
-  }),
   isCompare: PropTypes.bool,
   isPinning: PropTypes.bool,
   onClickPin: PropTypes.func,
   onClickUnpin: PropTypes.func,
+  onValueChange: PropTypes.func,
+  open: PropTypes.bool,
   panelItems: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.string,
@@ -169,6 +166,7 @@ PanelButtons.propTypes = {
   secondaryProfile: PropTypes.shape({
     items: PropTypes.arrayOf(PropTypes.shape({})),
   }),
+  value: PropTypes.string,
 };
 
 export default PanelButtons;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
index 15ea17c0c..5c0aff142 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
@@ -1,3 +1,4 @@
+import { Paper } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useRef } from "react";
 
@@ -15,7 +16,17 @@ function RichData({ primaryProfile, ...props }) {
   };
 
   return (
-    <>
+    <Paper
+      elevation={0}
+      square
+      sx={({ palette }) => ({
+        bgcolor: "background.paper",
+        border: `1px solid ${palette.grey.main}`,
+        borderLeft: "none",
+        borderRight: "none",
+        scrollMargin: "40px",
+      })}
+    >
       <TreeView
         items={primaryProfile.items}
         onLabelClick={handleLabelClick}
@@ -24,7 +35,7 @@ function RichData({ primaryProfile, ...props }) {
           minWidth: theme.typography.pxToRem(300),
           paddingTop: theme.typography.pxToRem(76),
           flexShrink: 0,
-          top: theme.typography.pxToRem(110),
+          top: theme.typography.pxToRem(104),
           bottom: 0,
           position: "fixed",
           left: 0,
@@ -34,9 +45,10 @@ function RichData({ primaryProfile, ...props }) {
         {...props}
         categories={primaryProfile.items}
         primaryProfile={primaryProfile}
+        sx={{}}
         ref={profileRef}
       />
-    </>
+    </Paper>
   );
 }
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js
index 453856583..9019fbb7f 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/index.js
@@ -1,51 +1,3 @@
-import { Drawer } from "@mui/material";
-import PropTypes from "prop-types";
-import React, { useRef } from "react";
-
-import PanelButtons from "./PanelButtons";
-import PanelItem from "./PanelItem";
-import useStyles from "./useStyles";
-
-function DesktopPanel(props) {
-  const classes = useStyles(props);
-  const paperRef = useRef();
-
-  return (
-    <>
-      <Drawer
-        variant="permanent"
-        anchor="left"
-        open
-        classes={{
-          root: classes.root,
-          paper: classes.paper,
-        }}
-        PaperProps={{ ref: paperRef }}
-      >
-        <div className={classes.tabPanel}>
-          <PanelItem {...props} item={{ value: "rich-data" }} />
-        </div>
-      </Drawer>
-      <PanelButtons {...props} drawerRef={paperRef} />
-    </>
-  );
-}
-
-DesktopPanel.propTypes = {
-  isCompare: PropTypes.bool,
-  isPinning: PropTypes.bool,
-  onClickPin: PropTypes.func,
-  onClickUnpin: PropTypes.func,
-  panelItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string,
-      children: PropTypes.node,
-      tree: PropTypes.shape({}),
-    }),
-  ),
-  primaryProfile: PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.shape({})),
-  }),
-};
+import DesktopPanel from "./DesktopPanel";
 
 export default DesktopPanel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js
deleted file mode 100644
index 4daf657cf..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(
-  ({ typography, palette, transitions, widths, zIndex }) => ({
-    root: {
-      display: "flex",
-      height: "100%",
-      minWidth: typography.pxToRem(1049),
-      maxWidth: "max-content",
-      transition: transitions.create("width", {
-        easing: transitions.easing.sharp,
-        duration: transitions.duration.enteringScreen,
-      }),
-      visibility: "hidden",
-    },
-    paper: {
-      background: "transparent",
-      border: "none",
-      display: "flex",
-      flexDirection: "row",
-      position: "unset",
-      width: "100%",
-      overflowY: "visible",
-    },
-    panelButtons: {
-      marginTop: typography.pxToRem(113),
-      width: typography.pxToRem(44),
-      position: "fixed",
-      left: 0,
-      zIndex: zIndex.drawer + 1,
-      top: typography.pxToRem(110),
-    },
-    panelButtonsOpen: {
-      left: `max(calc((100vw - ${widths.values.lg}px)/2 + 833px),1054px)`,
-    },
-    tabPanel: {
-      width: `calc(100% - ${typography.pxToRem(44)})`,
-      height: "100%",
-      background: palette.background.default,
-      display: "flex",
-    },
-  }),
-);
-
-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
new file mode 100644
index 000000000..dc6587f6d
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js
@@ -0,0 +1,145 @@
+import { Box, Button, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+import RichData from "./RichData";
+
+import PrintIcon from "@/climatemappedafrica/assets/icons/print.svg";
+import TopIcon from "@/climatemappedafrica/assets/icons/top.svg";
+import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
+import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
+import Section from "@/climatemappedafrica/components/Section";
+import Tabs from "@/climatemappedafrica/components/Tabs";
+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 { pinAndCompare } = hurumapArgs;
+
+  const activeTab = Math.max(
+    items?.findIndex(({ title }) => title === activeType),
+    0,
+  );
+  const formatedItems = items?.map((item) => {
+    return {
+      label: item.title,
+      href: `#${item.title}`,
+      children: <RichData item={item} {...props} />,
+    };
+  });
+  const scrollToTop = () => {
+    /* eslint-env browser */
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const handleClose = (e) => {
+    const code = e.nativeEvent?.target?.dataset?.value;
+    if (code && onSelectLocation) {
+      onSelectLocation({ code });
+    }
+  };
+
+  return (
+    <Box sx={sx}>
+      {items?.length === 0 && (
+        <Section>
+          <LocationHeader
+            variant="primary"
+            icon={PrintIcon}
+            title={geography.name}
+            {...geography}
+          />
+          <PinAndCompare
+            {...props}
+            {...pinAndCompare}
+            isMobile
+            onClose={handleClose}
+            currentGeographyCode={geography.code}
+          />
+          <Typography
+            sx={({ typography }) => ({
+              color: "#666666",
+              fontWeight: "bold",
+              fontSize: typography.pxToRem(10),
+              lineHeight: 16 / 10,
+              letterSpacing: typography.pxToRem(0.8),
+              margin: `${typography.pxToRem(20)} 0`,
+              textTransform: "uppercase",
+            })}
+          >
+            {`${geography.name} ${dataNotAvailable}`}
+          </Typography>
+        </Section>
+      )}
+      {/* key is needed to re-render the component when prop changes e.g.
+            via storybook controls */}
+      <Tabs
+        key={activeTab}
+        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,
+        }}
+      />
+      {items?.length > 0 && (
+        <Button
+          href={`#${geography.name}`}
+          onClick={scrollToTop}
+          startIcon={
+            <TopIcon
+              sx={({ typography }) => ({ marginRight: typography.pxToRem(20) })}
+            />
+          }
+          sx={({ palette, typography }) => ({
+            padding: `${typography.pxToRem(58)} ${typography.pxToRem(100)} `,
+            backgroundColor: palette.background.paper,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            color: "#666666",
+            textTransform: "uppercase",
+            "&:after": {
+              display: "none",
+            },
+            "&:hover": {
+              backgroundColor: palette.background.paper,
+              fontWeight: 600,
+            },
+          })}
+        >
+          {scrollToTopLabel}
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+MobilePanel.propTypes = {
+  activeType: PropTypes.string,
+  dataNotAvailable: PropTypes.string,
+  onSelectLocation: PropTypes.func,
+  primaryProfile: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    geography: PropTypes.shape({
+      name: PropTypes.string,
+      code: PropTypes.string,
+    }),
+  }),
+  scrollToTopLabel: PropTypes.string,
+};
+
+export default MobilePanel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js
index 54eb279bb..87e7b6c26 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/RichData.js
@@ -16,9 +16,6 @@ function RichData({ item, geography, ...props }) {
 
 RichData.propTypes = {
   item: PropTypes.shape({
-    icon: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
     children: PropTypes.arrayOf(PropTypes.shape({})),
   }),
   geography: PropTypes.shape({
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js
index 2b0c51c22..e6b671323 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/SubcategoryList.js
@@ -1,6 +1,5 @@
-import { Popover, Button } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import clsx from "clsx";
+/* eslint-env browser */
+import { Box, Button, Popover } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -8,52 +7,7 @@ import Caret from "@/climatemappedafrica/assets/icons/caret.svg";
 import Link from "@/climatemappedafrica/components/Link";
 import slugify from "@/climatemappedafrica/utils/slugify";
 
-const useStyles = makeStyles(({ palette, typography, zIndex }) => ({
-  root: {
-    position: "sticky",
-    top: 64 + 60, // below navbar and category list tab
-    zIndex: zIndex.appBar,
-  },
-  caretContainer: {
-    alignItems: "center",
-    backgroundColor: palette.grey.light,
-    display: "flex",
-    height: typography.pxToRem(16),
-    justifyContent: "center",
-    width: "100%",
-    "&:active,&:hover, &:focus, &:focus-within": {
-      backgroundColor: palette.grey.light,
-    },
-    "&:after": {
-      display: "none",
-    },
-  },
-  paper: {
-    width: "100%",
-    left: "0 !important",
-    right: 0,
-    maxWidth: "unset",
-    backgroundColor: "#F0F0F0",
-    borderRadius: 0,
-    boxShadow: "unset",
-    paddingTop: typography.pxToRem(9),
-    paddingBottom: typography.pxToRem(24),
-  },
-  title: {
-    width: "100%",
-    textAlign: "center",
-    marginBottom: typography.pxToRem(10),
-    display: "block",
-    cursor: "pointer",
-    color: typography.caption.color,
-  },
-  notSelected: {
-    opacity: 0.2,
-  },
-}));
-
 function SubcategoryList({ items }) {
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
 
@@ -65,7 +19,6 @@ function SubcategoryList({ items }) {
   };
   const handleSelect = (event) => {
     setSelectedIndex(Number(event.target.dataset.index));
-    /* eslint-env browser */
     document
       .getElementById(slugify(event.target.dataset.title))
       .scrollIntoView({ behavior: "smooth" });
@@ -77,12 +30,33 @@ function SubcategoryList({ items }) {
     return null;
   }
   return (
-    <div className={classes.root}>
-      <Button className={classes.caretContainer} onClick={handleCaretClick}>
+    <Box
+      sx={({ zIndex }) => ({
+        position: "sticky",
+        top: 64 + 60, // below navbar and category list tab
+        zIndex: zIndex.appBar,
+      })}
+    >
+      <Button
+        onClick={handleCaretClick}
+        sx={({ palette, typography }) => ({
+          alignItems: "center",
+          backgroundColor: palette.grey.light,
+          display: "flex",
+          height: typography.pxToRem(16),
+          justifyContent: "center",
+          width: "100%",
+          "&:active,&:hover, &:focus, &:focus-within": {
+            backgroundColor: palette.grey.light,
+          },
+          "&:after": {
+            display: "none",
+          },
+        })}
+      >
         <Caret />
       </Button>
       <Popover
-        classes={{ paper: classes.paper }}
         open={open}
         anchorEl={anchorEl}
         onClose={handleClose}
@@ -94,6 +68,18 @@ function SubcategoryList({ items }) {
           vertical: "top",
           horizontal: "center",
         }}
+        sx={({ typography }) => ({
+          "& .MuiPopover-paper": {
+            backgroundColor: "#F0F0F0",
+            borderRadius: 0,
+            boxShadow: "unset",
+            left: "0",
+            maxWidth: "100%",
+            paddingTop: typography.pxToRem(9),
+            paddingBottom: typography.pxToRem(24),
+            right: 0,
+          },
+        })}
       >
         {items.map(({ title }, index) => (
           <Link
@@ -104,15 +90,26 @@ function SubcategoryList({ items }) {
             href={`#${slugify(title)}`}
             underline="none"
             variant="caption"
-            className={clsx(classes.title, {
-              [classes.notSelected]: selectedIndex !== index,
-            })}
+            sx={[
+              ({ typography }) => ({
+                color: typography.caption.color,
+                cursor: "pointer",
+                display: "block",
+                marginBottom: typography.pxToRem(10),
+                opacity: 0.2,
+                textAlign: "center",
+                width: "100%",
+              }),
+              selectedIndex === index && {
+                opacity: 1.0,
+              },
+            ]}
           >
             {title}
           </Link>
         ))}
       </Popover>
-    </div>
+    </Box>
   );
 }
 SubcategoryList.propTypes = {
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js
index a9d101820..7ad4b56b9 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/index.js
@@ -1,115 +1,3 @@
-import { Button, Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import React from "react";
-
-import RichData from "./RichData";
-
-import PrintIcon from "@/climatemappedafrica/assets/icons/print.svg";
-import TopIcon from "@/climatemappedafrica/assets/icons/top.svg";
-import LocationHeader from "@/climatemappedafrica/components/HURUmap/LocationHeader";
-import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompare";
-import Section from "@/climatemappedafrica/components/Section";
-import Tabs from "@/climatemappedafrica/components/Tabs";
-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({ scrollToTopLabel, activeType, ...props }) {
-  const classes = useStyles(props);
-  const { onSelectLocation, primaryProfile, dataNotAvailable } = props;
-  const { geography, items } = primaryProfile;
-
-  const { pinAndCompare } = hurumapArgs;
-
-  const activeTab = Math.max(
-    items?.findIndex(({ title }) => title === activeType),
-    0,
-  );
-  const formatedItems = items?.map((item) => {
-    return {
-      label: item.title,
-      href: `#${item.title}`,
-      children: <RichData item={item} {...props} />,
-    };
-  });
-  const scrollToTop = () => {
-    /* eslint-env browser */
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
-
-  const handleClose = (e) => {
-    const code = e.nativeEvent?.target?.dataset?.value;
-    if (code && onSelectLocation) {
-      onSelectLocation({ code });
-    }
-  };
-
-  return (
-    <div className={classes.root}>
-      {items?.length === 0 && (
-        <Section>
-          <LocationHeader
-            variant="primary"
-            icon={PrintIcon}
-            title={geography.name}
-            {...geography}
-          />
-          <PinAndCompare
-            {...props}
-            {...pinAndCompare}
-            isMobile
-            onClose={handleClose}
-            currentGeographyCode={geography.code}
-          />
-          <Typography
-            className={classes.dataNotAvailable}
-          >{`${geography.name} ${dataNotAvailable}`}</Typography>
-        </Section>
-      )}
-      {/* key is needed to re-render the component when prop changes e.g.
-            via storybook controls */}
-      <Tabs
-        key={activeTab}
-        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,
-        }}
-      />
-      {items?.length > 0 && (
-        <Button
-          href={`#${geography.name}`}
-          onClick={scrollToTop}
-          className={classes.scrollButton}
-          startIcon={<TopIcon className={classes.topIcon} />}
-        >
-          {scrollToTopLabel}
-        </Button>
-      )}
-    </div>
-  );
-}
-
-MobilePanel.propTypes = {
-  activeType: PropTypes.string,
-  dataNotAvailable: PropTypes.string,
-  onSelectLocation: PropTypes.func,
-  primaryProfile: PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.shape({})),
-    geography: PropTypes.shape({
-      name: PropTypes.string,
-      code: PropTypes.string,
-    }),
-  }),
-  scrollToTopLabel: PropTypes.string,
-};
+import MobilePanel from "./MobilePanel";
 
 export default MobilePanel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js
index 72bac44b6..de2caf049 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js
@@ -1,22 +1,8 @@
 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 }) => ({
-    root: {},
-    dataNotAvailable: {
-      color: "#666666",
-      fontWeight: "bold",
-      fontSize: typography.pxToRem(10),
-      lineHeight: 16 / 10,
-      letterSpacing: typography.pxToRem(0.8),
-      margin: `${typography.pxToRem(20)} 0`,
-      textTransform: "uppercase",
-    },
-    locationRoot: {
-      scrollMargin: typography.pxToRem(200),
-    },
-    divider: { display: "none" },
-    indicator: { display: "none" },
     tabs: {
       paddingTop: typography.pxToRem(16),
       paddingBottom: typography.pxToRem(16),
@@ -56,33 +42,15 @@ const useStyles = makeStyles(
       marginTop: 0,
     },
     tabSelected: {
-      color: palette.background.default,
+      "&.Mui-selected": {
+        color: palette.background.default,
+      },
       backgroundColor: "#666666",
       "&:hover, &:focus, &$selected": {
         color: palette.background.default,
         backgroundColor: "#666666",
       },
     },
-    scrollButton: {
-      padding: `${typography.pxToRem(58)} ${typography.pxToRem(100)} `,
-      backgroundColor: palette.background.paper,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "pointer",
-      color: "#666666",
-      textTransform: "uppercase",
-      "&:after": {
-        display: "none",
-      },
-      "&:hover": {
-        backgroundColor: palette.background.paper,
-        fontWeight: 600,
-      },
-    },
-    topIcon: {
-      marginRight: typography.pxToRem(20),
-    },
   }),
 );
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js
new file mode 100644
index 000000000..fb840a668
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.js
@@ -0,0 +1,21 @@
+import { useMediaQuery } from "@mui/material";
+import React from "react";
+
+import DesktopPanel from "./DesktopPanel";
+import MobilePanel from "./MobilePanel";
+
+function Panel(props) {
+  // Since desktop uses a drawer (with a timer), display: "none" on DesktopPanel
+  // may not be enough to stop the drawer from opening in mobile & hence use of
+  // conditional rendering.
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up("lg"));
+
+  return (
+    <>
+      {!isDesktop && <MobilePanel {...props} />}
+      {isDesktop && <DesktopPanel {...props} />}
+    </>
+  );
+}
+
+export default Panel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js
new file mode 100644
index 000000000..572cb5bc2
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.snap.js
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Panel /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  />
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js
new file mode 100644
index 000000000..a20980e90
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Panel.test.js
@@ -0,0 +1,21 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Panel from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  // TODO: figure out a way of setting up profile here. Currently, it's too big.
+  primaryProfile: {},
+};
+
+describe("<Panel />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Panel {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js
index 876e8542b..5d21637e8 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/Profile.js
@@ -1,4 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
 
@@ -10,29 +10,6 @@ import PinAndCompare from "@/climatemappedafrica/components/HURUmap/PinAndCompar
 import Loading from "@/climatemappedafrica/components/Loading";
 import { hurumapArgs } from "@/climatemappedafrica/config";
 
-const useStyles = makeStyles(({ typography, breakpoints, zIndex }) => ({
-  profile: {
-    marginLeft: typography.pxToRem(20),
-    marginRight: typography.pxToRem(20),
-    marginTop: typography.pxToRem(21),
-    [breakpoints.up("md")]: {
-      paddingLeft: typography.pxToRem(80),
-      marginRight: typography.pxToRem(80),
-    },
-    [breakpoints.up("lg")]: {
-      marginLeft: `max(calc((100vw - 1160px)/2 + 79px), 300px)`,
-      marginTop: typography.pxToRem(0),
-      marginRight: 0,
-      width: typography.pxToRem(800),
-      minHeight: "100%",
-      paddingTop: typography.pxToRem(67.7),
-      paddingLeft: typography.pxToRem(17),
-      paddingRight: typography.pxToRem(17),
-      zIndex: zIndex.drawer,
-    },
-  },
-}));
-
 const Profile = forwardRef(function Profile(
   {
     categories,
@@ -44,11 +21,11 @@ const Profile = forwardRef(function Profile(
     onSelectLocation,
     primaryProfile,
     secondaryProfile,
+    sx,
     ...props
   },
   ref,
 ) {
-  const classes = useStyles(props);
   const { pinAndCompare } = hurumapArgs;
 
   const handleClickPin = (e) => {
@@ -106,7 +83,37 @@ const Profile = forwardRef(function Profile(
   }
 
   return (
-    <div className={classes.profile} ref={ref}>
+    <Box
+      sx={[
+        ({ palette, typography, zIndex }) => ({
+          backgroundColor: palette.background.default,
+          marginLeft: {
+            xs: typography.pxToRem(20),
+            lg: `max(calc((100vw - 1160px)/2 + 79px), 300px)`,
+          },
+          marginRight: {
+            xs: typography.pxToRem(20),
+            md: typography.pxToRem(80),
+            lg: 0,
+          },
+          marginTop: {
+            xs: typography.pxToRem(21),
+            lg: typography.pxToRem(0),
+          },
+          paddingLeft: {
+            md: typography.pxToRem(80),
+            lg: typography.pxToRem(17),
+          },
+          width: { lg: typography.pxToRem(800) },
+          minHeight: { lg: "100%" },
+          paddingTop: { lg: typography.pxToRem(67.7) },
+          paddingRight: { lg: typography.pxToRem(17) },
+          zIndex: { lg: zIndex.drawer },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      ref={ref}
+    >
       {isLoading && <Loading />}
       <LocationHeader
         variant="primary"
@@ -141,7 +148,7 @@ const Profile = forwardRef(function Profile(
         secondaryProfile={secondaryProfile}
         geoCode={geoCode}
       />
-    </div>
+    </Box>
   );
 });
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
index 043bdb54f..09342406a 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
@@ -3,7 +3,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import clsx from "clsx";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
-import React, { memo, Fragment } from "react";
+import React, { Fragment, memo } from "react";
 
 import CategoryHeader from "@/climatemappedafrica/components/HURUmap/CategoryHeader";
 import KeyMetric from "@/climatemappedafrica/components/HURUmap/KeyMetric";
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js
index bc549c344..3fb16a410 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.js
@@ -1,34 +1,3 @@
-import { Box } from "@mui/material";
-import React from "react";
-
-import DesktopPanel from "./DesktopPanel";
-import MobilePanel from "./MobilePanel";
-
-function Panel(props) {
-  return (
-    <>
-      <Box
-        sx={{
-          display: {
-            xs: "block",
-            lg: "none",
-          },
-        }}
-      >
-        <MobilePanel {...props} />
-      </Box>
-      <Box
-        sx={{
-          display: {
-            xs: "none",
-            lg: "block",
-          },
-        }}
-      >
-        <DesktopPanel {...props} />
-      </Box>
-    </>
-  );
-}
+import Panel from "./Panel";
 
 export default Panel;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js
deleted file mode 100644
index 83bf73dca..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-import Panel from ".";
-
-import { hurumapArgs } from "@/climatemappedafrica/config";
-
-const { locations } = hurumapArgs;
-
-export default {
-  title: "Components/HURUmap/Panel",
-  argTypes: {},
-};
-
-function Template({ ...args }) {
-  return <Panel {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = {
-  locations,
-};
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js
new file mode 100644
index 000000000..fe01e2691
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.js
@@ -0,0 +1,166 @@
+import {
+  Box,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  tooltipClasses,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import Image from "next/image";
+import PropTypes from "prop-types";
+import React from "react";
+
+const CustomTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} arrow classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.background.paper,
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    ...theme.typography.body1,
+    alignItems: "center",
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.grey.light}`,
+    borderRadius: 2,
+    color: theme.palette.text.primary,
+    display: "flex",
+    maxWidth: 220,
+    minHeight: 44,
+    textTransform: "capitalize",
+  },
+}));
+
+function PanelButtonGroup({
+  items,
+  onChange,
+  pins = [],
+  sx,
+  value: valueProp,
+}) {
+  const handleChange = (_, selected) => {
+    onChange(selected);
+  };
+  const isPin = (current) => {
+    return pins.includes(current);
+  };
+
+  if (!items?.length) {
+    return null;
+  }
+  return (
+    <Box sx={sx}>
+      <ToggleButtonGroup
+        orientation="vertical"
+        value={valueProp}
+        exclusive
+        onChange={handleChange}
+      >
+        {items.map(({ icon, title, value, ...buttonProps }) => (
+          <CustomTooltip
+            title={value.replace("-", " ")}
+            placement="right"
+            key={value}
+          >
+            <ToggleButton
+              {...buttonProps}
+              id={value}
+              value={value}
+              sx={[
+                ({ palette, typography }) => ({
+                  backgroundColor: palette.grey.light,
+                  padding: 0,
+                  // -5px is to ensure no boxShadow to the left of button
+                  boxShadow: `0px 3px 6px -5px #00000029`,
+                  marginBottom: typography.pxToRem(10),
+                  borderRadius: "0px 2px 2px 0px",
+                  borderLeft: `1px solid ${palette.grey.light}`,
+                  "& .icon": {
+                    filter: "brightness(0)",
+                  },
+                  "&.Mui-selected": {
+                    backgroundColor: palette.background.default,
+                    borderLeft: `1px solid transparent`,
+                    "& .icon": {
+                      filter: "none",
+                    },
+                    "&:hover": {
+                      backgroundColor: palette.background.default,
+                      borderLeft: `1px solid transparent`,
+                    },
+                  },
+                  "&.Mui-disabled": {
+                    backgroundColor: palette.grey.light,
+                    "& .icon": {
+                      opacity: 0.2,
+                    },
+                  },
+                  "&.MuiToggleButtonGroup-groupedVertical:not(:last-child)": {
+                    borderRadius: " 0px 2px 2px 0px",
+                  },
+                  "&.MuiToggleButtonGroup-groupedVertical:not(:first-child)": {
+                    borderRadius: " 0px 2px 2px 0px",
+                  },
+                  "&:hover": {
+                    "& .icon": {
+                      filter: "none",
+                    },
+                    backgroundColor: palette.background.default,
+                    borderLeft: `1px solid transparent`,
+                  },
+                }),
+                ({ palette }) =>
+                  isPin(value) && {
+                    backgroundColor: palette.primary.main,
+                    "&.Mui-selected": {
+                      backgroundColor: palette.primary.main,
+                      "& .icon": {
+                        filter: "brightness(0) invert()",
+                      },
+                      "&:hover": {
+                        backgroundColor: palette.primary.main,
+                      },
+                    },
+                    "& .icon": {
+                      filter: "brightness(0) invert()",
+                    },
+                  },
+                ({ palette }) =>
+                  value === "secondaryPin" && {
+                    backgroundColor: palette.secondary.main,
+                    "&.Mui-selected": {
+                      backgroundColor: palette.secondary.main,
+                      "& .icon": {
+                        filter: "brightness(0) invert()",
+                      },
+                      "&:hover": {
+                        backgroundColor: palette.secondary.main,
+                      },
+                    },
+                    "& .icon": {
+                      filter: "brightness(0) invert()",
+                    },
+                  },
+              ]}
+            >
+              <Image className="icon" src={icon} width={44} height={44} />
+            </ToggleButton>
+          </CustomTooltip>
+        ))}
+      </ToggleButtonGroup>
+    </Box>
+  );
+}
+
+PanelButtonGroup.propTypes = {
+  pins: PropTypes.arrayOf(PropTypes.string),
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      href: PropTypes.string,
+    }),
+  ),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default PanelButtonGroup;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js
new file mode 100644
index 000000000..de4e73c1f
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.snap.js
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PanelButtonGroup /> renders unchanged 1`] = `<div />`;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js
new file mode 100644
index 000000000..a115263e5
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/PanelButtonGroup.test.js
@@ -0,0 +1,18 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import PanelButtonGroup from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {};
+
+describe("<PanelButtonGroup />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<PanelButtonGroup {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js
index a13742c4f..c33c78c30 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.js
@@ -1,66 +1,3 @@
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import clsx from "clsx";
-import Image from "next/image";
-import PropTypes from "prop-types";
-import React from "react";
-
-import useStyles from "./useStyles";
-
-function PanelButtonGroup({ items, value, onChange, pins = [], ...props }) {
-  const classes = useStyles(props);
-  const handleChange = (_, selected) => {
-    onChange(selected);
-  };
-  const isPin = (current) => {
-    return pins.includes(current);
-  };
-
-  if (!items?.length) {
-    return null;
-  }
-  return (
-    <div className={classes.root}>
-      <ToggleButtonGroup
-        orientation="vertical"
-        value={value}
-        exclusive
-        onChange={handleChange}
-        className={classes.buttonGroup}
-      >
-        {items.map(({ icon, ...buttonProps }) => (
-          <ToggleButton
-            id={buttonProps.value}
-            key={buttonProps.value}
-            {...buttonProps}
-            className={clsx(
-              classes.button,
-              {
-                [classes.pin]: isPin(buttonProps.value),
-              },
-              {
-                [classes.secondaryPin]: buttonProps.value === "secondaryPin",
-              },
-            )}
-          >
-            <Image className={classes.icon} src={icon} width={44} height={44} />
-          </ToggleButton>
-        ))}
-      </ToggleButtonGroup>
-    </div>
-  );
-}
-
-PanelButtonGroup.propTypes = {
-  pins: PropTypes.arrayOf(PropTypes.string),
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      href: PropTypes.string,
-    }),
-  ),
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-};
+import PanelButtonGroup from "./PanelButtonGroup";
 
 export default PanelButtonGroup;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js
deleted file mode 100644
index 28d355289..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/index.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import PanelButtonGroup from ".";
-
-export default {
-  title: "Components/HURUmap/PanelButtonGroup",
-  argTypes: {},
-};
-
-function Template({ ...args }) {
-  return <PanelButtonGroup {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = {};
diff --git a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js
deleted file mode 100644
index 945b7a072..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/PanelButtonGroup/useStyles.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {},
-  icon: {
-    width: typography.pxToRem(44),
-    height: typography.pxToRem(44),
-  },
-  button: {
-    backgroundColor: palette.grey.light,
-    padding: 0,
-    boxShadow: `0px 3px 6px #00000029`,
-    marginBottom: typography.pxToRem(10),
-    borderRadius: " 0px 2px 2px 0px",
-    border: 0,
-    "& $icon": {
-      filter: "brightness(0)",
-    },
-    "&.Mui-selected": {
-      backgroundColor: palette.background.default,
-      "& $icon": {
-        filter: "none",
-      },
-      "&:hover": {
-        backgroundColor: palette.background.default,
-      },
-    },
-    "&.Mui-disabled": {
-      backgroundColor: palette.grey.light,
-      "& $icon": {
-        opacity: 0.2,
-      },
-    },
-    "&.MuiToggleButtonGroup-groupedVertical:not(:last-child)": {
-      borderRadius: " 0px 2px 2px 0px",
-    },
-    "&.MuiToggleButtonGroup-groupedVertical:not(:first-child)": {
-      borderRadius: " 0px 2px 2px 0px",
-    },
-    "&:hover": {
-      "& $icon": {
-        filter: "none",
-      },
-      backgroundColor: palette.background.default,
-    },
-  },
-  pin: {
-    backgroundColor: palette.primary.main,
-    "&.Mui-selected": {
-      backgroundColor: palette.primary.main,
-      "& $icon": {
-        filter: "brightness(0) invert()",
-      },
-      "&:hover": {
-        backgroundColor: palette.primary.main,
-      },
-    },
-    "& $icon": {
-      filter: "brightness(0) invert()",
-    },
-  },
-  secondaryPin: {
-    backgroundColor: palette.secondary.main,
-    "&.Mui-selected": {
-      backgroundColor: palette.secondary.main,
-      "& $icon": {
-        filter: "brightness(0) invert()",
-      },
-      "&:hover": {
-        backgroundColor: palette.secondary.main,
-      },
-    },
-    "& $icon": {
-      filter: "brightness(0) invert()",
-    },
-  },
-  buttonGroup: {},
-}));
-
-export default useStyles;
diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js
index a9ecd95bb..27afbd4e9 100644
--- a/packages/hurumap-core/src/Location/Location.js
+++ b/packages/hurumap-core/src/Location/Location.js
@@ -1,40 +1,40 @@
-import { Box, Grid, useTheme } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import React from "react";
 
 import LocationHighlight from "@/hurumap/core/LocationHighlight";
 import LocationTag from "@/hurumap/core/LocationTag";
 
-const Location = React.forwardRef(function Location(
-  { highlights, isLoading, tags, ...props },
-  ref,
-) {
-  const theme = useTheme();
+const Location = React.forwardRef(function Location(props, ref) {
+  const { highlights, isLoading, tags, ...others } = props;
+
   return (
     <Grid
       container
       ref={ref}
-      {...props}
-      sx={{
-        background: alpha("#FFFFFF", 0.9),
+      {...others}
+      sx={(theme) => ({
+        background: alpha(theme.palette.background.default, 0.9),
+        // match zoom control border color
+        border: "1px solid #ccc",
         borderRadius: theme.typography.pxToRem(5),
         bottom: "auto",
         boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`,
         padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem(19)} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`,
         width: theme.typography.pxToRem(600),
         ...props.sx,
-      }}
+      })}
     >
       <Grid item xs={12} container justifyContent="center">
         {tags.map((tag, index) => (
           <Grid
             item
             key={`${tag.level}-${tag.name}`}
-            sx={{
+            sx={(theme) => ({
               "&:not(:first-of-type)": {
                 marginLeft: theme.typography.pxToRem(10),
               },
-            }}
+            })}
           >
             <LocationTag
               isLoading={isLoading}
@@ -51,23 +51,23 @@ const Location = React.forwardRef(function Location(
             display="flex"
             flexWrap="nowrap"
             justifyContent="center"
-            sx={{
+            sx={(theme) => ({
               borderTop: `1px solid ${theme.palette.grey.main}`,
               marginTop: 4.5,
               width: "100%",
-            }}
+            })}
           >
             {highlights.map((highlight) => (
               <LocationHighlight
                 key={highlight.title}
                 isLoading={isLoading}
                 {...highlight}
-                sx={{
+                sx={(theme) => ({
                   paddingTop: "4.5px",
                   "&:not(:first-of-type)": {
                     borderLeft: `1px solid ${theme.palette.grey.main}`,
                   },
-                }}
+                })}
               />
             ))}
           </Box>
diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
index 3b5a9b795..c0848f77a 100644
--- a/packages/hurumap-core/src/Location/Location.snap.js
+++ b/packages/hurumap-core/src/Location/Location.snap.js
@@ -3,7 +3,7 @@
 exports[`Location renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-i1hvcb-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-qt78am-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-s2k0j8-MuiGrid-root"
@@ -12,16 +12,16 @@ exports[`Location renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
       >
         <div
-          class="MuiBox-root css-1gxyb0r"
+          class="MuiBox-root css-n4mvxv"
           href="/explore"
         >
           <h6
-            class="css-pxh4k6"
+            class="css-1oasef2"
           >
             Country
           </h6>
           <div
-            class="css-k6p9om"
+            class="css-11iump4"
           >
             Kenya
           </div>
@@ -31,16 +31,16 @@ exports[`Location renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
       >
         <div
-          class="MuiBox-root css-tv63qx"
+          class="MuiBox-root css-bly1z2"
           href="/explore/county-11"
         >
           <h6
-            class="css-pxh4k6"
+            class="css-1oasef2"
           >
             County
           </h6>
           <div
-            class="css-k6p9om"
+            class="css-11iump4"
           >
             Isiolo
           </div>
diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.js b/packages/hurumap-core/src/LocationTag/LocationTag.js
index 248fc81a9..80fa56f31 100644
--- a/packages/hurumap-core/src/LocationTag/LocationTag.js
+++ b/packages/hurumap-core/src/LocationTag/LocationTag.js
@@ -6,7 +6,7 @@ const LocationTagRoot = styled(Box, {
   shouldForwardProp: (prop) =>
     !["active", "highlight", "variant"].includes(prop),
 })(({ active, theme, variant }) => {
-  const { palette, typography } = theme;
+  const { palette, spacing, typography } = theme;
   let color = palette.text.primary;
   let backgroundColor = palette.background.default;
   if (variant === "highlight") {
@@ -20,6 +20,7 @@ const LocationTagRoot = styled(Box, {
     boxShadow: "0px 3px 6px #00000029",
     color,
     height: typography.pxToRem(36),
+    padding: `0 ${spacing(1.25)}`,
     position: "relative",
     minWidth: typography.pxToRem(88),
   };
@@ -49,7 +50,7 @@ const LevelTypography = styled("h6", {
     borderRadius: typography.pxToRem(4),
     color: palette.text.secondary,
     fontSize: typography.pxToRem(7),
-    fontWeight: "bold",
+    fontWeight: 600,
     letterSpacing: "0.56px",
     lineHeight: 10 / 7,
     margin: 0,
@@ -64,7 +65,7 @@ const LevelTypography = styled("h6", {
 const NameTypography = styled("div")(({ theme }) => {
   return {
     fontSize: theme.typography.pxToRem(9),
-    fontWeight: "bold",
+    fontWeight: 600,
     lineHeight: 13 / 9,
     margin: "auto",
     textTransform: "capitalize",
diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.snap.js b/packages/hurumap-core/src/LocationTag/LocationTag.snap.js
index c943f6504..b0d8fcab9 100644
--- a/packages/hurumap-core/src/LocationTag/LocationTag.snap.js
+++ b/packages/hurumap-core/src/LocationTag/LocationTag.snap.js
@@ -3,15 +3,15 @@
 exports[`LocationTag renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1v93i1i"
+    class="MuiBox-root css-1gg7mmm"
   >
     <h6
-      class="css-pxh4k6"
+      class="css-1oasef2"
     >
       region
     </h6>
     <div
-      class="css-k6p9om"
+      class="css-11iump4"
     >
       Region
     </div>
diff --git a/packages/hurumap-next/src/Map/Legend.js b/packages/hurumap-next/src/Map/Legend.js
index bb967522a..58e70f308 100644
--- a/packages/hurumap-next/src/Map/Legend.js
+++ b/packages/hurumap-next/src/Map/Legend.js
@@ -1,58 +1,67 @@
-import { Typography, Grid } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 
 export default function Legend({ legend, title = "Average Temperature", sx }) {
+  if (!legend?.length) {
+    return null;
+  }
   return (
-    <Grid
-      spacing={2}
-      sx={(theme) => ({
+    <Box
+      rowGap={1}
+      display="flex"
+      flexDirection="column"
+      sx={({ palette, typography, zIndex }) => ({
+        // match zoom control border color
+        border: "1px solid #ccc",
+        borderRadius: "5px",
+        boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`,
         position: "absolute",
-        zIndex: 1000,
-        width: "fit-content",
-        bottom: theme.spacing(30),
-        right: theme.spacing(20),
-        backgroundColor: theme.palette.background.paper,
-        padding: theme.spacing(1),
-        boxShadow: theme.shadows[3],
+        top: typography.pxToRem(52),
+        // match zoom control position
+        right: 10,
+        background: alpha(palette.background.default, 0.9),
+        pb: 1,
+        zIndex: zIndex.appBar - 1,
         ...sx,
       })}
     >
       <Typography
-        variant="subtitle2"
-        sx={(theme) => ({
-          color: theme.palette.text.primary,
-          marginBottom: theme.spacing(2),
-        })}
+        display="flex"
+        alignItems="center"
+        minHeight={52}
+        variant="caption"
+        fontWeight={600}
+        sx={{
+          borderBottom: `1px solid #ccc`,
+          m: 0,
+          px: 1,
+        }}
       >
         {title}
       </Typography>
-      {legend?.map(({ min, max, color }) => (
-        <Grid
-          container
-          key={`${min}-${max}`}
+      {legend.map(({ min, max, color }) => (
+        <Box
+          display="flex"
           alignItems="center"
-          spacing={1}
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-          })}
+          justifyContent="flex-start"
+          gap={1}
+          px={1}
+          key={`${min}-${max}`}
         >
-          <Grid
-            item
-            sx={(theme) => ({
+          <Box
+            borderColor={color}
+            borderRadius={1}
+            height={24}
+            width={24}
+            sx={{
               backgroundColor: color,
-              width: theme.spacing(4),
-              height: theme.spacing(4),
-            })}
+            }}
           />
-          <Grid item xs>
-            <Typography
-              variant="subtitle1"
-              sx={(theme) => ({ color: theme.palette.text.primary })}
-            >
-              {min} - {max}
-            </Typography>
-          </Grid>
-        </Grid>
+          <Typography color="text.primary" variant="caption">
+            {min} - {max}
+          </Typography>
+        </Box>
       ))}
-    </Grid>
+    </Box>
   );
 }