diff --git a/.changeset/stale-goats-chew.md b/.changeset/stale-goats-chew.md
new file mode 100644
index 0000000000..775cd827d1
--- /dev/null
+++ b/.changeset/stale-goats-chew.md
@@ -0,0 +1,13 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-pagerduty': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Fix All Material UI Warnings
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 5d55c5da93..d916ad9a61 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -44,7 +44,7 @@ export const EmptyState = ({ title, description, missing, action }: Props) => {
     <Grid
       container
       direction="row"
-      justify="space-around"
+      justifyContent="space-around"
       alignItems="flex-start"
       className={classes.root}
       spacing={2}
diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx
index cb6a841cf3..323565159a 100644
--- a/packages/core-components/src/layout/Content/Content.tsx
+++ b/packages/core-components/src/layout/Content/Content.tsx
@@ -24,7 +24,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     minWidth: 0,
     paddingTop: theme.spacing(3),
     paddingBottom: theme.spacing(3),
-    ...theme.mixins.gutters({}),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
   },
   stretch: {
     display: 'flex',
diff --git a/packages/core-components/src/layout/Page/Page.stories.tsx b/packages/core-components/src/layout/Page/Page.stories.tsx
index 0ea4303f2f..3ad9ecfe72 100644
--- a/packages/core-components/src/layout/Page/Page.stories.tsx
+++ b/packages/core-components/src/layout/Page/Page.stories.tsx
@@ -117,7 +117,7 @@ const DataGrid = () => (
         xs={12}
         container
         spacing={2}
-        justify="space-between"
+        justifyContent="space-between"
         direction="row"
       >
         <Grid item xs={12} md={6}>
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index d675b73a2c..b930c455b5 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -167,7 +167,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
     <Badge
       color="secondary"
       variant="dot"
-      overlap="circle"
+      overlap="circular"
       invisible={!hasNotifications}
     >
       <Icon fontSize="small" />
diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx
index d19574999f..51376511e2 100644
--- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx
@@ -70,7 +70,7 @@ export const MultiSignInPage = ({
         {title && <ContentHeader title={title} textAlign={align} />}
         <Grid
           container
-          justify={align === 'center' ? align : 'flex-start'}
+          justifyContent={align === 'center' ? align : 'flex-start'}
           spacing={2}
           component="ul"
           classes={classes}
@@ -152,7 +152,7 @@ export const SingleSignInPage = ({
       <Content>
         <Grid
           container
-          justify="center"
+          justifyContent="center"
           spacing={2}
           component="ul"
           classes={classes}
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
index 8325987a59..e4abf3a3ac 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
@@ -36,7 +36,12 @@ export const AlertInsightsSectionHeader = ({
   return (
     <Box position="relative" mb={3} textAlign="left">
       <ScrollAnchor id={`alert-${number}`} />
-      <Grid container spacing={2} justify="space-between" alignItems="center">
+      <Grid
+        container
+        spacing={2}
+        justifyContent="space-between"
+        alignItems="center"
+      >
         <Grid item>
           <Box display="flex" alignItems="center">
             <Box mr={2}>
diff --git a/plugins/fossa/src/components/FossaCard/FossaCard.tsx b/plugins/fossa/src/components/FossaCard/FossaCard.tsx
index a6cedfb931..58ab3163fd 100644
--- a/plugins/fossa/src/components/FossaCard/FossaCard.tsx
+++ b/plugins/fossa/src/components/FossaCard/FossaCard.tsx
@@ -157,7 +157,7 @@ export const FossaCard = ({ variant }: { variant?: InfoCardVariants }) => {
         item
         container
         direction="column"
-        justify="space-between"
+        justifyContent="space-between"
         alignItems="center"
         style={{ height: '100%' }}
         spacing={0}
diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
index ae98e4e668..e14cd9093a 100644
--- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
@@ -97,7 +97,12 @@ const RolloutSummary = ({
   const abortedMessage = findAbortedMessage(rollout);
 
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <RolloutDrawer rollout={rollout} />
       </Grid>
@@ -111,7 +116,7 @@ const RolloutSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -142,7 +147,7 @@ const RolloutSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -250,7 +255,7 @@ export const RolloutAccordions = ({
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {rollouts.map((rollout, i) => (
diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
index 2e116c0881..d719f707d1 100644
--- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
@@ -35,7 +35,7 @@ export const RolloutDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
diff --git a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
index f0bd92c5bf..36d38d3fe0 100644
--- a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
@@ -51,7 +51,12 @@ const DefaultCustomResourceSummary = ({
   customResourceName,
 }: DefaultCustomResourceSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <DefaultCustomResourceDrawer
           customResource={customResource}
@@ -99,7 +104,7 @@ export const DefaultCustomResourceAccordions = ({
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {customResources.map((cr, i) => (
diff --git a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
index 906e9fd616..ba6169cdf3 100644
--- a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
@@ -42,7 +42,7 @@ export const DefaultCustomResourceDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
index 2173f9bfe4..2d22caec7c 100644
--- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
+++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
@@ -52,7 +52,7 @@ export const DeploymentDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
index 5bbeee1c64..e27c2bfbe1 100644
--- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
+++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
@@ -68,7 +68,12 @@ const DeploymentSummary = ({
   hpa,
 }: DeploymentSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <DeploymentDrawer deployment={deployment} />
       </Grid>
@@ -82,7 +87,7 @@ const DeploymentSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -113,7 +118,7 @@ const DeploymentSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -169,7 +174,7 @@ export const DeploymentsAccordions = ({}: DeploymentsAccordionsProps) => {
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.deployments.map((deployment, i) => (
diff --git a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
index 29107ac210..62af1d9d14 100644
--- a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
+++ b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
@@ -90,7 +90,7 @@ export const ErrorEmptyState = () => {
   return (
     <Grid
       container
-      justify="space-around"
+      justifyContent="space-around"
       direction="row"
       alignItems="center"
       spacing={2}
diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
index 6c840e1783..0018c4b070 100644
--- a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
+++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
@@ -38,7 +38,7 @@ export const IngressDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
index d8632488ad..c1d94fef7b 100644
--- a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
+++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
@@ -40,7 +40,12 @@ type IngressSummaryProps = {
 
 const IngressSummary = ({ ingress }: IngressSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <IngressDrawer ingress={ingress} />
       </Grid>
@@ -84,7 +89,7 @@ export const IngressesAccordions = ({}: IngressesAccordionsProps) => {
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.ingresses.map((ingress, i) => (
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
index 004473dd63..c0dd6d5003 100644
--- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
+++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
@@ -65,7 +65,7 @@ const ClusterSummary = ({
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       <Grid
@@ -73,7 +73,7 @@ const ClusterSummary = ({
         item
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
@@ -92,7 +92,7 @@ const ClusterSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -208,7 +208,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
               {kubernetesObjects?.items.length <= 0 && (
                 <Grid
                   container
-                  justify="space-around"
+                  justifyContent="space-around"
                   direction="row"
                   alignItems="center"
                   spacing={2}
diff --git a/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx b/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx
index 274643b2da..bf714530ce 100644
--- a/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx
+++ b/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx
@@ -112,7 +112,7 @@ const KubernetesDrawerContent = <T extends KubernetesDrawerable>({
         <Grid
           container
           direction="column"
-          justify="flex-start"
+          justifyContent="flex-start"
           alignItems="flex-start"
         >
           <Grid item>
diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
index 1d214ac276..5d17fd7213 100644
--- a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
+++ b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
@@ -38,7 +38,7 @@ export const ServiceDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
index f96bdc8e0b..a51b93b3bc 100644
--- a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
+++ b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
@@ -35,7 +35,12 @@ type ServiceSummaryProps = {
 
 const ServiceSummary = ({ service }: ServiceSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <ServiceDrawer service={service} />
       </Grid>
@@ -107,7 +112,7 @@ export const ServicesAccordions = ({}: ServicesAccordionsProps) => {
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.services.map((service, i) => (
diff --git a/plugins/lighthouse/src/components/Intro/index.tsx b/plugins/lighthouse/src/components/Intro/index.tsx
index b569429b03..509f9e468a 100644
--- a/plugins/lighthouse/src/components/Intro/index.tsx
+++ b/plugins/lighthouse/src/components/Intro/index.tsx
@@ -105,7 +105,7 @@ function GettingStartedCard() {
       divider
       actions={
         <>
-          <Grid container direction="row" justify="flex-end">
+          <Grid container direction="row" justifyContent="flex-end">
             <Grid item>
               <Button
                 component="a"
@@ -155,7 +155,7 @@ export default function LighthouseIntro({ onDismiss = () => {} }: Props) {
         <Grid item xs={12} sm={6} md={8}>
           <Grid
             container
-            justify="flex-end"
+            justifyContent="flex-end"
             alignItems="flex-end"
             className={classes.closeButtonContainer}
           >
diff --git a/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx b/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx
index d567fa43b0..87108f3d74 100644
--- a/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx
+++ b/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx
@@ -20,7 +20,12 @@ import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const IncidentsEmptyState = () => {
   return (
-    <Grid container justify="center" direction="column" alignItems="center">
+    <Grid
+      container
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+    >
       <Grid item xs={12}>
         <Typography variant="h5">Nice! No incidents found!</Typography>
       </Grid>
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
index 03c952a384..dede699203 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
@@ -183,12 +183,12 @@ export const SonarQubeCard = ({
             item
             container
             direction="column"
-            justify="space-between"
+            justifyContent="space-between"
             alignItems="center"
             style={{ height: '100%' }}
             spacing={0}
           >
-            <Grid item container justify="space-around">
+            <Grid item container justifyContent="space-around">
               <RatingCard
                 titleIcon={<BugReport />}
                 title="Bugs"
diff --git a/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx b/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx
index d567fa43b0..87108f3d74 100644
--- a/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx
+++ b/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx
@@ -20,7 +20,12 @@ import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const IncidentsEmptyState = () => {
   return (
-    <Grid container justify="center" direction="column" alignItems="center">
+    <Grid
+      container
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+    >
       <Grid item xs={12}>
         <Typography variant="h5">Nice! No incidents found!</Typography>
       </Grid>
diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
index d9da954152..4283932fb3 100644
--- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
@@ -67,7 +67,7 @@ export const TechDocsBuildLogsDrawerContent = ({
       <Grid
         item
         container
-        justify="space-between"
+        justifyContent="space-between"
         alignItems="center"
         spacing={0}
         wrap="nowrap"