diff --git a/packages/trace-viewer/src/ui/attachmentsTab.css b/packages/trace-viewer/src/ui/attachmentsTab.css
index 43291d5f1a..66a94121b5 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.css
+++ b/packages/trace-viewer/src/ui/attachmentsTab.css
@@ -45,3 +45,7 @@
   max-width: 80%;
   box-shadow: 0 12px 28px 0 rgba(0,0,0,.2), 0 2px 4px 0 rgba(0,0,0,.1);
 }
+
+a.codicon-cloud-download:hover{
+  background-color: var(--vscode-list-inactiveSelectionBackground)
+}
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 495906f022..09a5e73b1a 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -24,7 +24,6 @@ import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { isTextualMimeType } from '@isomorphic/mimeType';
 import { Expandable } from '@web/components/expandable';
 
-
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 
 type TextAttachmentProps = {
@@ -57,11 +56,18 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
 const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
   const [expanded, setExpanded] = React.useState(false);
   return <Expandable title={
-    <a href={attachmentURL(attachment) + '&download'}>{attachment.name}</a>
-  } expanded={expanded} setExpanded={exp => setExpanded(exp)}>
+    <>
+      {attachment.name}
+      <a href={attachmentURL(attachment) + '&download'}
+        className={'codicon codicon-cloud-download'}
+        style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
+        onClick={$event => $event.stopPropagation()}>
+      </a>
+    </>
+  } expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
     {isTextualMimeType(attachment.contentType) ?
       <TextAttachment attachment={attachment} label={attachment.name} /> :
-      <div><i>no preview available</i></div>
+      <div aria-label={attachment.name}><i>no preview available</i></div>
     }
   </Expandable>;
 };
diff --git a/tests/playwright-test/ui-mode-test-attachments.spec.ts b/tests/playwright-test/ui-mode-test-attachments.spec.ts
index 33ece90e2a..17eec32f31 100644
--- a/tests/playwright-test/ui-mode-test-attachments.spec.ts
+++ b/tests/playwright-test/ui-mode-test-attachments.spec.ts
@@ -40,11 +40,12 @@ test('should contain text attachment', async ({ runUITest }) => {
   ]) {
     await page.getByText(`attach "${name}"`, { exact: true }).click();
     const downloadPromise = page.waitForEvent('download');
-    if (displayedAsText){
-      await page.locator('.expandable-title', { hasText: name }).locator('.codicon-chevron-right').click();
-      await expect(page.getByLabel(name)).toContainText(content.split('\n')?.[0]);
-    }
-    await page.getByRole('link', { name: name }).click();
+    await page.locator('.expandable-title', { hasText: name }).click();
+    await expect(page.getByLabel(name)).toContainText(displayedAsText ?
+      content.split('\n')?.[0] :
+      'no preview available'
+    );
+    await page.locator('.expandable-title', { hasText: name }).getByRole('link').click();
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(name);
     expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);