diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts b/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts
index 7b90a0825d..92c47a15e9 100644
--- a/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts
+++ b/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts
@@ -4,7 +4,7 @@ import { NavbarAccountProps } from './NavbarAccount';
 import { getGlowOnFocusStyles } from '../utils.styles';
 
 export const getNavbarAccountStyles = () => ({
-  root: css(
+  navbarAccount: css(
     {
       // default button reset styles
       margin: 0,
diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx b/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx
index 834f872c80..6bcc4140d5 100644
--- a/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx
+++ b/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx
@@ -50,7 +50,7 @@ function _NavbarAccount(
           variant="transparent"
           size="small"
           ref={ref}
-          className={cx(styles.root, className)}
+          className={cx(styles.navbarAccount, className)}
           testId={testId}
         >
           <img
diff --git a/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts b/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts
index 8bda0dea13..c2bdb22c8e 100644
--- a/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts
+++ b/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts
@@ -2,7 +2,7 @@ import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 
 export const getNavbarBadgeStyles = () => ({
-  root: css({
+  navbarBadge: css({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
diff --git a/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx b/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx
index 0b04626e72..e507df595c 100644
--- a/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx
+++ b/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx
@@ -36,7 +36,7 @@ function _NavbarBadge(
     <Comp
       {...otherProps}
       ref={ref}
-      className={cx(styles.root, className)}
+      className={cx(styles.navbarBadge, className)}
       data-test-id={testId}
     >
       {children}
diff --git a/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts b/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts
index de340c8d62..21bf9c688a 100644
--- a/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts
+++ b/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts
@@ -3,7 +3,7 @@ import { getGlowOnFocusStyles } from '../utils.styles';
 import tokens from '@contentful/f36-tokens';
 
 export const getNavbarHelpStyles = () => ({
-  root: css(
+  navbarHelp: css(
     {
       // default button reset styles
       fontSize: tokens.fontSizeS,
diff --git a/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx b/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx
index 756b42fb21..48db0b9e5f 100644
--- a/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx
+++ b/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx
@@ -41,7 +41,7 @@ function _NavbarHelp(
           {...otherProps}
           as="button"
           ref={ref}
-          className={cx(styles.root, className)}
+          className={cx(styles.navbarHelp, className)}
           testId={testId}
           variant="transparent"
           size="small"
diff --git a/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts b/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts
index d74fd01438..a937832723 100644
--- a/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts
+++ b/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts
@@ -3,7 +3,7 @@ import { getGlowOnFocusStyles } from '../utils.styles';
 import tokens from '@contentful/f36-tokens';
 
 export const getNavbarSearchStyles = () => ({
-  root: css(
+  navbarSearch: css(
     {
       // default button reset styles
       padding: tokens.spacing2Xs,
diff --git a/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx b/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx
index a16024d1c8..ec3759583a 100644
--- a/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx
+++ b/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx
@@ -28,7 +28,7 @@ function _NavbarSearch(
       variant="transparent"
       ref={ref}
       size="small"
-      className={cx(styles.root, className)}
+      className={cx(styles.navbarSearch, className)}
       testId={testId}
       icon={<SearchIcon size="medium" />}
     />
diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
index 6a73cd34d4..40899c1dba 100644
--- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
+++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
@@ -4,7 +4,7 @@ import { hexToRGBA } from '@contentful/f36-utils';
 import { getGlowOnFocusStyles } from '../utils.styles';
 
 export const getNavbarSwitcherStyles = () => ({
-  root: css(
+  navbarSwitcher: css(
     {
       // default button reset styles
       margin: 0,
diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx
index 1214cbbbab..37cb64a84e 100644
--- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx
+++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx
@@ -42,7 +42,7 @@ function _NavbarSwitcher(
       {...otherProps}
       as="button"
       ref={ref}
-      className={cx(styles.root, className)}
+      className={cx(styles.navbarSwitcher, className)}
       testId={testId}
       alignItems="center"
       fullHeight
diff --git a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts
index 51976b99bf..2f07fc9756 100644
--- a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts
+++ b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts
@@ -3,7 +3,7 @@ import tokens from '@contentful/f36-tokens';
 import { getGlowOnFocusStyles } from '../utils.styles';
 import { hexToRGBA } from '@contentful/f36-utils';
 export const getNavbarTopbarItemStyles = () => ({
-  root: css(
+  navbarTopItem: css(
     {
       // default button reset styles
       margin: 0,
diff --git a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx
index 73a9dc832f..8be0918a0e 100644
--- a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx
+++ b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx
@@ -34,7 +34,7 @@ function _NavbarTopbarItem<
     <Comp
       {...otherProps}
       ref={ref}
-      className={cx(styles.root, className)}
+      className={cx(styles.navbarTopItem, className)}
       data-test-id={testId}
     >
       {children}