diff --git a/.changeset/khaki-penguins-whisper.md b/.changeset/khaki-penguins-whisper.md
new file mode 100644
index 0000000000..f3412a5f79
--- /dev/null
+++ b/.changeset/khaki-penguins-whisper.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the `user-settings` plugin to migrate the Material UI imports.
diff --git a/plugins/user-settings/.eslintrc.js b/plugins/user-settings/.eslintrc.js
index e2a53a6ad2..a2d8179106 100644
--- a/plugins/user-settings/.eslintrc.js
+++ b/plugins/user-settings/.eslintrc.js
@@ -1 +1,5 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+    rules: {
+      '@backstage/no-top-level-material-ui-4-imports': 'error',
+    },
+});
diff --git a/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx
index 082cb5e8ac..952ba3af30 100644
--- a/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx
+++ b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx
@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 
 const EXAMPLE = `auth:
diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx
index 07e9b4aa55..c09dac5985 100644
--- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx
+++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx
@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { makeStyles, Avatar, Theme } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { sidebarConfig } from '@backstage/core-components';
 
 const useStyles = makeStyles<Theme, { size: number }>(theme => ({
diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx
index e9a710036f..07afd8083e 100644
--- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx
+++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx
@@ -15,16 +15,14 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Grid,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import {
   ApiRef,
   SessionApi,
diff --git a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx
index d23716c2bf..e83440e0c5 100644
--- a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx
+++ b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { List } from '@material-ui/core';
+import List from '@material-ui/core/List';
 import { EmptyProviders } from './EmptyProviders';
 import { DefaultProviderSettings } from './DefaultProviderSettings';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
diff --git a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
index 0e2b911978..55c70ba7a2 100644
--- a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 
 const EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';
diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index a5f0d480cb..96f8166c4a 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -15,13 +15,11 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Switch,
-  Tooltip,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Switch from '@material-ui/core/Switch';
+import Tooltip from '@material-ui/core/Tooltip';
 import { FeatureFlag } from '@backstage/core-plugin-api';
 
 type Props = {
diff --git a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
index 60b951ab60..1522001ac5 100644
--- a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
@@ -15,13 +15,11 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import {
-  List,
-  TextField,
-  IconButton,
-  Grid,
-  Typography,
-} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 import {
diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
index 8a32c0bd9b..b8e3c44672 100644
--- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
@@ -15,7 +15,7 @@
  */
 
 import { InfoCard, useSidebarPinState } from '@backstage/core-components';
-import { List } from '@material-ui/core';
+import List from '@material-ui/core/List';
 import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
index 8dde87ba5c..6c663ed1bc 100644
--- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx
index 15c6e9ea9c..337960932e 100644
--- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx
@@ -19,12 +19,10 @@ import {
   useTranslationRef,
   appLanguageApiRef,
 } from '@backstage/core-plugin-api/alpha';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import { makeStyles } from '@material-ui/core/styles';
 import { userSettingsTranslationRef } from '../../translation';
 import { useApi } from '@backstage/core-plugin-api';
 import useObservable from 'react-use/lib/useObservable';
diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx
index c83bdd5b74..8ef2f380f3 100644
--- a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx
@@ -15,7 +15,10 @@
  */
 
 import React from 'react';
-import { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import {
diff --git a/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx
index a06b079e8e..95317147cf 100644
--- a/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx
@@ -15,13 +15,11 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemSecondaryAction,
-  ListItemText,
-  Switch,
-  Tooltip,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Switch from '@material-ui/core/Switch';
+import Tooltip from '@material-ui/core/Tooltip';
 import { useSidebarPinState } from '@backstage/core-components';
 
 /** @public */
diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
index c96d2bb21e..c04710650c 100644
--- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Grid, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
diff --git a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx
index 85c616ec72..80621d1a53 100644
--- a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx
@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { makeStyles, Avatar, Theme } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useUserProfile } from '../useUserProfileInfo';
 import { sidebarConfig } from '@backstage/core-components';
 
diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
index 37d91ecae0..3c19b0ab88 100644
--- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
@@ -19,13 +19,11 @@ import useObservable from 'react-use/lib/useObservable';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  Tooltip,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles } from '@material-ui/core/styles';
 import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { userSettingsTranslationRef } from '../../translation';
diff --git a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx
index 9855fdd048..c17333571d 100644
--- a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx
+++ b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import {
   Header,
   Page,