diff --git a/components/frontend/src/issue/IssueStatus.js b/components/frontend/src/issue/IssueStatus.js
index a31ec09b40..c9bce9fe96 100644
--- a/components/frontend/src/issue/IssueStatus.js
+++ b/components/frontend/src/issue/IssueStatus.js
@@ -1,7 +1,8 @@
+import { Tooltip } from "@mui/material"
 import { bool, string } from "prop-types"
 import TimeAgo from "react-timeago"
 
-import { Label, Popup } from "../semantic_ui_react_wrappers"
+import { Label } from "../semantic_ui_react_wrappers"
 import { issueStatusPropType, metricPropType, settingsPropType, stringsPropType } from "../sharedPropTypes"
 import { getMetricIssueIds, ISSUE_STATUS_COLORS } from "../utils"
 import { HyperLink } from "../widgets/HyperLink"
@@ -9,13 +10,21 @@ import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
 
 function IssueWithoutTracker({ issueId }) {
     return (
-        <Popup
-            content={
-                "Please configure an issue tracker by expanding the report title, selecting the 'Issue tracker' tab, and configuring an issue tracker."
+        <Tooltip
+            title={
+                <>
+                    <h4>No issue tracker configured</h4>
+                    <p>
+                        Please configure an issue tracker by expanding the report title, selecting the &lsquo;Issue
+                        tracker&rsquo; tab, and configuring an issue tracker.
+                    </p>
+                </>
             }
-            header={"No issue tracker configured"}
-            trigger={<Label color="red">{issueId}</Label>}
-        />
+        >
+            <span>
+                <Label color="red">{issueId}</Label>
+            </span>
+        </Tooltip>
     )
 }
 IssueWithoutTracker.propTypes = {
@@ -160,7 +169,18 @@ function IssueWithTracker({ issueStatus, settings }) {
         popupContent = issuePopupContent(issueStatus)
     }
     if (popupContent) {
-        label = <Popup header={popupHeader} content={popupContent} flowing hoverable trigger={label} />
+        label = (
+            <Tooltip
+                title={
+                    <>
+                        <h4>{popupHeader}</h4>
+                        <p>{popupContent}</p>
+                    </>
+                }
+            >
+                {label}
+            </Tooltip>
+        )
     }
     return label
 }
diff --git a/components/frontend/src/measurement/MeasurementTarget.js b/components/frontend/src/measurement/MeasurementTarget.js
index 134e21d7dc..160cda74b2 100644
--- a/components/frontend/src/measurement/MeasurementTarget.js
+++ b/components/frontend/src/measurement/MeasurementTarget.js
@@ -1,7 +1,8 @@
+import { Tooltip } from "@mui/material"
 import { useContext } from "react"
 
 import { DataModel } from "../context/DataModel"
-import { Label, Popup } from "../semantic_ui_react_wrappers"
+import { Label } from "../semantic_ui_react_wrappers"
 import { metricPropType } from "../sharedPropTypes"
 import {
     formatMetricDirection,
@@ -59,11 +60,11 @@ export function MeasurementTarget({ metric }) {
         const today = new Date()
         debtEndDateInThePast = endDate.toISOString().split("T")[0] < today.toISOString().split("T")[0]
     }
-    const label = allIssuesDone || debtEndDateInThePast ? <Label color="grey">{target}</Label> : <span>{target}</span>
+    const label = allIssuesDone || debtEndDateInThePast ? <Label color="grey">{target}</Label> : target
     return (
-        <Popup hoverable on={["hover", "focus"]} trigger={label}>
-            {popupText(metric, debtEndDateInThePast, allIssuesDone, dataModel)}
-        </Popup>
+        <Tooltip title={<span>{popupText(metric, debtEndDateInThePast, allIssuesDone, dataModel)}</span>}>
+            <span>{label}</span>
+        </Tooltip>
     )
 }
 MeasurementTarget.propTypes = {
diff --git a/components/frontend/src/measurement/Overrun.js b/components/frontend/src/measurement/Overrun.js
index 4f29c6016d..81e73fd63e 100644
--- a/components/frontend/src/measurement/Overrun.js
+++ b/components/frontend/src/measurement/Overrun.js
@@ -1,8 +1,18 @@
+import {
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Tooltip,
+    Typography,
+} from "@mui/material"
 import { string } from "prop-types"
 import { useContext } from "react"
 
 import { DataModel } from "../context/DataModel"
-import { Header, Popup, Table } from "../semantic_ui_react_wrappers"
 import { datesPropType, measurementsPropType, metricPropType, reportPropType } from "../sharedPropTypes"
 import { getMetricResponseOverrun, pluralize } from "../utils"
 import { StatusIcon } from "./StatusIcon"
@@ -23,59 +33,60 @@ export function Overrun({ metric_uuid, metric, report, measurements, dates }) {
     const period = `${sortedDates.at(0).toLocaleDateString()} - ${sortedDates.at(-1).toLocaleDateString()}`
     const content = (
         <>
-            <Header>
-                <Header.Content>
-                    Metric reaction time overruns
-                    <Header.Subheader>In the period {period}</Header.Subheader>
-                </Header.Content>
-            </Header>
-            <Table compact size="small">
-                <Table.Header>
-                    <Table.Row>
-                        <Table.HeaderCell textAlign="center" colSpan="3">
-                            When did the metric need action?
-                        </Table.HeaderCell>
-                        <Table.HeaderCell textAlign="center" colSpan="3">
-                            How long did it take to react?
-                        </Table.HeaderCell>
-                    </Table.Row>
-                    <Table.Row>
-                        <Table.HeaderCell textAlign="center">Status</Table.HeaderCell>
-                        <Table.HeaderCell textAlign="center">Start</Table.HeaderCell>
-                        <Table.HeaderCell textAlign="center">End</Table.HeaderCell>
-                        <Table.HeaderCell textAlign="right">Actual</Table.HeaderCell>
-                        <Table.HeaderCell textAlign="right">Desired</Table.HeaderCell>
-                        <Table.HeaderCell textAlign="right">Overrun</Table.HeaderCell>
-                    </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                    {overruns.map((overrun) => (
-                        <Table.Row key={overrun.start}>
-                            <Table.Cell textAlign="center">
-                                <StatusIcon size="small" status={overrun.status} />
-                            </Table.Cell>
-                            <Table.Cell>{overrun.start.split("T")[0]}</Table.Cell>
-                            <Table.Cell>{overrun.end.split("T")[0]}</Table.Cell>
-                            <Table.Cell textAlign="right">{formatDays(overrun.actual_response_time)}</Table.Cell>
-                            <Table.Cell textAlign="right">{formatDays(overrun.desired_response_time)}</Table.Cell>
-                            <Table.Cell textAlign="right">{formatDays(overrun.overrun)}</Table.Cell>
-                        </Table.Row>
-                    ))}
-                </Table.Body>
-                <Table.Footer>
-                    <Table.Row>
-                        <Table.HeaderCell colSpan="5">
-                            <b>Total</b>
-                        </Table.HeaderCell>
-                        <Table.HeaderCell textAlign="right">
-                            <b>{triggerText}</b>
-                        </Table.HeaderCell>
-                    </Table.Row>
-                </Table.Footer>
-            </Table>
+            <Typography>Metric reaction time overruns in the period {period}</Typography>
+            <TableContainer component={Paper}>
+                <Table>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell textAlign="center" colSpan="3">
+                                When did the metric need action?
+                            </TableCell>
+                            <TableCell textAlign="center" colSpan="3">
+                                How long did it take to react?
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell textAlign="center">Status</TableCell>
+                            <TableCell textAlign="center">Start</TableCell>
+                            <TableCell textAlign="center">End</TableCell>
+                            <TableCell textAlign="right">Actual</TableCell>
+                            <TableCell textAlign="right">Desired</TableCell>
+                            <TableCell textAlign="right">Overrun</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {overruns.map((overrun) => (
+                            <TableRow key={overrun.start}>
+                                <TableCell textAlign="center">
+                                    <StatusIcon size="small" status={overrun.status} />
+                                </TableCell>
+                                <TableCell>{overrun.start.split("T")[0]}</TableCell>
+                                <TableCell>{overrun.end.split("T")[0]}</TableCell>
+                                <TableCell textAlign="right">{formatDays(overrun.actual_response_time)}</TableCell>
+                                <TableCell textAlign="right">{formatDays(overrun.desired_response_time)}</TableCell>
+                                <TableCell textAlign="right">{formatDays(overrun.overrun)}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell colSpan="5">
+                                <b>Total</b>
+                            </TableCell>
+                            <TableCell textAlign="right">
+                                <b>{triggerText}</b>
+                            </TableCell>
+                        </TableRow>
+                    </TableHead>
+                </Table>
+            </TableContainer>
         </>
     )
-    return <Popup content={content} flowing hoverable trigger={trigger} />
+    return (
+        <Tooltip slotProps={{ tooltip: { sx: { maxWidth: "32em" } } }} title={content}>
+            {trigger}
+        </Tooltip>
+    )
 }
 Overrun.propTypes = {
     dates: datesPropType,