diff --git a/tabby-core/src/components/appRoot.component.ts b/tabby-core/src/components/appRoot.component.ts
index 2b94f0f7..c30da5e8 100644
--- a/tabby-core/src/components/appRoot.component.ts
+++ b/tabby-core/src/components/appRoot.component.ts
@@ -182,17 +182,6 @@ export class AppRootComponent {
         return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
     }
 
-    onTabDragStart (tab: BaseTabComponent) {
-        this.app.emitTabDragStarted(tab)
-    }
-
-    onTabDragEnd () {
-        setTimeout(() => {
-            this.app.emitTabDragEnded()
-            this.app.emitTabsChanged()
-        })
-    }
-
     async generateButtonSubmenu (button: ToolbarButton) {
         if (button.submenu) {
             button.submenuItems = await button.submenu()
diff --git a/tabby-core/src/components/tabHeader.component.pug b/tabby-core/src/components/tabHeader.component.pug
index 9bcd06ec..0b903463 100644
--- a/tabby-core/src/components/tabHeader.component.pug
+++ b/tabby-core/src/components/tabHeader.component.pug
@@ -2,13 +2,17 @@
 .progressbar([style.width]='progress + "%"', *ngIf='progress != null')
 .activity-indicator(*ngIf='tab.activity$|async')
 
-ng-container(*ngIf='!config.store.terminal.hideTabIndex')
-    .index(*ngIf='hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}}
-    .index(*ngIf='hostApp.platform !== Platform.macOS') {{index + 1}}
+.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}}
+.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform !== Platform.macOS') {{index + 1}}
 
 .name(
     [title]='tab.customTitle || tab.title',
     [class.no-hover]='config.store.terminal.hideCloseButton'
+    cdkDrag,
+    cdkDragRootElement='tab-header',
+    [cdkDragData]='tab',
+    (cdkDragStarted)='onTabDragStart(tab)',
+    (cdkDragEnded)='onTabDragEnd()',
 ) {{tab.customTitle || tab.title}}
 button(*ngIf='!config.store.terminal.hideCloseButton',(click)='app.closeTab(tab, true)') ×
 
diff --git a/tabby-core/src/components/tabHeader.component.ts b/tabby-core/src/components/tabHeader.component.ts
index aa81424b..20523a9b 100644
--- a/tabby-core/src/components/tabHeader.component.ts
+++ b/tabby-core/src/components/tabHeader.component.ts
@@ -72,6 +72,17 @@ export class TabHeaderComponent extends BaseComponent {
         return items.slice(1)
     }
 
+    onTabDragStart (tab: BaseTabComponent) {
+        this.app.emitTabDragStarted(tab)
+    }
+
+    onTabDragEnd () {
+        setTimeout(() => {
+            this.app.emitTabDragEnded()
+            this.app.emitTabsChanged()
+        })
+    }
+
     @HostBinding('class.flex-width') get isFlexWidthEnabled (): boolean {
         return this.config.store.appearance.flexTabs
     }