diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
index f50223eb7..3bdfe54a1 100644
--- a/apps/climatemappedafrica/package.json
+++ b/apps/climatemappedafrica/package.json
@@ -41,10 +41,10 @@
     "@emotion/styled": "catalog:",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
-    "@mui/lab": "catalog:mui-styles",
     "@mui/material": "catalog:mui-styles",
     "@mui/styles": "catalog:mui-styles",
     "@mui/utils": "catalog:mui-styles",
+    "@mui/x-tree-view": "catalog:",
     "@next/env": "catalog:",
     "@payloadcms/bundler-webpack": "catalog:",
     "@payloadcms/db-mongodb": "catalog:",
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
index df3330c20..15ea17c0c 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/RichData.js
@@ -1,13 +1,10 @@
 import PropTypes from "prop-types";
 import React, { useRef } from "react";
 
-import useStyles from "./useStyles";
-
 import Profile from "@/climatemappedafrica/components/HURUmap/Panel/Profile";
 import TreeView from "@/climatemappedafrica/components/HURUmap/TreeView";
 
 function RichData({ primaryProfile, ...props }) {
-  const classes = useStyles(props);
   const profileRef = useRef();
 
   const handleLabelClick = (id) => {
@@ -22,7 +19,16 @@ function RichData({ primaryProfile, ...props }) {
       <TreeView
         items={primaryProfile.items}
         onLabelClick={handleLabelClick}
-        classes={{ root: classes.treeView }}
+        sx={(theme) => ({
+          width: `calc((100vw - ${theme.widths.values.lg}px)/2 + 79px)`,
+          minWidth: theme.typography.pxToRem(300),
+          paddingTop: theme.typography.pxToRem(76),
+          flexShrink: 0,
+          top: theme.typography.pxToRem(110),
+          bottom: 0,
+          position: "fixed",
+          left: 0,
+        })}
       />
       <Profile
         {...props}
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js
index 414f0c169..4daf657cf 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/useStyles.js
@@ -39,16 +39,6 @@ const useStyles = makeStyles(
       background: palette.background.default,
       display: "flex",
     },
-    treeView: {
-      width: `calc((100vw - ${widths.values.lg}px)/2 + 79px)`,
-      minWidth: typography.pxToRem(300),
-      paddingTop: typography.pxToRem(76),
-      flexShrink: 0,
-      top: typography.pxToRem(110),
-      bottom: 0,
-      position: "fixed",
-      left: 0,
-    },
   }),
 );
 
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js
new file mode 100644
index 000000000..78e4e47d0
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.js
@@ -0,0 +1,210 @@
+import { Box, SvgIcon } from "@mui/material";
+import { alpha, styled } from "@mui/material/styles";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import {
+  TreeItem2Checkbox,
+  TreeItem2Content,
+  TreeItem2GroupTransition,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from "@mui/x-tree-view/TreeItem2";
+import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon";
+import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider";
+import { useTreeItem2 } from "@mui/x-tree-view/useTreeItem2";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import React from "react";
+
+import CheckIcon from "@/climatemappedafrica/assets/icons/checked.svg";
+import slugify from "@/climatemappedafrica/utils/slugify";
+
+const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+  background: "inherit",
+  borderRadius: 0,
+  borderBottom: `1px solid transparent`,
+  borderRight: `2px solid transparent`,
+  padding: 0,
+  paddingRight: theme.spacing(2.5),
+  "&:hover": {
+    background: "inherit",
+  },
+  "&.expanded": {
+    backgroundColor: theme.palette.background.default,
+    borderRight: `2px solid ${theme.palette.primary.main}`,
+    borderBottom: `1px solid ${theme.palette.grey.main}`,
+  },
+}));
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <TreeItem2Root {...getRootProps(other)}>
+        <CustomTreeItemContent
+          {...getContentProps({
+            className: clsx("content", {
+              expanded: status.expanded,
+              selected: status.selected,
+              focused: status.focused,
+            }),
+            sx: (theme) => ({
+              ...(!children && {
+                pr: 0,
+                "&: hover": {
+                  background: alpha(theme.palette.common.black, 0.04),
+                },
+              }),
+            }),
+          })}
+        >
+          <TreeItem2Checkbox {...getCheckboxProps()} />
+          <TreeItem2Label
+            {...getLabelProps({
+              sx: (theme) => ({
+                ...theme.typography.caption,
+                height: 38,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                fontWeight: 500,
+                letterSpacing: 0.6,
+                ...(!children && {
+                  fontWeight: 300,
+                  paddingRight: 2.5,
+                }),
+              }),
+            })}
+          />
+          <TreeItem2IconContainer
+            {...getIconContainerProps({
+              sx: {
+                ...(!children && { display: "none" }),
+              },
+            })}
+          >
+            <TreeItem2Icon status={status} />
+          </TreeItem2IconContainer>
+        </CustomTreeItemContent>
+        {children && (
+          <TreeItem2GroupTransition {...getGroupTransitionProps()} />
+        )}
+      </TreeItem2Root>
+    </TreeItem2Provider>
+  );
+});
+
+function CollapseIcon({ sx, ...props }) {
+  return (
+    <SvgIcon
+      component={CheckIcon}
+      inheritViewBox
+      {...props}
+      sx={[
+        {
+          fill: "#666666",
+        },
+        // TODO(kilemensi): Review our use of `sx`` to ensure we folllow
+        //                  https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    />
+  );
+}
+
+function ExpandIcon({ sx, ...props }) {
+  return (
+    <CollapseIcon
+      {...props}
+      sx={[
+        (theme) => ({
+          fill: theme.palette.grey.main,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    />
+  );
+}
+
+const TreeView = React.forwardRef(function TreeView(props, ref) {
+  const { items, onLabelClick, sx, ...others } = props;
+
+  const handleItemClick = (e, itemId) => {
+    e.preventDefault();
+
+    if (onLabelClick) {
+      onLabelClick(itemId);
+    }
+  };
+  if (!items?.length) {
+    return null;
+  }
+  return (
+    <Box
+      {...others}
+      sx={[
+        ({ palette }) => ({
+          textAlign: "right",
+          background: palette.background.paper,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      ref={ref}
+    >
+      <SimpleTreeView
+        slots={{
+          collapseIcon: CollapseIcon,
+          expandIcon: ExpandIcon,
+        }}
+        onItemClick={handleItemClick}
+      >
+        {items.map((item) => {
+          const itemId = slugify(item.title);
+
+          return (
+            <CustomTreeItem itemId={itemId} key={itemId} label={item.title}>
+              {item.children.map((child) => {
+                const childId = slugify(`${itemId}-${child.title}`);
+
+                return (
+                  <CustomTreeItem
+                    itemId={childId}
+                    key={childId}
+                    label={child.title}
+                  />
+                );
+              })}
+            </CustomTreeItem>
+          );
+        })}
+      </SimpleTreeView>
+    </Box>
+  );
+});
+
+TreeView.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string,
+        }),
+      ),
+    }),
+  ),
+  onLabelClick: PropTypes.func,
+};
+
+export default TreeView;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
new file mode 100644
index 000000000..dee356bbe
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TreeView /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-h6u23h"
+  >
+    <ul
+      aria-multiselectable="false"
+      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
+      id=":r0:"
+      role="tree"
+      style="--TreeView-itemChildrenIndentation: 12px;"
+    >
+      <li
+        aria-expanded="false"
+        class="css-1uhp40g-MuiTreeItem2-root"
+        id=":r0:-annual-temperature"
+        role="treeitem"
+        tabindex="0"
+      >
+        <div
+          class="content css-tbaszv-MuiTreeItem2-content"
+        >
+          <div
+            class="css-d6m21r-MuiTreeItem2-label"
+          >
+            Annual Temperature
+          </div>
+          <div
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              focusable="false"
+            />
+          </div>
+        </div>
+      </li>
+      <li
+        aria-expanded="false"
+        class="css-1uhp40g-MuiTreeItem2-root"
+        id=":r0:-temperature-variation"
+        role="treeitem"
+        tabindex="-1"
+      >
+        <div
+          class="content css-tbaszv-MuiTreeItem2-content"
+        >
+          <div
+            class="css-d6m21r-MuiTreeItem2-label"
+          >
+            Temperature Variation
+          </div>
+          <div
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              focusable="false"
+            />
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js
new file mode 100644
index 000000000..0a73dab2a
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.test.js
@@ -0,0 +1,37 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import TreeView from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  items: [
+    {
+      title: "Annual Temperature",
+      children: [
+        {
+          title: "Annual Temperature",
+        },
+      ],
+    },
+    {
+      title: "Temperature Variation",
+      children: [
+        {
+          title: "Decadal Temperature Variation",
+        },
+      ],
+    },
+  ],
+};
+
+describe("<TreeView />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<TreeView {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js
index 503066580..3abcc494d 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.js
@@ -1,92 +1,3 @@
-import TreeItem from "@mui/lab/TreeItem";
-import MuiTreeView from "@mui/lab/TreeView";
-import { Typography } from "@mui/material";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-import React, { useState } from "react";
-
-import useStyles from "./useStyles";
-
-import CheckIcon from "@/climatemappedafrica/assets/icons/checked.svg";
-import slugify from "@/climatemappedafrica/utils/slugify";
-
-function TreeView({ items, onLabelClick, ...props }) {
-  const classes = useStyles(props);
-  const [expanded, setExpanded] = useState();
-
-  const handleLabelClick = (e) => {
-    e.preventDefault();
-    const { id, expand } = e.target.dataset;
-    if (expand) {
-      setExpanded(id);
-    }
-    if (onLabelClick) {
-      onLabelClick(id);
-    }
-  };
-
-  if (!items?.length) {
-    return null;
-  }
-  return (
-    <div className={classes.root}>
-      <MuiTreeView expanded={[expanded]}>
-        {items.map((item) => {
-          const itemId = slugify(item.title);
-
-          return (
-            <TreeItem
-              key={itemId}
-              nodeId={itemId}
-              label={
-                <>
-                  <Typography data-id={itemId} data-expand variant="caption">
-                    {item.title}
-                  </Typography>
-                  <CheckIcon className={classes.icon} />
-                </>
-              }
-              onLabelClick={handleLabelClick}
-              classes={{
-                root: classes.tree,
-                expanded: classes.expanded,
-                label: classes.label,
-              }}
-            >
-              {item.children.map((child) => {
-                const childId = slugify(`${itemId}-${child.title}`);
-
-                return (
-                  <TreeItem
-                    key={childId}
-                    nodeId={childId}
-                    label={
-                      <Typography data-id={childId} variant="caption">
-                        {child.title}
-                      </Typography>
-                    }
-                    onLabelClick={handleLabelClick}
-                    classes={{
-                      label: clsx(classes.label, classes.childLabel),
-                    }}
-                  />
-                );
-              })}
-            </TreeItem>
-          );
-        })}
-      </MuiTreeView>
-    </div>
-  );
-}
-
-TreeView.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      children: PropTypes.arrayOf(PropTypes.shape({})),
-    }),
-  ),
-  onLabelClick: PropTypes.func,
-};
+import TreeView from "./TreeView";
 
 export default TreeView;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js
deleted file mode 100644
index 95b1232c9..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/index.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import TreeView from "@/climatemappedafrica/components/HURUmap/TreeView";
-
-export default {
-  title: "Components/HURUmap/TreeView",
-  argTypes: {},
-};
-
-function Template({ ...args }) {
-  return <TreeView {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = {};
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js
deleted file mode 100644
index 358158f13..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/useStyles.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    textAlign: "right",
-    background: palette.background.paper,
-    "& .MuiTreeItem-root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label":
-      {
-        backgroundColor: "unset",
-      },
-    "& .MuiTreeItem-iconContainer": {
-      width: 0,
-    },
-  },
-  label: {
-    marginRight: typography.pxToRem(20),
-    height: typography.pxToRem(38),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    fontWeight: 500,
-    letterSpacing: 0.6,
-  },
-  childLabel: {
-    fontWeight: 300,
-  },
-  icon: {
-    marginLeft: typography.pxToRem(20),
-    fill: palette.grey.main,
-    width: typography.pxToRem(19),
-  },
-  tree: {},
-  expanded: {
-    "& .MuiCollapse-root": {
-      marginLeft: 0,
-      borderTop: `1px solid ${palette.grey.main}`,
-      borderBottom: `1px solid ${palette.grey.main}`,
-    },
-    "&> .MuiTreeItem-content": {
-      borderRightColor: palette.primary.main,
-      borderRightWidth: typography.pxToRem(2),
-      borderRightStyle: "Solid",
-      backgroundColor: palette.background.default,
-    },
-    "& $icon": {
-      fill: "#666666",
-    },
-  },
-}));
-
-export default useStyles;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c21a08b59..15d2511ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1064,9 +1064,6 @@ importers:
       '@hurumap/next':
         specifier: workspace:*
         version: link:../../packages/hurumap-next
-      '@mui/lab':
-        specifier: catalog:mui-styles
-        version: 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: catalog:mui-styles
         version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1076,6 +1073,9 @@ importers:
       '@mui/utils':
         specifier: catalog:mui-styles
         version: 5.16.6(@types/react@18.3.10)(react@18.3.1)
+      '@mui/x-tree-view':
+        specifier: 'catalog:'
+        version: 7.18.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 14.2.13