diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
index 40899c1dba..9e3b1285f5 100644
--- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
+++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
@@ -33,7 +33,7 @@ export const getNavbarSwitcherStyles = () => ({
         display: 'none',
       },
       '&:hover li': {
-        backgroundColor: hexToRGBA(tokens.gray300, 0.15),
+        backgroundColor: '#f2f4f6', // calculated hex color to avoid opaque color blending
       },
     },
     getGlowOnFocusStyles(
diff --git a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts
index 8efcc64bbc..a3dcaedc7c 100644
--- a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts
+++ b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts
@@ -50,7 +50,7 @@ export const getNavbarSwitcherItemStyles = () => ({
       },
     },
     '&:nth-child(3)': {
-      left: '-24px', //magic number due to round border design
+      left: '-25px', //magic number due to round border design
       paddingLeft: tokens.spacingM,
       borderRadius: `0 3rem 3rem 0`,
       fontFamily: tokens.fontStackMonospace,