diff --git a/packages/dockview/src/paneview/defaultPaneviewHeader.ts b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
index f47f8f197..6f42b7db1 100644
--- a/packages/dockview/src/paneview/defaultPaneviewHeader.ts
+++ b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
@@ -3,6 +3,7 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
 import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
+import { toggleClass } from '../dom';
 
 export class DefaultHeader
     extends CompositeDisposable
@@ -40,10 +41,12 @@ export class DefaultHeader
         this.apiRef.api = params.api;
 
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '▼' : '▶';
+        this._expander.textContent = '▼';
+
+        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
 
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '▼' : '▶';
+            toggleClass(this._expander, 'collapsed', !e.isExpanded);
         });
     }
 
diff --git a/packages/dockview/src/paneview/paneview.scss b/packages/dockview/src/paneview/paneview.scss
index f4e2a9f19..77ab3a40c 100644
--- a/packages/dockview/src/paneview/paneview.scss
+++ b/packages/dockview/src/paneview/paneview.scss
@@ -31,12 +31,12 @@
             padding: 0px 8px;
             cursor: pointer;
 
-            a {
-                padding-right: 8px;
-                width: 10px;
+            .collapsed {
+                transform: rotate(-90deg);
             }
 
             > span {
+                padding-left: 8px;
                 flex-grow: 1;
             }
         }