diff --git a/components/frontend/src/dashboard/IssuesCard.js b/components/frontend/src/dashboard/IssuesCard.js
index 612a9419e3..20576ce725 100644
--- a/components/frontend/src/dashboard/IssuesCard.js
+++ b/components/frontend/src/dashboard/IssuesCard.js
@@ -1,8 +1,9 @@
+import { Chip } from "@mui/material"
 import { bool, func } from "prop-types"
 
-import { Label, Table } from "../semantic_ui_react_wrappers"
+import { Table } from "../semantic_ui_react_wrappers"
 import { reportPropType } from "../sharedPropTypes"
-import { capitalize, ISSUE_STATUS_COLORS } from "../utils"
+import { capitalize, ISSUE_STATUS_THEME_COLORS } from "../utils"
 import { FilterCardWithTable } from "./FilterCardWithTable"
 
 function issueStatuses(report) {
@@ -35,9 +36,13 @@ function tableRows(report) {
         <Table.Row key={status}>
             <Table.Cell>{capitalize(status)}</Table.Cell>
             <Table.Cell textAlign="right">
-                <Label size="small" color={ISSUE_STATUS_COLORS[status]}>
-                    {statuses[status]}
-                </Label>
+                <Chip
+                    color={ISSUE_STATUS_THEME_COLORS[status]}
+                    label={`${statuses[status]}`}
+                    size="small"
+                    sx={{ borderRadius: 1 }}
+                    variant={ISSUE_STATUS_THEME_COLORS[status] ? "" : "outlined"}
+                />
             </Table.Cell>
         </Table.Row>
     ))
diff --git a/components/frontend/src/measurement/SourceStatus.js b/components/frontend/src/measurement/SourceStatus.js
index 9db0aa50a7..48ac30f5a4 100644
--- a/components/frontend/src/measurement/SourceStatus.js
+++ b/components/frontend/src/measurement/SourceStatus.js
@@ -15,11 +15,9 @@ export function SourceStatus({ metric, measurement_source }) {
     const source = metric.sources[measurement_source.source_uuid]
     const source_name = getSourceName(source, dataModel)
     const configError = !dataModel.metrics[metric.type].sources.includes(source.type)
-    function source_label(error) {
+    function source_label() {
         return measurement_source.landing_url ? (
-            <HyperLink error={error} url={measurement_source.landing_url}>
-                {source_name}
-            </HyperLink>
+            <HyperLink url={measurement_source.landing_url}>{source_name}</HyperLink>
         ) : (
             source_name
         )
@@ -43,7 +41,7 @@ export function SourceStatus({ metric, measurement_source }) {
                 flowing
                 header={header}
                 hoverable
-                trigger={<Label color="red">{source_label(true)}</Label>}
+                trigger={<Label color="red">{source_label()}</Label>}
             />
         )
     } else {
diff --git a/components/frontend/src/metric/TrendGraph.test.js b/components/frontend/src/metric/TrendGraph.test.js
index 734914887d..624f458397 100644
--- a/components/frontend/src/metric/TrendGraph.test.js
+++ b/components/frontend/src/metric/TrendGraph.test.js
@@ -69,7 +69,7 @@ it("renders the measurements with missing values for the scale", () => {
 
 it("renders a placeholder while the measurements are loading", () => {
     const { container } = renderTrendgraph({ loading: "loading" })
-    expect(container.firstChild.className).toContain("placeholder")
+    expect(container.firstChild.className).toContain("MuiSkeleton-rectangular")
     expect(screen.queryAllByText(/Time/).length).toBe(0)
 })
 
diff --git a/components/frontend/src/metric/status.js b/components/frontend/src/metric/status.js
index 087a4ae103..3ef465e9f7 100644
--- a/components/frontend/src/metric/status.js
+++ b/components/frontend/src/metric/status.js
@@ -57,11 +57,11 @@ export const STATUS_DESCRIPTION = {
     target_not_met: `${STATUS_NAME.target_not_met}: the measurement value does not meet the target value.`,
     debt_target_met: (
         <>
-            {`${STATUS_NAME.debt_target_met}: the measurement value does not meet the\ntarget value, but this is accepted as `}
+            {`${STATUS_NAME.debt_target_met}: the measurement value does not meet the target value, but this is accepted as `}
             <HyperLink url="https://en.wikipedia.org/wiki/Technical_debt">technical debt</HyperLink>
-            {". The measurement\nvalue does meet the technical debt target."}
+            {". The measurement value does meet the technical debt target."}
         </>
     ),
-    unknown: `${STATUS_NAME.unknown}: the status could not be determined because no sources have\nbeen configured for the metric yet or the measurement data could not\nbe collected.`,
+    unknown: `${STATUS_NAME.unknown}: the status could not be determined because no sources have been configured for the metric yet or the measurement data could not be collected.`,
 }
 export const statusPropType = oneOf(STATUSES)
diff --git a/components/frontend/src/semantic_ui_react_wrappers.js b/components/frontend/src/semantic_ui_react_wrappers.js
index e172de20cc..53c7959114 100644
--- a/components/frontend/src/semantic_ui_react_wrappers.js
+++ b/components/frontend/src/semantic_ui_react_wrappers.js
@@ -1,13 +1,9 @@
-export { Breadcrumb } from "./semantic_ui_react_wrappers/Breadcrumb"
 export { Card } from "./semantic_ui_react_wrappers/Card"
-export { Checkbox } from "./semantic_ui_react_wrappers/Checkbox"
 export { Dropdown } from "./semantic_ui_react_wrappers/Dropdown"
-export { Feed } from "./semantic_ui_react_wrappers/Feed"
 export { Form } from "./semantic_ui_react_wrappers/Form"
 export { Header } from "./semantic_ui_react_wrappers/Header"
 export { Label } from "./semantic_ui_react_wrappers/Label"
 export { Message } from "./semantic_ui_react_wrappers/Message"
-export { Modal } from "./semantic_ui_react_wrappers/Modal"
 export { Popup } from "./semantic_ui_react_wrappers/Popup"
 export { Segment } from "./semantic_ui_react_wrappers/Segment"
 export { Tab } from "./semantic_ui_react_wrappers/Tab"
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.css b/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.css
deleted file mode 100644
index c79e6923f6..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.ui.breadcrumb > .icon.divider.inverted {
-    color: rgba(255, 255, 255, 0.87) !important;
-}
-
-div.inverted .ui.breadcrumb {
-    color: rgba(255, 255, 255, 0.87) !important;
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.js b/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.js
deleted file mode 100644
index be4c77987d..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Breadcrumb.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import "./Breadcrumb.css"
-
-import { useContext } from "react"
-import { Breadcrumb as SemanticUIBreadcrumb } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-
-export function Breadcrumb(props) {
-    return <SemanticUIBreadcrumb {...props} />
-}
-
-function Divider(props) {
-    return <SemanticUIBreadcrumb.Divider inverted={useContext(DarkMode)} {...props} />
-}
-
-Breadcrumb.Divider = Divider
-Breadcrumb.Section = SemanticUIBreadcrumb.Section
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Checkbox.js b/components/frontend/src/semantic_ui_react_wrappers/Checkbox.js
deleted file mode 100644
index 03171265cd..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Checkbox.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from "react"
-import { Checkbox as SemanticUICheckbox } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-import { addInvertedClassNameWhenInDarkMode } from "./dark_mode"
-
-export function Checkbox(props) {
-    return <SemanticUICheckbox {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Feed.css b/components/frontend/src/semantic_ui_react_wrappers/Feed.css
deleted file mode 100644
index bcd06ffe9f..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Feed.css
+++ /dev/null
@@ -1,7 +0,0 @@
-div.date.inverted {
-    color: darkgrey !important;
-}
-
-div.summary.inverted {
-    color: rgba(255, 255, 255, 0.87) !important;
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Feed.js b/components/frontend/src/semantic_ui_react_wrappers/Feed.js
deleted file mode 100644
index 1bc21272b3..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Feed.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import "./Feed.css"
-
-import { useContext } from "react"
-import { Feed as SemanticUIFeed } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-import { addInvertedClassNameWhenInDarkMode } from "./dark_mode"
-
-export function Feed(props) {
-    return <SemanticUIFeed {...props} />
-}
-
-function FeedDate(props) {
-    return <SemanticUIFeed.Date {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
-}
-
-function Summary(props) {
-    return <SemanticUIFeed.Summary {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
-}
-
-Feed.Content = SemanticUIFeed.Content
-Feed.Date = FeedDate
-Feed.Event = SemanticUIFeed.Event
-Feed.Label = SemanticUIFeed.Label
-Feed.Summary = Summary
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Modal.css b/components/frontend/src/semantic_ui_react_wrappers/Modal.css
deleted file mode 100644
index aa58c2086d..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Modal.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.ui.modal.inverted > .header {
-    border: 1px solid rgba(255, 255, 255, 0.87);
-}
-
-.ui.inverted.modal > .content,
-.ui.inverted.modal > .header {
-    background-color: rgba(40, 40, 40, 0.8);
-    color: rgba(255, 255, 255, 0.87);
-}
-
-.ui.modal.inverted > .content {
-    border-left: 1px solid rgba(255, 255, 255, 0.87);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.87);
-    border-right: 1px solid rgba(255, 255, 255, 0.87);
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Modal.js b/components/frontend/src/semantic_ui_react_wrappers/Modal.js
deleted file mode 100644
index 4463de0664..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Modal.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import "./Modal.css"
-
-import { useContext } from "react"
-import { Modal as SemanticUIModal } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-import { addInvertedClassNameWhenInDarkMode } from "./dark_mode"
-
-export function Modal(props) {
-    return <SemanticUIModal {...addInvertedClassNameWhenInDarkMode(props, useContext(DarkMode))} />
-}
-
-Modal.Content = SemanticUIModal.Content
-Modal.Header = SemanticUIModal.Header
diff --git a/components/frontend/src/source/Logo.js b/components/frontend/src/source/Logo.js
index 0a1f80cc58..fb201a4fd0 100644
--- a/components/frontend/src/source/Logo.js
+++ b/components/frontend/src/source/Logo.js
@@ -1,8 +1,7 @@
 import { string } from "prop-types"
-import { Image } from "semantic-ui-react"
 
 export function Logo({ alt, logo }) {
-    return <Image src={`api/internal/logo/${logo}`} alt={`${alt} logo`} size="mini" spaced="right" />
+    return <img src={`api/internal/logo/${logo}`} alt={`${alt} logo`} width="32px" height="32px" />
 }
 Logo.propTypes = {
     alt: string,
diff --git a/components/frontend/src/source/SourceEntities.test.js b/components/frontend/src/source/SourceEntities.test.js
index 31ad813d00..98cf824b89 100644
--- a/components/frontend/src/source/SourceEntities.test.js
+++ b/components/frontend/src/source/SourceEntities.test.js
@@ -158,7 +158,7 @@ it("renders a message if the measurements failed to load", () => {
 
 it("renders a placeholder while the measurements are loading", () => {
     const { container } = renderSourceEntities({ loading: "loading" })
-    expect(container.firstChild.className).toContain("placeholder")
+    expect(container.firstChild.className).toContain("MuiSkeleton-rectangular")
     expect(screen.queryAllByText("AAA").length).toBe(0)
 })
 
diff --git a/components/frontend/src/source/SourceType.js b/components/frontend/src/source/SourceType.js
index b17dd34afc..617c9817af 100644
--- a/components/frontend/src/source/SourceType.js
+++ b/components/frontend/src/source/SourceType.js
@@ -1,11 +1,10 @@
-import { Stack, Typography } from "@mui/material"
+import { Chip, Stack, Typography } from "@mui/material"
 import { func, string } from "prop-types"
 import { useContext } from "react"
 
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
 import { SingleChoiceInput } from "../fields/SingleChoiceInput"
-import { Label } from "../semantic_ui_react_wrappers"
 import { dataModelPropType, sourceTypePropType } from "../sharedPropTypes"
 import { Logo } from "./Logo"
 
@@ -27,10 +26,12 @@ function sourceTypeOption(key, sourceType) {
         value: key,
         content: (
             <Stack direction="row">
-                <Logo logo={key} alt={sourceType.name} />
+                <span style={{ paddingRight: "10px" }}>
+                    <Logo logo={key} alt={sourceType.name} />
+                </span>
                 <p>
                     {sourceType.name}
-                    {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
+                    {sourceType.deprecated && <Chip color="warning" label="Deprecated" sx={{ marginLeft: "8px" }} />}
                     <Typography variant="body2">{sourceTypeDescription(sourceType)}</Typography>
                 </p>
             </Stack>
diff --git a/components/frontend/src/source/SourceTypeHeader.js b/components/frontend/src/source/SourceTypeHeader.js
index a874a54087..ca1b62f8ab 100644
--- a/components/frontend/src/source/SourceTypeHeader.js
+++ b/components/frontend/src/source/SourceTypeHeader.js
@@ -1,6 +1,7 @@
+import { Chip } from "@mui/material"
 import { string } from "prop-types"
 
-import { Header, Label } from "../semantic_ui_react_wrappers"
+import { Header } from "../semantic_ui_react_wrappers"
 import { sourceTypePropType } from "../sharedPropTypes"
 import { slugify } from "../utils"
 import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
@@ -18,7 +19,7 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
             <Header.Content>
                 <Logo logo={sourceTypeId} alt={sourceType.name} />
                 {sourceType.name}
-                {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
+                {sourceType.deprecated && <Chip color="warning" label="Deprecated" sx={{ marginLeft: "8px" }} />}
                 <Header.Subheader>
                     {`${sourceTypeDescription(sourceType)} `}
                     <ReadTheDocsLink url={url} />
diff --git a/components/frontend/src/subject/SubjectTableHeader.js b/components/frontend/src/subject/SubjectTableHeader.js
index a55251f835..c30cd58081 100644
--- a/components/frontend/src/subject/SubjectTableHeader.js
+++ b/components/frontend/src/subject/SubjectTableHeader.js
@@ -1,8 +1,7 @@
+import { List, ListItem, ListItemIcon, ListItemText } from "@mui/material"
 import { bool, func, string } from "prop-types"
-import { useContext } from "react"
-import { List, Table } from "semantic-ui-react"
+import { Table } from "semantic-ui-react"
 
-import { DarkMode } from "../context/DarkMode"
 import { StatusIcon } from "../measurement/StatusIcon"
 import { STATUS_DESCRIPTION, STATUSES } from "../metric/status"
 import { Label } from "../semantic_ui_react_wrappers"
@@ -49,21 +48,18 @@ const trendHelp = (
     </>
 )
 
-function statusHelp(darkMode) {
-    const color = darkMode ? "white" : "black"
+function statusHelp() {
     return (
         <>
             <p>The current status of the metric.</p>
             <List>
                 {STATUSES.map((status) => (
-                    <List.Item key={status}>
-                        <List.Icon>
+                    <ListItem key={status} alignItems="flex-start" sx={{ paddingLeft: "8px" }}>
+                        <ListItemIcon sx={{ minWidth: "32px" }}>
                             <StatusIcon status={status} size="small" />
-                        </List.Icon>
-                        <List.Content verticalAlign="middle" style={{ color: color, whiteSpace: "pre" }}>
-                            {STATUS_DESCRIPTION[status]}
-                        </List.Content>
-                    </List.Item>
+                        </ListItemIcon>
+                        <ListItemText>{STATUS_DESCRIPTION[status]}</ListItemText>
+                    </ListItem>
                 ))}
             </List>
             <p>Hover over the status to see how long the metric has had the current status.</p>
@@ -286,7 +282,6 @@ MeasurementHeaderCells.propTypes = {
 }
 
 export function SubjectTableHeader({ columnDates, handleSort, settings }) {
-    const darkMode = useContext(DarkMode)
     const sortProps = {
         sortColumn: settings.sortColumn,
         sortDirection: settings.sortDirection,
@@ -311,7 +306,7 @@ export function SubjectTableHeader({ columnDates, handleSort, settings }) {
                         column="status"
                         label="Status"
                         textAlign="center"
-                        help={statusHelp(darkMode)}
+                        help={statusHelp()}
                         {...sortProps}
                     />
                 )}
diff --git a/components/frontend/src/utils.js b/components/frontend/src/utils.js
index ef1cb76eb3..c70554c64c 100644
--- a/components/frontend/src/utils.js
+++ b/components/frontend/src/utils.js
@@ -19,6 +19,7 @@ export const MILLISECONDS_PER_HOUR = 60 * 60 * 1000
 const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR
 
 export const ISSUE_STATUS_COLORS = { todo: "grey", doing: "blue", done: "green", unknown: null }
+export const ISSUE_STATUS_THEME_COLORS = { todo: "grey", doing: "info", done: "success", unknown: "" }
 
 export function getMetricDirection(metric, dataModel) {
     // Old versions of the data model may contain the unicode version of the direction, be prepared:
diff --git a/components/frontend/src/widgets/HyperLink.css b/components/frontend/src/widgets/HyperLink.css
deleted file mode 100644
index 9476bc3d6e..0000000000
--- a/components/frontend/src/widgets/HyperLink.css
+++ /dev/null
@@ -1,9 +0,0 @@
-a.inverted {
-    /* Slightly brighter blue for dark mode */
-    color: rgb(143, 208, 255) !important;
-}
-
-a.inverted.error {
-    /* Use white (on red) when the link is in error mode */
-    color: rgb(255, 255, 255, 0.87) !important;
-}
diff --git a/components/frontend/src/widgets/HyperLink.js b/components/frontend/src/widgets/HyperLink.js
index 5cd5171e01..f63eb294de 100644
--- a/components/frontend/src/widgets/HyperLink.js
+++ b/components/frontend/src/widgets/HyperLink.js
@@ -1,31 +1,24 @@
-import "./HyperLink.css"
+import { Link } from "@mui/material"
+import { string } from "prop-types"
 
-import { bool, string } from "prop-types"
-import { useContext } from "react"
-
-import { DarkMode } from "../context/DarkMode"
 import { childrenPropType } from "../sharedPropTypes"
 
-export function HyperLink({ url, children, error }) {
-    let className = useContext(DarkMode) ? "inverted" : ""
-    if (error) {
-        className += " error"
-    }
+export function HyperLink({ url, children }) {
     return (
-        <a
-            className={className}
+        <Link
+            color="inherit"
             href={url}
             onClick={(event) => event.stopPropagation()}
-            rel="noopener noreferrer"
+            rel="noreferrer"
             target="_blank"
             title="Opens new window or tab"
+            underline="always"
         >
             {children}
-        </a>
+        </Link>
     )
 }
 HyperLink.propTypes = {
     url: string,
     children: childrenPropType,
-    error: bool,
 }
diff --git a/components/frontend/src/widgets/Hyperlink.test.js b/components/frontend/src/widgets/Hyperlink.test.js
index 0a1eebc96e..9fd20bee01 100644
--- a/components/frontend/src/widgets/Hyperlink.test.js
+++ b/components/frontend/src/widgets/Hyperlink.test.js
@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 
-import { DarkMode } from "../context/DarkMode"
 import { HyperLink } from "./HyperLink"
 
 it("shows the hyperlink", () => {
@@ -8,24 +7,6 @@ it("shows the hyperlink", () => {
     expect(screen.queryAllByText("Link").length).toBe(1)
 })
 
-it("is grey in dark mode", () => {
-    const { container } = render(
-        <DarkMode.Provider value={true}>
-            <HyperLink url="https://url">Link</HyperLink>
-        </DarkMode.Provider>,
-    )
-    expect(container.firstChild.className).toEqual(expect.stringContaining("inverted"))
-})
-
-it("is can be in error mode", () => {
-    const { container } = render(
-        <HyperLink url="https://url" error>
-            Link
-        </HyperLink>,
-    )
-    expect(container.firstChild.className).toEqual(expect.stringContaining("error"))
-})
-
 it("does not propagate a click event", () => {
     const eventHandler = jest.fn()
     render(
diff --git a/components/frontend/src/widgets/ItemBreadcrumb.js b/components/frontend/src/widgets/ItemBreadcrumb.js
index 186ba6ad1b..20b0d7fc2e 100644
--- a/components/frontend/src/widgets/ItemBreadcrumb.js
+++ b/components/frontend/src/widgets/ItemBreadcrumb.js
@@ -1,36 +1,20 @@
+import NavigateNextIcon from "@mui/icons-material/NavigateNext"
+import { Breadcrumbs } from "@mui/material"
 import { string } from "prop-types"
 
-import { Breadcrumb } from "../semantic_ui_react_wrappers"
-
 export function ItemBreadcrumb(props) {
     return (
-        <Breadcrumb size={props.size || "small"}>
-            <Breadcrumb.Section>{props.report}</Breadcrumb.Section>
-            {props.subject && (
-                <>
-                    <Breadcrumb.Divider icon="right chevron" />
-                    <Breadcrumb.Section>{props.subject}</Breadcrumb.Section>
-                    {props.metric && (
-                        <>
-                            <Breadcrumb.Divider icon="right chevron" />
-                            <Breadcrumb.Section>{props.metric}</Breadcrumb.Section>
-                            {props.source && (
-                                <>
-                                    <Breadcrumb.Divider icon="right chevron" />
-                                    <Breadcrumb.Section>{props.source}</Breadcrumb.Section>
-                                </>
-                            )}
-                        </>
-                    )}
-                </>
-            )}
-        </Breadcrumb>
+        <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
+            <span>{props.report}</span>
+            {props.subject && <span>{props.subject}</span>}
+            {props.metric && <span>{props.metric}</span>}
+            {props.source && <span>{props.source}</span>}
+        </Breadcrumbs>
     )
 }
 ItemBreadcrumb.propTypes = {
     metric: string,
     report: string,
-    size: string,
     source: string,
     subject: string,
 }
diff --git a/components/frontend/src/widgets/Placeholder.js b/components/frontend/src/widgets/Placeholder.js
index a90feaca63..f315bae950 100644
--- a/components/frontend/src/widgets/Placeholder.js
+++ b/components/frontend/src/widgets/Placeholder.js
@@ -1,17 +1,9 @@
+import { Skeleton } from "@mui/material"
 import { number } from "prop-types"
-import { useContext } from "react"
-import { Placeholder, PlaceholderImage } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
 
 export function LoadingPlaceHolder({ height }) {
-    const darkMode = useContext(DarkMode)
     const defaultHeight = 400
-    return (
-        <Placeholder fluid inverted={darkMode} style={{ height: height ?? defaultHeight }}>
-            <PlaceholderImage />
-        </Placeholder>
-    )
+    return <Skeleton animation="wave" height={height ?? defaultHeight} variant="rectangular" />
 }
 LoadingPlaceHolder.propTypes = {
     height: number,
diff --git a/components/frontend/src/widgets/TableHeaderCell.js b/components/frontend/src/widgets/TableHeaderCell.js
index 75b0f1bf0c..f861f89f97 100644
--- a/components/frontend/src/widgets/TableHeaderCell.js
+++ b/components/frontend/src/widgets/TableHeaderCell.js
@@ -1,6 +1,7 @@
+import { Tooltip } from "@mui/material"
 import { func, string } from "prop-types"
 
-import { Popup, Table } from "../semantic_ui_react_wrappers"
+import { Table } from "../semantic_ui_react_wrappers"
 import {
     alignmentPropType,
     labelPropType,
@@ -11,7 +12,9 @@ import {
 
 function TableHeaderCellContents({ help, label }) {
     return help ? (
-        <Popup wide="very" trigger={<span>{label}</span>} header={label} hoverable content={help} on={["hover"]} />
+        <Tooltip slotProps={{ tooltip: { sx: { maxWidth: "30em" } } }} title={help}>
+            <span>{label}</span>
+        </Tooltip>
     ) : (
         label
     )
diff --git a/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
index 9f4728cc8b..a79f8c2ce0 100644
--- a/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
+++ b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
@@ -46,7 +46,7 @@ export function ActionAndItemPickerButton({ action, itemType, onChange, get_opti
             >
                 <MenuItem disabled divider>
                     <Typography variant="button">
-                        <ItemBreadcrumb size="tiny" {...breadcrumbProps} />
+                        <ItemBreadcrumb {...breadcrumbProps} />
                     </Typography>
                 </MenuItem>
                 {get_options().map((option) => (