diff --git a/packages/web/src/components/treeView.css b/packages/web/src/components/treeView.css
index 860d560fc9..02cc9d8db1 100644
--- a/packages/web/src/components/treeView.css
+++ b/packages/web/src/components/treeView.css
@@ -69,6 +69,10 @@
   color: var(--vscode-list-activeSelectionForeground) !important;
 }
 
+.tree-view-content:focus .tree-view-entry.selected button.eye.toggled .codicon {
+  color: var(--vscode-editorInfo-foreground) !important;
+}
+
 .tree-view-empty {
   flex: auto;
   display: flex;
diff --git a/tests/playwright-test/ui-mode-test-watch.spec.ts b/tests/playwright-test/ui-mode-test-watch.spec.ts
index 9bbbdc0ec0..67b38e3872 100644
--- a/tests/playwright-test/ui-mode-test-watch.spec.ts
+++ b/tests/playwright-test/ui-mode-test-watch.spec.ts
@@ -320,3 +320,25 @@ test('should not watch output', async ({ runUITest }) => {
   expect(commands).toContain('runTests');
   expect(commands).not.toContain('listTests');
 });
+
+
+test('should have watch icon highlighted when a test is focused and watch on the test is enabled', async ({ runUITest, writeFiles }) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('passes', () => {});
+    `,
+  });
+
+  await page.getByText('a.test.ts').click();
+  // watch icon should not be highlight till the watch icon is clicked 
+  await expect(page.getByRole('treeitem', { name: 'a.test.ts' }).getByRole('button', { name: 'Watch' })).toHaveCSS('color', 'rgb(255, 255, 255)');
+
+  await page.getByRole('treeitem', { name: 'passes' }).hover();
+  await page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).click();
+  await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).locator('.codicon-eye')).toHaveCSS('color', 'rgb(26, 133, 255)');
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ◯ a.test.ts
+        ◯ passes 👁 <=
+  `);
+});