diff --git a/packages/dockview/src/paneview/defaultPaneviewHeader.ts b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
index 5d4bd6e69..f47f8f197 100644
--- a/packages/dockview/src/paneview/defaultPaneviewHeader.ts
+++ b/packages/dockview/src/paneview/defaultPaneviewHeader.ts
@@ -26,11 +26,11 @@ export class DefaultHeader
         this._content = document.createElement('span');
         this._expander = document.createElement('a');
 
-        this.element.appendChild(this._content);
         this.element.appendChild(this._expander);
+        this.element.appendChild(this._content);
 
         this.addDisposables(
-            addDisposableListener(this._expander, 'click', () => {
+            addDisposableListener(this._element, 'click', () => {
                 this.apiRef.api?.setExpanded(!this.apiRef.api.isExpanded);
             })
         );
@@ -40,10 +40,10 @@ export class DefaultHeader
         this.apiRef.api = params.api;
 
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '<' : '>';
+        this._expander.textContent = params.api.isExpanded ? '▼' : '▶';
 
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '<' : '>';
+            this._expander.textContent = e.isExpanded ? '▼' : '▶';
         });
     }
 
diff --git a/packages/dockview/src/paneview/paneview.scss b/packages/dockview/src/paneview/paneview.scss
index 2f6723c9b..f4e2a9f19 100644
--- a/packages/dockview/src/paneview/paneview.scss
+++ b/packages/dockview/src/paneview/paneview.scss
@@ -29,6 +29,12 @@
             color: var(--dv-activegroup-visiblepanel-tab-color);
             display: flex;
             padding: 0px 8px;
+            cursor: pointer;
+
+            a {
+                padding-right: 8px;
+                width: 10px;
+            }
 
             > span {
                 flex-grow: 1;