diff --git a/frontend/src/components/EditorWorkspace.tsx b/frontend/src/components/EditorWorkspace.tsx
index 757d1a6684..a40f054816 100644
--- a/frontend/src/components/EditorWorkspace.tsx
+++ b/frontend/src/components/EditorWorkspace.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { Button, makeStyles, Text, tokens } from '@fluentui/react-components'
+import { Button, makeStyles, mergeClasses, Text, tokens } from '@fluentui/react-components'
 
 import {
   MINIMUM_TOUCH_TARGET_SIZE,
@@ -92,6 +92,9 @@ const useStyles = makeStyles({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
+  selectedSecondaryText: {
+    color: 'inherit',
+  },
   editorPane: {
     display: 'flex',
     flexDirection: 'column',
@@ -141,7 +144,15 @@ export default function EditorWorkspace({
                 <span className={styles.navigationContent}>
                   <span>{item.label}</span>
                   {item.secondaryText && (
-                    <span className={styles.secondaryText} title={item.secondaryText}>{item.secondaryText}</span>
+                    <span
+                      className={mergeClasses(
+                        styles.secondaryText,
+                        item.id === selectedId && styles.selectedSecondaryText,
+                      )}
+                      title={item.secondaryText}
+                    >
+                      {item.secondaryText}
+                    </span>
                   )}
                 </span>
               </Button>