diff --git a/frontend/src/components/common/DataLabel.js b/frontend/src/components/common/DataLabel.js
index 815f7cb..c344d3d 100644
--- a/frontend/src/components/common/DataLabel.js
+++ b/frontend/src/components/common/DataLabel.js
@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import Typography from "@mui/material/Typography";
-import { makeStyles } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 
-const useStyles = makeStyles(theme => ({
+const getStyles = theme => ({
   panel: {
     display: "flex"
   },
@@ -13,18 +13,19 @@ const useStyles = makeStyles(theme => ({
   data: {
     fontWeight: theme.typography.fontWeightMedium
   }
-}));
+});
 
 const DataLabel = ({ label, data }) => {
-  const classes = useStyles();
+  const theme = useTheme();
   const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
+  const styles = getStyles(theme);
 
   return (
-    <div className={classes.panel}>
-      <Typography variant="body2" className={classes.label}>
+    <div style={styles.panel}>
+      <Typography variant="body2" sx={styles.label}>
         {lbl}
       </Typography>
-      <Typography variant="body2" className={classes.data}>
+      <Typography variant="body2" sx={styles.data}>
         {data}
       </Typography>
     </div>