diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index d5dae8c2ec..6cc65e8e80 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -35,9 +35,10 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/theme": "workspace:^",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "5.0.0-alpha.114",
+    "@mui/material": "^5.11.2",
+    "@mui/styles": "^5.11.2",
     "graphiql": "^1.5.12",
     "graphql": "^16.0.0",
     "graphql-ws": "^5.4.1",
diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
index dd38f513be..058801dabf 100644
--- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
+++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
@@ -15,18 +15,18 @@
  */
 
 import React, { useState, Suspense } from 'react';
-import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
+import { Tabs, Tab, Typography, Divider } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import 'graphiql/graphiql.css';
 import { StorageBucket } from '../../lib/storage';
 import { GraphQLEndpoint } from '../../lib/api';
-import { BackstageTheme } from '@backstage/theme';
 import { Progress } from '@backstage/core-components';
 
 const GraphiQL = React.lazy(() =>
   import('graphiql').then(m => ({ default: m.GraphiQL })),
 );
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
     display: 'flex',
@@ -69,10 +69,15 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => {
           classes={{ root: classes.tabs }}
           value={tabIndex}
           onChange={(_, value) => setTabIndex(value)}
-          indicatorColor="primary"
+          textColor="inherit"
         >
           {endpoints.map(({ title }, index) => (
-            <Tab key={index} label={title} value={index} />
+            <Tab
+              key={index}
+              label={title}
+              value={index}
+              sx={{ color: 'inherit' }}
+            />
           ))}
         </Tabs>
         <Divider />
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
index 0b4399948a..b075e0d478 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
@@ -19,7 +19,7 @@ import useAsync from 'react-use/lib/useAsync';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';
 import { GraphiQLBrowser } from '../GraphiQLBrowser';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import {
   Content,
   Header,