diff --git a/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx b/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx
index 51b48a66d..d02d5c4d9 100644
--- a/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx
+++ b/workspaces/bulk-import/packages/app/src/components/search/SearchPage.tsx
@@ -42,13 +42,6 @@ import { makeStyles } from '@mui/styles';
 import React from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  bar: {
-    padding: theme.spacing(1, 0),
-  },
-  filters: {
-    padding: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  },
   filter: {
     '& + &': {
       marginTop: theme.spacing(2.5),
@@ -67,7 +60,11 @@ const SearchPage = () => {
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
-            <Paper className={classes.bar}>
+            <Paper
+              sx={{
+                py: 1,
+              }}
+            >
               <SearchBar />
             </Paper>
           </Grid>
@@ -88,7 +85,12 @@ const SearchPage = () => {
                 },
               ]}
             />
-            <Paper className={classes.filters}>
+            <Paper
+              sx={{
+                p: 2,
+                mt: 2,
+              }}
+            >
               {types.includes('techdocs') && (
                 <SearchFilter.Select
                   className={classes.filter}
diff --git a/workspaces/bulk-import/packages/backend/src/index.ts b/workspaces/bulk-import/packages/backend/src/index.ts
index 8234ea7c8..5f6779e6e 100644
--- a/workspaces/bulk-import/packages/backend/src/index.ts
+++ b/workspaces/bulk-import/packages/backend/src/index.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { createBackend } from '@backstage/backend-defaults';
+ */
+import { createBackend } from '@backstage/backend-defaults';
 
 const backend = createBackend();
 
diff --git a/workspaces/bulk-import/plugins/bulk-import/package.json b/workspaces/bulk-import/plugins/bulk-import/package.json
index b16e9dc4c..914924abd 100644
--- a/workspaces/bulk-import/plugins/bulk-import/package.json
+++ b/workspaces/bulk-import/plugins/bulk-import/package.json
@@ -43,11 +43,9 @@
     "@backstage/plugin-permission-react": "^0.4.27",
     "@backstage/theme": "^0.6.0",
     "@janus-idp/shared-react": "^2.13.1",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "5.16.4",
     "@mui/material": "^5.12.2",
+    "@mui/styles": "^6.1.6",
     "@red-hat-developer-hub/backstage-plugin-bulk-import-common": "^1.4.0",
     "@tanstack/react-query": "^4.29.21",
     "formik": "^2.4.5",
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts
index 44d4ec3c9..abc102fcf 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts
+++ b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.test.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { IdentityApi } from '@backstage/core-plugin-api';
+ */
+import { IdentityApi } from '@backstage/core-plugin-api';
 
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts
index 5946e4452..85757fb73 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts
+++ b/workspaces/bulk-import/plugins/bulk-import/src/api/BulkImportBackendClient.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import {
+ */
+import {
   ConfigApi,
   createApiRef,
   IdentityApi,
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx
index 5d6843939..8daede401 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositories.tsx
@@ -12,12 +12,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 
 import { useDrawer } from '@janus-idp/shared-react';
-import { makeStyles } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import FormControl from '@mui/material/FormControl';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 import { get } from 'lodash';
 
@@ -34,24 +36,24 @@ import { PreviewFileSidebar } from '../PreviewFile/PreviewFileSidebar';
 import { AddRepositoriesFormFooter } from './AddRepositoriesFormFooter';
 import { AddRepositoriesTable } from './AddRepositoriesTable';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   body: {
     marginBottom: '50px',
     padding: '24px',
   },
-  approvalTool: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'left',
-    alignItems: 'center',
-    paddingTop: '24px',
-    paddingBottom: '24px',
-    paddingLeft: '16px',
-    backgroundColor: theme.palette.background.paper,
-    borderBottomStyle: 'groove',
-    border: theme.palette.divider,
-  },
-
+  // We would need this once the ServiceNow approval tool is incorporated in the plugin
+  // approvalTool: {
+  //   display: 'flex',
+  //   flexDirection: 'row',
+  //   justifyContent: 'left',
+  //   alignItems: 'center',
+  //   paddingTop: '24px',
+  //   paddingBottom: '24px',
+  //   paddingLeft: '16px',
+  //   backgroundColor: theme.palette.background.paper,
+  //   borderBottomStyle: 'groove',
+  //   border: theme.palette.divider,
+  // },
   approvalToolTooltip: {
     paddingTop: '4px',
     paddingRight: '24px',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
index 69ae821d8..e0191047e 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
@@ -12,21 +12,21 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React, { useState } from 'react';
+ */
+import React, { useState } from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import {
-  Button,
-  Card,
-  Container,
-  Drawer,
-  IconButton,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
 import CloseIcon from '@mui/icons-material/Close';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {
@@ -38,18 +38,7 @@ import { urlHelper } from '../../utils/repository-utils';
 import { AddRepositoriesTableToolbar } from './AddRepositoriesTableToolbar';
 import { RepositoriesTable } from './RepositoriesTable';
 
-const useStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
-  sidePanelfooter: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'right',
-    marginTop: theme.spacing(2),
-    position: 'fixed',
-    bottom: '20px',
-  },
+const useStyles = makeStyles({
   drawerPaper: {
     ['@media (max-width: 960px)']: {
       '& > div[class*="MuiDrawer-paper-"]': {
@@ -63,7 +52,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
   },
-}));
+});
 
 export const AddRepositoriesDrawer = ({
   open,
@@ -129,7 +118,7 @@ export const AddRepositoriesDrawer = ({
             </Link>
           </div>
           <div>
-            <IconButton onClick={onClose} className="align-right">
+            <IconButton onClick={onClose} className="align-right" size="large">
               <CloseIcon />
             </IconButton>
           </div>
@@ -147,13 +136,24 @@ export const AddRepositoriesDrawer = ({
             drawerOrganization={orgData?.orgName}
           />
         </Card>
-        <div className={classes.sidePanelfooter}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'right',
+            mt: 2,
+            position: 'fixed',
+            bottom: '20px',
+          }}
+        >
           <span>
             <Button
               variant="contained"
               color="primary"
               onClick={() => handleSelectRepoFromDrawer(selectedRepos)}
-              className={classes.createButton}
+              sx={{
+                mr: 1,
+              }}
               data-testid="select-from-drawer"
             >
               Select
@@ -168,7 +168,7 @@ export const AddRepositoriesDrawer = ({
               Cancel
             </Button>
           </span>
-        </div>
+        </Box>
       </Container>
     </Drawer>
   );
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx
index 92dcec7f9..8ca20e89b 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { configApiRef, identityApiRef } from '@backstage/core-plugin-api';
@@ -51,8 +52,8 @@ jest.mock('@janus-idp/shared-react', () => ({
   useDrawer: jest.fn(),
 }));
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       body: 'body',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
index d48ab045b..62634c292 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -16,9 +16,11 @@
 
 import { Link } from '@backstage/core-components';
 
-import { Button, makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Tooltip from '@mui/material/Tooltip';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {
@@ -27,10 +29,7 @@ import {
   ApprovalTool,
 } from '../../types';
 
-const useStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
+const useStyles = makeStyles({
   illustration: {
     flexDirection: 'row',
     display: 'flex',
@@ -40,25 +39,7 @@ const useStyles = makeStyles(theme => ({
   tooltip: {
     maxWidth: 'none',
   },
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'left',
-    position: 'fixed',
-    bottom: 0,
-    paddingTop: '24px',
-    paddingBottom: '24px',
-    paddingLeft: '24px',
-    backgroundColor:
-      theme.palette.type === 'light'
-        ? '#fff'
-        : theme.palette.navigation.background,
-    width: '100%',
-    borderTopStyle: 'groove',
-    border: theme.palette.divider,
-    zIndex: 1,
-  },
-}));
+});
 
 const sPad = (repositories: AddedRepositories) =>
   Object.keys(repositories || []).length > 1 ? 's' : '';
@@ -85,7 +66,7 @@ export const AddRepositoriesFormFooter = () => {
       variant="contained"
       color="primary"
       onClick={handleSubmit as any}
-      className={styles.createButton}
+      sx={{ mr: 1 }}
       disabled={disableCreate || isSubmitting}
       startIcon={
         isSubmitting && <CircularProgress size="20px" color="inherit" />
@@ -96,7 +77,27 @@ export const AddRepositoriesFormFooter = () => {
   );
 
   return (
-    <div className={styles.footer} data-testid="add-repository-footer">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'left',
+        position: 'fixed',
+        bottom: 0,
+        pt: 3,
+        pb: 3,
+        pl: 3,
+        backgroundColor: theme =>
+          theme.palette.mode === 'light'
+            ? '#fff'
+            : theme.palette.navigation.background,
+        width: '100%',
+        borderTopStyle: 'groove',
+        borderColor: 'divider',
+        zIndex: 1,
+      }}
+      data-testid="add-repository-footer"
+    >
       {toolTipTitle ? (
         <Tooltip classes={{ tooltip: styles.tooltip }} title={toolTipTitle}>
           <span>{submitButton}</span>
@@ -107,6 +108,6 @@ export const AddRepositoriesFormFooter = () => {
       <Link to="/bulk-import/repositories">
         <Button variant="outlined">Cancel</Button>
       </Link>
-    </div>
+    </Box>
   );
 };
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
index 27bd6676a..dc8fb2227 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
@@ -12,21 +12,21 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 
 import { Content, Header, Page, Progress } from '@backstage/core-components';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  makeStyles,
-  useTheme,
-} from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { bulkImportPermission } from '@red-hat-developer-hub/backstage-plugin-bulk-import-common';
@@ -77,7 +77,7 @@ export const AddRepositoriesPage = () => {
               <AccordionDetails className={classes.accordionDetails}>
                 {/* <Illustrations
                 iconClassname={
-                  theme.palette.type === 'dark'
+                  theme.palette.mode === 'dark'
                     ? 'icon-approval-tool-white'
                     : 'icon-approval-tool-black'
                 }
@@ -85,7 +85,7 @@ export const AddRepositoriesPage = () => {
               /> */}
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === 'dark'
                       ? 'icon-choose-repositories-white'
                       : 'icon-choose-repositories-black'
                   }
@@ -93,7 +93,7 @@ export const AddRepositoriesPage = () => {
                 />
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === 'dark'
                       ? 'icon-generate-cataloginfo-white'
                       : 'icon-generate-cataloginfo-black'
                   }
@@ -101,7 +101,7 @@ export const AddRepositoriesPage = () => {
                 />
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === 'dark'
                       ? 'icon-edit-pullrequest-white'
                       : 'icon-edit-pullrequest-black'
                   }
@@ -109,7 +109,7 @@ export const AddRepositoriesPage = () => {
                 />
                 <Illustrations
                   iconClassname={
-                    theme.palette.type === 'dark'
+                    theme.palette.mode === 'dark'
                       ? 'icon-track-status-white'
                       : 'icon-track-status-black'
                   }
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
index ddd3d65fb..15ff8a171 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
@@ -14,7 +14,8 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import { Box, Paper } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, RepositorySelection } from '../../types';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
index 86d5a0eae..f76e56030 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
@@ -14,9 +14,11 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import { makeStyles, Toolbar } from '@material-ui/core';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import {
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
index 0956839b2..595654b6f 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
 
 import { getImageForIconClass } from '../../utils/icons';
 
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
index 64e11e442..41b58a617 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
@@ -14,13 +14,11 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import {
-  Checkbox,
-  TableCell,
-  TableHead,
-  TableRow,
-  TableSortLabel,
-} from '@material-ui/core';
+import Checkbox from '@mui/material/Checkbox';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
 
 import { Order } from '../../types';
 import { RepositoriesListColumns } from '../Repositories/RepositoriesListColumns';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesSearchBar.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesSearchBar.tsx
index 9efd7ff8e..7f4434f89 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesSearchBar.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesSearchBar.tsx
@@ -14,15 +14,13 @@
  * limitations under the License.
  */ import React from 'react';
 
-import {
-  FormControl,
-  IconButton,
-  Input,
-  InputAdornment,
-  makeStyles,
-} from '@material-ui/core';
-import Clear from '@material-ui/icons/Clear';
-import Search from '@material-ui/icons/Search';
+import Clear from '@mui/icons-material/Clear';
+import Search from '@mui/icons-material/Search';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles({
   formControl: {
@@ -66,6 +64,7 @@ export const RepositoriesSearchBar = ({
               edge="end"
               disabled={!value}
               data-testid="clear-search"
+              size="large"
             >
               <Clear />
             </IconButton>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
index ccf3c6fd6..bbbc251b4 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
@@ -12,10 +12,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
-import { Table, TableContainer, TablePagination } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Table from '@mui/material/Table';
+import TableContainer from '@mui/material/TableContainer';
+import TablePagination from '@mui/material/TablePagination';
 import { useFormikContext } from 'formik';
 
 import { useRepositories } from '../../hooks';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
index 4723298eb..1d7d6ef3b 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
@@ -14,22 +14,17 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import { makeStyles, TableBody, TableCell, TableRow } from '@material-ui/core';
+import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 
 import { AddedRepositories, AddRepositoryData } from '../../types';
 import { OrganizationTableRow } from './OrganizationTableRow';
 import { RepositoriesColumnHeader } from './RepositoriesColumnHeader';
 import { RepositoryTableRow } from './RepositoryTableRow';
 
-const useStyles = makeStyles(theme => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}));
-
 export const RepositoriesTableBody = ({
   loading,
   ariaLabel,
@@ -51,8 +46,6 @@ export const RepositoriesTableBody = ({
   isDrawer?: boolean;
   showOrganizations?: boolean;
 }) => {
-  const classes = useStyles();
-
   const isSelected = (id: string) => {
     return !!selectedRepos[id];
   };
@@ -62,9 +55,16 @@ export const RepositoriesTableBody = ({
       <tbody>
         <tr>
           <td colSpan={RepositoriesColumnHeader.length}>
-            <div data-testid={`${ariaLabel}-loading`} className={classes.empty}>
+            <Box
+              data-testid={`${ariaLabel}-loading`}
+              sx={{
+                padding: 2,
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
               <CircularProgress />
-            </div>
+            </Box>
           </td>
         </tr>
       </tbody>
@@ -106,9 +106,16 @@ export const RepositoriesTableBody = ({
     <tbody>
       <tr>
         <td colSpan={RepositoriesColumnHeader.length}>
-          <div data-testid="no-repositories-found" className={classes.empty}>
+          <Box
+            data-testid="no-repositories-found"
+            sx={{
+              p: 2,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
             No records found
-          </div>
+          </Box>
         </td>
       </tr>
     </tbody>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
index 84cf8ff27..7a8a464c1 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
@@ -18,8 +18,11 @@ import { useAsync } from 'react-use';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-import { Checkbox, makeStyles, TableCell, TableRow } from '@material-ui/core';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Checkbox from '@mui/material/Checkbox';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { makeStyles } from '@mui/styles';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { AddRepositoryData, RepositoryStatus } from '../../types';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.test.tsx
index 779ac1623..4c9f9d068 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 
 import {
   RequirePermission,
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.tsx
index ed6ad3a2b..b5a612c5c 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/BulkImportPage.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 
 import { Content, Header, Page, Progress } from '@backstage/core-components';
 import { usePermission } from '@backstage/plugin-permission-react';
@@ -21,7 +22,8 @@ import {
   DeleteDialogContextProvider,
   DrawerContextProvider,
 } from '@janus-idp/shared-react';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import FormControl from '@mui/material/FormControl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Formik } from 'formik';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx
index 535e992ea..3708fb375 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/KeyValueTextField.tsx
@@ -15,7 +15,8 @@
  */
 import React from 'react';
 
-import { FormHelperText, TextField } from '@material-ui/core';
+import FormHelperText from '@mui/material/FormHelperText';
+import TextField from '@mui/material/TextField';
 
 interface KeyValueTextFieldProps {
   label: string;
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
index f8f5385ef..ea7564dc6 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
@@ -40,8 +40,8 @@ jest.mock('@janus-idp/shared-react', () => ({
   useDrawer: jest.fn(),
 }));
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       paper: 'paper',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx
index 28b58e9f4..bb58fd0f8 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
 import {
   configApiRef,
@@ -20,7 +21,8 @@ import {
   useApi,
 } from '@backstage/core-plugin-api';
 
-import { Drawer, makeStyles } from '@material-ui/core';
+import Drawer from '@mui/material/Drawer';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
@@ -39,15 +41,12 @@ import {
 } from '../../utils/repository-utils';
 import { PreviewFileSidebarDrawerContent } from './PreviewFileSidebarDrawerContent';
 
-const useDrawerStyles = makeStyles(theme => ({
+const useDrawerStyles = makeStyles({
   paper: {
     width: '40%',
     gap: '3%',
   },
-  body: {
-    padding: theme.spacing(2.5),
-  },
-}));
+});
 
 export const PreviewFileSidebar = ({
   open,
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx
index 98bf70f03..a2d66829c 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx
@@ -12,17 +12,18 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import { Button, makeStyles } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
 import CloseIcon from '@mui/icons-material/Close';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
@@ -35,52 +36,6 @@ import { urlHelper } from '../../utils/repository-utils';
 import { PreviewPullRequest } from './PreviewPullRequest';
 import { PreviewPullRequests } from './PreviewPullRequests';
 
-const useDrawerStyles = makeStyles(theme => ({
-  paper: {
-    width: '40%',
-    gap: '3%',
-  },
-  body: {
-    padding: theme.spacing(2.5),
-  },
-}));
-
-const useDrawerContentStyles = makeStyles(theme => ({
-  createButton: {
-    marginRight: theme.spacing(1),
-  },
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'baseline',
-    padding: theme.spacing(2.5),
-  },
-  body: {
-    padding: theme.spacing(2.5),
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    marginBottom: '100px',
-    flexGrow: 1,
-  },
-  footer: {
-    flexDirection: 'row',
-    gap: '14px',
-    paddingTop: theme.spacing(2.5),
-    display: 'flex',
-    justifyContent: 'left',
-    position: 'fixed',
-    bottom: 0,
-    paddingLeft: '24px',
-    paddingBottom: '24px',
-    backgroundColor: theme.palette.type === 'light' ? '#fff' : '#1b1d21',
-    width: '100%',
-    borderTopStyle: 'groove',
-    border: theme.palette.divider,
-    zIndex: 1,
-  },
-}));
-
 export const PreviewFileSidebarDrawerContent = ({
   repositoryType,
   onCancel,
@@ -102,32 +57,39 @@ export const PreviewFileSidebarDrawerContent = ({
   setPullRequest: (pullRequest: PullRequestPreviewData) => void;
 }) => {
   const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
-  const classes = useDrawerStyles();
-  const contentClasses = useDrawerContentStyles();
 
   if (isLoading) {
     return (
-      <Stack spacing={5} className={classes.body}>
+      <Stack spacing={5} sx={{ p: 2.5 }}>
         <span style={{ display: 'flex', height: '10%' }}>
-          <Skeleton variant="rect" width="100%" height="100%" />
+          <Skeleton variant="rectangular" width="100%" height="100%" />
           <IconButton
             key="dismiss"
             title="Close the drawer"
             onClick={onCancel}
             color="inherit"
+            size="large"
           >
             <CloseIcon fontSize="small" />
           </IconButton>
         </span>
-        <Skeleton variant="rect" width="100%" height={750} />
-        <Skeleton variant="rect" width="100%" height="10%" />
+        <Skeleton variant="rectangular" width="100%" height={750} />
+        <Skeleton variant="rectangular" width="100%" height="10%" />
       </Stack>
     );
   }
   return (
     <>
       <Box>
-        <Box className={contentClasses.header}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            p: 2.5, // padding: theme.spacing(2.5)
+          }}
+        >
           <div>
             {repositoryType === RepositorySelection.Repository ? (
               <>
@@ -159,12 +121,21 @@ export const PreviewFileSidebarDrawerContent = ({
             title="Close the drawer"
             onClick={onCancel}
             color="inherit"
+            size="large"
           >
             <CloseIcon fontSize="small" />
           </IconButton>
         </Box>
 
-        <Box className={contentClasses.body}>
+        <Box
+          sx={{
+            p: 2.5, // padding: theme.spacing(2.5)
+            pt: 1, // paddingTop: theme.spacing(1)
+            pb: 1, // paddingBottom: theme.spacing(1)
+            mb: '100px', // marginBottom: '100px'
+            flexGrow: 1, // flex-grow: 1
+          }}
+        >
           {repositoryType === RepositorySelection.Repository && (
             <PreviewPullRequest
               repoId={data.id}
@@ -189,12 +160,30 @@ export const PreviewFileSidebarDrawerContent = ({
           )}
         </Box>
       </Box>
-      <div className={contentClasses.footer}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '14px',
+          pt: 2.5, // paddingTop: theme.spacing(2.5)
+          justifyContent: 'left',
+          position: 'fixed',
+          bottom: 0,
+          pl: '24px', // paddingLeft: '24px'
+          pb: '24px', // paddingBottom: '24px'
+          backgroundColor: theme =>
+            theme.palette.mode === 'light' ? '#fff' : '#1b1d21',
+          width: '100%',
+          borderTopStyle: 'groove',
+          borderColor: 'divider', // using theme.palette.divider for border
+          zIndex: 1,
+        }}
+      >
         <Button
           variant="contained"
           color="primary"
           onClick={e => onSave(pullRequest, e)}
-          className={contentClasses.createButton}
+          sx={{ mr: 1 }}
           disabled={
             isSubmitting ||
             (!!formErrors &&
@@ -212,7 +201,7 @@ export const PreviewFileSidebarDrawerContent = ({
         <Link to="" variant="button" onClick={onCancel}>
           <Button variant="outlined">Cancel</Button>
         </Link>
-      </div>
+      </Box>
     </>
   );
 };
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
index ae00a45a7..b5f0b90e9 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
@@ -12,12 +12,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import { Alert, AlertTitle } from '@material-ui/lab';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import { useFormikContext } from 'formik';
 
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx
index 774995d7d..80596f6ee 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx
@@ -29,8 +29,8 @@ import { ApprovalTool, ImportJobStatus } from '../../types';
 import { getPRTemplate } from '../../utils/repository-utils';
 import { PreviewPullRequestForm } from './PreviewPullRequestForm';
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       previewCard: 'previewcard',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx
index 3bdb698d1..829b530d5 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx
@@ -27,13 +27,15 @@ import {
   humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 
-import { Checkbox, FormHelperText, makeStyles } from '@material-ui/core';
-import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
 import CircularProgress from '@mui/material/CircularProgress';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { FormikErrors, useFormik, useFormikContext } from 'formik';
 
 import {
@@ -48,14 +50,15 @@ import {
 } from '../../utils/repository-utils';
 import KeyValueTextField from './KeyValueTextField';
 
-const useDrawerContentStyles = makeStyles(theme => ({
+// THEME_NOT_RESOLVED
+const useDrawerContentStyles = makeStyles({
   previewCard: {
-    marginTop: theme.spacing(1),
+    // marginTop: theme?.spacing(1),
   },
   previewCardContent: {
     paddingTop: 0,
   },
-}));
+});
 
 export const PreviewPullRequestForm = ({
   repoId,
@@ -268,7 +271,7 @@ export const PreviewPullRequestForm = ({
         placeholder="Add Backstage catalog entity descriptor files"
         variant="outlined"
         margin="normal"
-        fullWidth
+        sx={{ width: '99%' }}
         name="prTitle"
         value={formik.values?.prTitle}
         onChange={handleChange}
@@ -282,7 +285,7 @@ export const PreviewPullRequestForm = ({
         placeholder="A describing text with Markdown support"
         margin="normal"
         variant="outlined"
-        fullWidth
+        sx={{ width: '99%' }}
         onChange={handleChange}
         name="prDescription"
         value={formik.values?.prDescription}
@@ -306,7 +309,7 @@ export const PreviewPullRequestForm = ({
         value={formik.values?.componentName}
         error={!!formik.errors?.componentName}
         helperText={formik.errors?.componentName}
-        fullWidth
+        sx={{ width: '99%' }}
         required
       />
       <br />
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
index cb44d6d4e..2671a2aff 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
@@ -33,8 +33,8 @@ jest.mock('react', () => ({
   useState: jest.fn(),
 }));
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       previewCard: 'previewcard',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
index 2ee176ffe..06503610a 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
@@ -12,12 +12,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
-import { Tab, Tabs } from '@material-ui/core';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import { useFormikContext } from 'formik';
 
 import {
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoriesTableBody.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoriesTableBody.tsx
index a923a40a4..571c4b0b4 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoriesTableBody.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoriesTableBody.tsx
@@ -14,22 +14,17 @@
  * limitations under the License.
  */ import * as React from 'react';
 
-import { makeStyles, TableBody, TableCell, TableRow } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 
 import { AddRepositoryData } from '../../types';
 import { AddedRepositoryTableRow } from './AddedRepositoryTableRow';
 import { RepositoriesListColumns } from './RepositoriesListColumns';
 
-const useStyles = makeStyles(theme => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}));
-
 export const AddedRepositoriesTableBody = ({
   loading,
   rows,
@@ -41,16 +36,21 @@ export const AddedRepositoriesTableBody = ({
   emptyRows: number;
   rows: AddRepositoryData[];
 }) => {
-  const classes = useStyles();
-
   if (loading) {
     return (
       <tbody>
         <tr>
           <td colSpan={RepositoriesListColumns?.length}>
-            <div data-testid="import-jobs-loading" className={classes.empty}>
+            <Box
+              data-testid="import-jobs-loading"
+              sx={{
+                p: 2,
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
               <CircularProgress />
-            </div>
+            </Box>
           </td>
         </tr>
       </tbody>
@@ -92,9 +92,16 @@ export const AddedRepositoriesTableBody = ({
     <tbody>
       <tr>
         <td colSpan={RepositoriesListColumns?.length}>
-          <div data-testid="no-import-jobs-found" className={classes.empty}>
+          <Box
+            data-testid="no-import-jobs-found"
+            sx={{
+              p: 2,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
             No records found
-          </div>
+          </Box>
         </td>
       </tr>
     </tbody>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoryTableRow.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoryTableRow.tsx
index ef2a6c8f0..5bc6017e1 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoryTableRow.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/AddedRepositoryTableRow.tsx
@@ -12,12 +12,15 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import * as React from 'react';
+ */
+import * as React from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import { makeStyles, TableCell, TableRow } from '@material-ui/core';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, AddRepositoryData } from '../../types';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.test.tsx
index 280982ec0..b929d52f1 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React, { useState } from 'react';
+ */
+import React, { useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
index 17e0cb2ca..aa1e24feb 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
@@ -20,9 +21,10 @@ import { useApi } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
 import { useDrawer } from '@janus-idp/shared-react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from '@mui/icons-material/Edit';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { useFormikContext } from 'formik';
 
 import { bulkImportPermission } from '@red-hat-developer-hub/backstage-plugin-bulk-import-common';
@@ -123,6 +125,7 @@ const CatalogInfoAction = ({ data }: { data: AddRepositoryData }) => {
             aria-label="Update"
             data-testid="update"
             onClick={() => handleOpenDrawer(value as ImportJobStatus)}
+            size="large"
           >
             <EditIcon />
           </IconButton>
@@ -139,6 +142,7 @@ const CatalogInfoAction = ({ data }: { data: AddRepositoryData }) => {
             href={canView}
             color="inherit"
             aria-label="View"
+            size="large"
           >
             <OpenInNewIcon />
           </IconButton>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
index 9c11be3f5..fa13eb877 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
@@ -36,6 +36,7 @@ const DeleteRepository = ({ data }: { data: AddRepositoryData }) => {
           color="inherit"
           onClick={() => openDialog(data)}
           aria-label="Delete"
+          size="large"
         >
           <Delete />
         </IconButton>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepositoryDialog.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepositoryDialog.tsx
index 108c65869..3c579ec6e 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepositoryDialog.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/DeleteRepositoryDialog.tsx
@@ -16,7 +16,6 @@
 
 import { useApi } from '@backstage/core-plugin-api';
 
-import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningIcon from '@mui/icons-material/Warning';
 import Alert from '@mui/material/Alert';
@@ -29,47 +28,27 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
 import { useMutation } from '@tanstack/react-query';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { AddRepositoryData } from '../../types';
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     dialogContainer: {
       height: '70%',
     },
-
-    titleContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(1),
-    },
     dialogTitle: {
       padding: '16px 20px',
     },
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[700],
-    },
     warningIcon: {
       alignContent: 'center',
       marginTop: '7px',
       marginBottom: '-5px',
       color: '#F0AB00',
     },
-    button: {
-      textTransform: 'none',
-    },
-    deleteButton: {
-      backgroundColor: '#C9190B',
-      color: theme.palette.getContrastText(theme.palette.error.main),
-      '&:hover': {
-        backgroundColor: theme.palette.error.dark,
-      },
-    },
   }),
 );
 
@@ -113,7 +92,13 @@ const DeleteRepositoryDialog = ({
         title="Delete Repository"
         className={classes.dialogTitle}
       >
-        <Box className={classes.titleContainer}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
           <span style={{ fontWeight: 'bold' }}>
             <WarningIcon className={classes.warningIcon} color="warning" />{' '}
             Remove {repository.repoName} repository?
@@ -121,9 +106,15 @@ const DeleteRepositoryDialog = ({
 
           <IconButton
             aria-label="close"
-            className={classes.closeButton}
             onClick={closeDialog}
             title="Close"
+            size="large"
+            sx={{
+              position: 'absolute',
+              right: 1,
+              top: 1,
+              color: 'grey.700',
+            }}
           >
             <CloseIcon />
           </IconButton>
@@ -148,7 +139,6 @@ const DeleteRepositoryDialog = ({
       <DialogActions style={{ justifyContent: 'left', padding: '20px' }}>
         <Button
           variant="contained"
-          className={`${classes.deleteButton} ${classes.button}`}
           onClick={() => handleClickRemove()}
           disabled={
             isUrlMissing || mutationDelete.isLoading || mutationDelete.isError
@@ -158,12 +148,23 @@ const DeleteRepositoryDialog = ({
               <CircularProgress size="20px" color="inherit" />
             )
           }
+          sx={{
+            backgroundColor: '#C9190B',
+            textTransform: 'none',
+            color: theme =>
+              theme.palette.getContrastText(theme.palette.error.main),
+            '&:hover': {
+              backgroundColor: 'error.dark',
+            },
+          }}
         >
           Remove
         </Button>
         <Button
           variant="outlined"
-          className={classes.button}
+          sx={{
+            textTransform: 'none',
+          }}
           onClick={() => closeDialog()}
         >
           Cancel
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesAddLink.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesAddLink.tsx
index 51deb79d7..2d7155d18 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesAddLink.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesAddLink.tsx
@@ -16,8 +16,9 @@
 
 import { LinkButton } from '@backstage/core-components';
 
-import { makeStyles } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { makeStyles } from '@mui/styles';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues } from '../../types';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.test.tsx
index 44c49ae18..bb529eafc 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { identityApiRef } from '@backstage/core-plugin-api';
@@ -39,8 +40,8 @@ jest.mock('./RepositoriesList', () => ({
   useStyles: jest.fn().mockReturnValue({ empty: 'empty' }),
 }));
 
-jest.mock('@material-ui/core', () => ({
-  ...jest.requireActual('@material-ui/core'),
+jest.mock('@mui/material', () => ({
+  ...jest.requireActual('@mui/material'),
   makeStyles: () => () => {
     return {
       empty: 'empty',
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
index daf5cd4e1..c508619ff 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
@@ -12,13 +12,15 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import React from 'react';
+ */
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Table } from '@backstage/core-components';
 
 import { useDeleteDialog, useDrawer } from '@janus-idp/shared-react';
-import { makeStyles, TablePagination } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import TablePagination from '@mui/material/TablePagination';
 
 import { useAddedRepositories } from '../../hooks/useAddedRepositories';
 import { AddRepositoryData, Order } from '../../types';
@@ -30,18 +32,9 @@ import EditCatalogInfo from './EditCatalogInfo';
 import { RepositoriesAddLink } from './RepositoriesAddLink';
 import { RepositoriesListColumns } from './RepositoriesListColumns';
 
-const useStyles = makeStyles(theme => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}));
-
 export const RepositoriesList = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const classes = useStyles();
   const queryParams = new URLSearchParams(location.search);
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<string>();
@@ -151,9 +144,16 @@ export const RepositoriesList = () => {
           ),
         }}
         emptyContent={
-          <div data-testid="no-import-jobs-found" className={classes.empty}>
+          <Box
+            data-testid="no-import-jobs-found"
+            sx={{
+              padding: 2,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
             No records found
-          </div>
+          </Box>
         }
       />
       {openDrawer && (
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/SyncRepository.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/SyncRepository.tsx
index d5dd9dfb1..94373962e 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/SyncRepository.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/components/Repositories/SyncRepository.tsx
@@ -16,8 +16,9 @@
 
 import { useApi } from '@backstage/core-plugin-api';
 
-import { IconButton, Tooltip } from '@material-ui/core';
 import SyncIcon from '@mui/icons-material/Sync';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { useFormikContext } from 'formik';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
@@ -57,6 +58,7 @@ const SyncRepository = ({ data }: SyncRepositoryProps) => {
           color="inherit"
           onClick={() => handleClick()}
           aria-label="Refresh"
+          size="large"
         >
           <SyncIcon />
         </IconButton>
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/hooks/useRepositories.test.ts b/workspaces/bulk-import/plugins/bulk-import/src/hooks/useRepositories.test.ts
index e8dc2fb6c..0bc47e93a 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/hooks/useRepositories.test.ts
+++ b/workspaces/bulk-import/plugins/bulk-import/src/hooks/useRepositories.test.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { useQuery } from '@tanstack/react-query';
+ */
+import { useQuery } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
 import { mockGetOrganizations, mockGetRepositories } from '../mocks/mockData';
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/types/types.ts b/workspaces/bulk-import/plugins/bulk-import/src/types/types.ts
index 305e21574..6d6381e8c 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/types/types.ts
+++ b/workspaces/bulk-import/plugins/bulk-import/src/types/types.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { Entity } from '@backstage/catalog-model';
+ */
+import { Entity } from '@backstage/catalog-model';
 
 import { Repository as RepositoryResponse } from './response-types';
 
diff --git a/workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.test.tsx b/workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.test.tsx
index 93e5b2933..a3b114974 100644
--- a/workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.test.tsx
+++ b/workspaces/bulk-import/plugins/bulk-import/src/utils/repository-utils.test.tsx
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import {
+ */
+import {
   mockGetRepositories,
   mockSelectedRepositories,
 } from '../mocks/mockData';
diff --git a/workspaces/bulk-import/plugins/bulk-import/tests/bulkImport.spec.ts b/workspaces/bulk-import/plugins/bulk-import/tests/bulkImport.spec.ts
index 568d39fb4..1c1fcea08 100644
--- a/workspaces/bulk-import/plugins/bulk-import/tests/bulkImport.spec.ts
+++ b/workspaces/bulk-import/plugins/bulk-import/tests/bulkImport.spec.ts
@@ -12,7 +12,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { expect, Page, test } from '@playwright/test';
+ */
+import { expect, Page, test } from '@playwright/test';
 
 import { Common } from './bulkImportHelper';
 
diff --git a/workspaces/bulk-import/yarn.lock b/workspaces/bulk-import/yarn.lock
index 7c7bc436f..0c8b96c20 100644
--- a/workspaces/bulk-import/yarn.lock
+++ b/workspaces/bulk-import/yarn.lock
@@ -2645,7 +2645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
@@ -8765,6 +8765,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/private-theming@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "@mui/private-theming@npm:6.1.6"
+  dependencies:
+    "@babel/runtime": ^7.26.0
+    "@mui/utils": ^6.1.6
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ef170236b4909815e5fa3866149e5b7e79476c1513f0c51fe1744a1fc093405b5aa0a02bf1cfd3cd94e3ee1067cf0c7ca66ce91578c194b0caeb1589931d0200
+  languageName: node
+  linkType: hard
+
 "@mui/styled-engine@npm:^5.16.6":
   version: 5.16.6
   resolution: "@mui/styled-engine@npm:5.16.6"
@@ -8817,6 +8834,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/styles@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "@mui/styles@npm:6.1.6"
+  dependencies:
+    "@babel/runtime": ^7.26.0
+    "@emotion/hash": ^0.9.2
+    "@mui/private-theming": ^6.1.6
+    "@mui/types": ^7.2.19
+    "@mui/utils": ^6.1.6
+    clsx: ^2.1.1
+    csstype: ^3.1.3
+    hoist-non-react-statics: ^3.3.2
+    jss: ^10.10.0
+    jss-plugin-camel-case: ^10.10.0
+    jss-plugin-default-unit: ^10.10.0
+    jss-plugin-global: ^10.10.0
+    jss-plugin-nested: ^10.10.0
+    jss-plugin-props-sort: ^10.10.0
+    jss-plugin-rule-value-function: ^10.10.0
+    jss-plugin-vendor-prefixer: ^10.10.0
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 2404642047f2df5f4b496f7eb9e3cc015f4d9866bc02cbdffd98555c2dad63f7efecf1848bd73ecaef3b4640b174911f12487cd5dda1c49cc13ad1ca62428717
+  languageName: node
+  linkType: hard
+
 "@mui/system@npm:^5.15.15, @mui/system@npm:^5.16.5, @mui/system@npm:^5.16.7":
   version: 5.16.7
   resolution: "@mui/system@npm:5.16.7"
@@ -8845,7 +8893,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.14, @mui/types@npm:^7.2.15":
+"@mui/types@npm:^7.2.14, @mui/types@npm:^7.2.15, @mui/types@npm:^7.2.19":
   version: 7.2.19
   resolution: "@mui/types@npm:7.2.19"
   peerDependencies:
@@ -8877,6 +8925,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "@mui/utils@npm:6.1.6"
+  dependencies:
+    "@babel/runtime": ^7.26.0
+    "@mui/types": ^7.2.19
+    "@types/prop-types": ^15.7.13
+    clsx: ^2.1.1
+    prop-types: ^15.8.1
+    react-is: ^18.3.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a2ec3c8b5e5238d639d75749bb7b78cf59643b604b5ef5534cec3a54af57e0886da2bbf5123c44878bc651d93aff15d1552f62d5e1602c023d61c123520f5b7c
+  languageName: node
+  linkType: hard
+
 "@n1ru4l/push-pull-async-iterable-iterator@npm:^3.1.0":
   version: 3.2.0
   resolution: "@n1ru4l/push-pull-async-iterable-iterator@npm:3.2.0"
@@ -11060,11 +11128,9 @@ __metadata:
     "@backstage/test-utils": 1.7.0
     "@backstage/theme": ^0.6.0
     "@janus-idp/shared-react": ^2.13.1
-    "@material-ui/core": ^4.9.13
-    "@material-ui/icons": ^4.11.3
-    "@material-ui/lab": ^4.0.0-alpha.61
     "@mui/icons-material": 5.16.4
     "@mui/material": ^5.12.2
+    "@mui/styles": ^6.1.6
     "@playwright/test": 1.45.3
     "@red-hat-developer-hub/backstage-plugin-bulk-import-common": ^1.4.0
     "@redhat-developer/red-hat-developer-hub-theme": 0.4.0
@@ -14340,7 +14406,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.12, @types/prop-types@npm:^15.7.3":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.12, @types/prop-types@npm:^15.7.13, @types/prop-types@npm:^15.7.3":
   version: 15.7.13
   resolution: "@types/prop-types@npm:15.7.13"
   checksum: 8935cad87c683c665d09a055919d617fe951cb3b2d5c00544e3a913f861a2bd8d2145b51c9aa6d2457d19f3107ab40784c40205e757232f6a80cc8b1c815513c