diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
index 0bc24eaa5..720823242 100644
--- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
+++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
@@ -49,6 +49,7 @@ describe('groupPanelApi', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -81,6 +82,7 @@ describe('groupPanelApi', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
index bdcc370ee..d751a26e0 100644
--- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
@@ -16,6 +16,7 @@ describe('tabsContainer', () => {
         const accessor = fromPartial<DockviewComponent>({
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -69,6 +70,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -135,6 +137,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -198,6 +201,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -261,6 +265,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -329,6 +334,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -393,6 +399,7 @@ describe('tabsContainer', () => {
             id: 'testcomponentid',
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             options: {},
         });
 
@@ -457,6 +464,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
         });
@@ -511,6 +519,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
         });
@@ -560,6 +569,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -616,6 +626,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -683,6 +694,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
@@ -750,6 +762,7 @@ describe('tabsContainer', () => {
             options: {},
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             element: document.createElement('div'),
             addFloatingGroup: jest.fn(),
             getGroupPanel: jest.fn(),
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index ae45adf8f..e3580a705 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { Orientation } from '../../splitview/splitview';
 import { CompositeDisposable } from '../../lifecycle';
 import { Emitter } from '../../events';
-import {  IDockviewPanel } from '../../dockview/dockviewPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import { fireEvent, queryByTestId } from '@testing-library/dom';
 import { getPanelData } from '../../dnd/dataTransfer';
@@ -5637,4 +5637,91 @@ describe('dockviewComponent', () => {
             expect(dockview.gap).toBe(15);
         });
     });
+
+    test('that arrow keys should activate appropriate tabs', () => {
+        dockview.layout(500, 1000);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+
+        dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'within' },
+        });
+
+        dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+
+        dockview.addPanel({
+            id: 'panel4',
+            component: 'default',
+            position: { referencePanel: 'panel3', direction: 'below' },
+        });
+
+        const panel1 = dockview.getGroupPanel('panel1')!;
+        const panel2 = dockview.getGroupPanel('panel2')!;
+        const panel3 = dockview.getGroupPanel('panel3')!;
+        const panel4 = dockview.getGroupPanel('panel4')!;
+
+        panel1.api.setActive();
+
+        expect(panel1.api.isActive).toBeTruthy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        const tabsContainer = (panel: IDockviewPanel) =>
+            panel.api.group.element.querySelector('.tabs-container')!;
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+        
+        fireEvent(tabsContainer(panel1), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeTruthy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        fireEvent(tabsContainer(panel1), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeTruthy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        const event2 = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+
+        fireEvent(tabsContainer(panel1), event2);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeTruthy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        fireEvent(tabsContainer(panel1), event2);
+        expect(panel1.api.isActive).toBeTruthy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeFalsy();
+
+        panel4.api.setActive();
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+
+        fireEvent(tabsContainer(panel4), event2);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+
+        fireEvent(tabsContainer(panel4), event);
+        expect(panel1.api.isActive).toBeFalsy();
+        expect(panel2.api.isActive).toBeFalsy();
+        expect(panel3.api.isActive).toBeFalsy();
+        expect(panel4.api.isActive).toBeTruthy();
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
index 01d0c84d1..a93659dd7 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
@@ -188,6 +188,8 @@ export class TestPanel implements IDockviewPanel {
     private _group: DockviewGroupPanel | undefined;
     private _params: IGroupPanelInitParameters | undefined;
     readonly view: IDockviewPanelModel;
+    readonly componentElId: string;
+    readonly tabComponentElId: string;
 
     get title() {
         return '';
@@ -203,6 +205,8 @@ export class TestPanel implements IDockviewPanel {
 
     constructor(public readonly id: string, public api: DockviewPanelApi) {
         this.view = new TestModel(id);
+        this.tabComponentElId = `tab-${id}`;
+        this.componentElId = `tab-panel-${id}`;
         this.init({
             title: `${id}`,
             params: {},
@@ -280,6 +284,7 @@ describe('dockviewGroupPanelModel', () => {
             removeGroup: removeGroupMock,
             onDidAddPanel: () => ({ dispose: jest.fn() }),
             onDidRemovePanel: () => ({ dispose: jest.fn() }),
+            onDidActivePanelChange: () => ({ dispose: jest.fn() }),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -665,6 +670,7 @@ describe('dockviewGroupPanelModel', () => {
             getPanel: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
         });
 
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@@ -727,6 +733,7 @@ describe('dockviewGroupPanelModel', () => {
             getPanel: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
         });
 
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@@ -819,6 +826,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -891,6 +899,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -964,6 +973,7 @@ describe('dockviewGroupPanelModel', () => {
             doSetGroupActive: jest.fn(),
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
+            onDidActivePanelChange: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
                 document.createElement('div'),
                 fromPartial<DockviewComponent>({})
@@ -1044,6 +1054,7 @@ describe('dockviewGroupPanelModel', () => {
             return {
                 id: 'testgroupid',
                 model: groupView,
+                dispose: jest.fn()
             };
         });
 
diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
index cfae5ea6b..88672e774 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts
@@ -7,6 +7,7 @@ describe('gridviewPanel', () => {
             return {
                 onDidAddPanel: jest.fn(),
                 onDidRemovePanel: jest.fn(),
+                onDidActivePanelChange: jest.fn(),
                 options: {},
             } as any;
         });