diff --git a/components/frontend/src/semantic_ui_react_wrappers.js b/components/frontend/src/semantic_ui_react_wrappers.js
index e172de20cc..83f71718d4 100644
--- a/components/frontend/src/semantic_ui_react_wrappers.js
+++ b/components/frontend/src/semantic_ui_react_wrappers.js
@@ -7,7 +7,6 @@ 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/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/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/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) => (