diff --git a/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md b/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md
new file mode 100644
index 0000000000..98eedcdb3f
--- /dev/null
+++ b/workspaces/theme/.changeset/fix-mui-bottom-nav-selected.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+fix(RHDHBUGS-2291): use `&.Mui-selected` syntax for MuiBottomNavigationAction to resolve CSS specificity console warning
diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
index 8f544e043a..ab7dc0c840 100644
--- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts
+++ b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -701,10 +701,10 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
           '&:hover, &:focus-visible': {
             backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`,
           },
-        },
-        selected: {
-          backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`,
-          color: `${navigationSelectedColor} !important`,
+          '&.Mui-selected': {
+            backgroundColor: `${sidebarItemInteractionBackgroundColor} !important`,
+            color: `${navigationSelectedColor} !important`,
+          },
         },
       },
     };