diff --git a/cypress/fixtures/flows/dashboard-layouts.json b/cypress/fixtures/flows/dashboard-layouts.json
index f762f16dd..85d44582c 100644
--- a/cypress/fixtures/flows/dashboard-layouts.json
+++ b/cypress/fixtures/flows/dashboard-layouts.json
@@ -64,6 +64,68 @@
             "groupOutline": "#cccccc"
         }
     },
+    {
+        "id": "dashboard-ui-page-tabs",
+        "type": "ui-page",
+        "name": "Layout: Tabs",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "tabs": [
+            {
+                "id": "tab-compose",
+                "name": "Compose"
+            },
+            {
+                "id": "tab-inbox",
+                "name": "Inbox"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-page-tabs-legacy",
+        "type": "ui-page",
+        "name": "Layout: Tabs (no page tabs)",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs-legacy",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-page-tabs-wizard",
+        "type": "ui-page",
+        "name": "Layout: Tabs (wizard)",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs-wizard",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "tabs": [
+            {
+                "id": "tab-step1",
+                "name": "Step 1"
+            },
+            {
+                "id": "tab-step2",
+                "name": "Step 2"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
     {
         "id": "dashboard-ui-group-grid1",
         "type": "ui-group",
@@ -181,6 +243,142 @@
         "visible": "true",
         "disabled": "false"
     },
+    {
+        "id": "dashboard-ui-group-tabs-loose",
+        "type": "ui-group",
+        "name": "Loose",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-inbox",
+        "type": "ui-group",
+        "name": "Inbox List",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-inbox"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-compose2",
+        "type": "ui-group",
+        "name": "Attachments",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-compose"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-compose1",
+        "type": "ui-group",
+        "name": "Compose",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-compose"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-b",
+        "type": "ui-group",
+        "name": "Legacy B",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-a",
+        "type": "ui-group",
+        "name": "Legacy A",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 0,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-hidden",
+        "type": "ui-group",
+        "name": "Legacy Hidden",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": false,
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-dialog",
+        "type": "ui-group",
+        "name": "Legacy Dialog",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "dialog"
+    },
+    {
+        "id": "dashboard-ui-group-wizard-step1",
+        "type": "ui-group",
+        "name": "Step 1",
+        "page": "dashboard-ui-page-tabs-wizard",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-step1"
+    },
+    {
+        "id": "dashboard-ui-group-wizard-step2",
+        "type": "ui-group",
+        "name": "Step 2",
+        "page": "dashboard-ui-page-tabs-wizard",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": false,
+        "disabled": "false",
+        "tab": "tab-step2"
+    },
     {
         "id": "dashboard-ui-button",
         "type": "ui-button",
@@ -246,5 +444,107 @@
         "x": 250,
         "y": 100,
         "wires": []
+    },
+    {
+        "id": "dashboard-ui-button-tabs-hide-inbox",
+        "type": "ui-button",
+        "z": "node-red-tab-layouts",
+        "group": "dashboard-ui-group-tabs-inbox",
+        "name": "",
+        "label": "Hide Inbox",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "{\"groups\":{\"hide\":[\"dashboard-ui-group-tabs-inbox\"]}}",
+        "payloadType": "json",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "enableClick": true,
+        "enablePointerdown": false,
+        "pointerdownPayload": "",
+        "pointerdownPayloadType": "str",
+        "enablePointerup": false,
+        "pointerupPayload": "",
+        "pointerupPayloadType": "str",
+        "x": 170,
+        "y": 300,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-inject-tabs-show-inbox",
+        "type": "inject",
+        "z": "node-red-tab-layouts",
+        "name": "Show Inbox",
+        "props": [
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "{\"groups\":{\"show\":[\"dashboard-ui-group-tabs-inbox\"]}}",
+        "payloadType": "json",
+        "x": 170,
+        "y": 340,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-inject-tabs-wizard-next",
+        "type": "inject",
+        "z": "node-red-tab-layouts",
+        "name": "Wizard next",
+        "props": [
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "{\"groups\":{\"hide\":[\"dashboard-ui-group-wizard-step1\"],\"show\":[\"dashboard-ui-group-wizard-step2\"]}}",
+        "payloadType": "json",
+        "x": 170,
+        "y": 380,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-control-tabs",
+        "type": "ui-control",
+        "z": "node-red-tab-layouts",
+        "name": "",
+        "ui": "dashboard-ui-base",
+        "events": "all",
+        "x": 380,
+        "y": 300,
+        "wires": [
+            []
+        ]
     }
 ]
\ No newline at end of file
diff --git a/cypress/tests/config-nodes/tabs-sidebar.spec.js b/cypress/tests/config-nodes/tabs-sidebar.spec.js
new file mode 100644
index 000000000..72a5eb207
--- /dev/null
+++ b/cypress/tests/config-nodes/tabs-sidebar.spec.js
@@ -0,0 +1,57 @@
+function openEditor () {
+    cy.intercept({ method: 'GET', pathname: '/settings' }, (req) => {
+        req.continue((res) => {
+            res.body.telemetryEnabled = false
+            res.body.editorTheme = { ...res.body.editorTheme, tours: false }
+        })
+    })
+    cy.loadFlows()
+    cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').should('exist')
+}
+
+describe('Node-RED Dashboard 2.0 - Editor: Sidebar tabs', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        openEditor()
+        cy.window().its('RED.sidebar').invoke('show', 'dashboard-2.0')
+    })
+
+    it('renders page tabs in order, followed by a No tab row holding untabbed groups', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', /^Layout: Tabs$/).closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header .nrdb2-sb-title').should((titles) => {
+                expect([...titles].map((t) => t.textContent)).to.deep.equal(['Compose', 'Inbox', 'No tab'])
+            })
+            cy.get('.nrdb2-sb-untabbed-groups .nrdb2-sb-groups-list-header .nrdb2-sb-title').should('have.text', 'Loose')
+        })
+    })
+
+    it('renders groups directly under pages without page tabs', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', 'Layout: Tabs (no page tabs)').closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header').should('not.exist')
+            cy.get('.nrdb2-sb-groups-list-header').should('have.length', 4)
+        })
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', 'Layout: Grid').closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header').should('not.exist')
+        })
+    })
+
+    it('adds a group under No tab without touching existing groups', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', /^Layout: Tabs$/).parent().find('a[title="Add Group"]').click({ force: true })
+        cy.get('#node-config-dialog-ok').click()
+        cy.get('#node-config-dialog-ok').should('not.exist')
+        cy.window().its('RED').should((RED) => {
+            const groups = []
+            RED.nodes.eachConfig((n) => {
+                if (n.type === 'ui-group' && n.page === 'dashboard-ui-page-tabs') {
+                    groups.push(n)
+                }
+            })
+            const added = groups.find((g) => !g.id.startsWith('dashboard-'))
+            expect(added.order).to.equal(5)
+            expect(added.tab || '').to.equal('')
+            expect(groups.filter((g) => g !== added && g.changed).map((g) => g.id)).to.deep.equal([])
+            const touchesAdded = (e) => (e.events || [e]).some((x) => x.node === added || (x.nodes || []).includes(added.id))
+            expect(RED.history.list().filter(touchesAdded)).to.have.length(2)
+        })
+    })
+})
diff --git a/cypress/tests/config-nodes/tabs.spec.js b/cypress/tests/config-nodes/tabs.spec.js
new file mode 100644
index 000000000..0b8aab9f2
--- /dev/null
+++ b/cypress/tests/config-nodes/tabs.spec.js
@@ -0,0 +1,99 @@
+function openEditor () {
+    cy.intercept({ method: 'GET', pathname: '/settings' }, (req) => {
+        req.continue((res) => {
+            res.body.telemetryEnabled = false
+            res.body.editorTheme = { ...res.body.editorTheme, tours: false }
+        })
+    })
+    cy.loadFlows()
+    cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').should('exist')
+}
+
+function editConfig (type, id) {
+    cy.window().its('RED.editor').invoke('editConfig', '', type, id)
+    cy.get('#node-config-dialog-ok').should('be.visible')
+}
+
+describe('Node-RED Dashboard 2.0 - Editor: Page tabs', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        openEditor()
+    })
+
+    it('shows the Tabs list only for the Tabs layout, with a hint while empty', () => {
+        editConfig('ui-page', 'dashboard-ui-page-grid')
+        cy.get('#node-config-container-tabs').should('not.be.visible')
+
+        cy.window().invoke('$', '#node-config-input-layout').invoke('typedInput', 'value', 'tabs')
+        cy.get('#node-config-container-tabs').should('be.visible')
+        cy.get('#node-config-tabs-empty').should('be.visible')
+        cy.get('#node-config-container-tabs .red-ui-editableList-border').should('have.css', 'display', 'none')
+
+        cy.get('#node-config-container-tabs .red-ui-editableList-addButton').click()
+        cy.get('#node-config-tabs-empty').should('not.be.visible')
+        cy.get('#node-config-container-tabs .red-ui-editableList-border').should('not.have.css', 'display', 'none')
+        cy.get('.node-input-tab-name').should('have.length', 1)
+    })
+
+    it('keeps existing tab ids when renaming and generates ids for new tabs', () => {
+        editConfig('ui-page', 'dashboard-ui-page-tabs')
+        cy.get('.node-input-tab-name').should('have.length', 2)
+        cy.get('.node-input-tab-name').eq(0).clear()
+        cy.get('.node-input-tab-name').eq(0).type('Compose renamed')
+        cy.get('#node-config-container-tabs .red-ui-editableList-addButton').click()
+        cy.get('.node-input-tab-name').eq(2).type('Settings')
+        cy.get('#node-config-dialog-ok').click()
+
+        cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').its('tabs').should((tabs) => {
+            expect(tabs.map((t) => t.name)).to.deep.equal(['Compose renamed', 'Inbox', 'Settings'])
+            expect(tabs[0].id).to.equal('tab-compose')
+            expect(tabs[1].id).to.equal('tab-inbox')
+            expect(tabs[2].id).to.be.a('string').and.not.be.oneOf(['', 'tab-compose', 'tab-inbox'])
+        })
+    })
+
+    it('flags a blank tab name and marks the page invalid when saved', () => {
+        editConfig('ui-page', 'dashboard-ui-page-tabs')
+        cy.get('#node-config-container-tabs .red-ui-editableList-addButton').click()
+        cy.get('.node-input-tab-name').eq(2).should('have.class', 'input-error')
+        cy.get('.node-input-tab-name').eq(2).type('   ')
+        cy.get('.node-input-tab-name').eq(2).should('have.class', 'input-error')
+        cy.get('#node-config-dialog-ok').click()
+        cy.get('#node-config-dialog-ok').should('not.exist')
+        cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').its('valid').should('equal', false)
+
+        editConfig('ui-page', 'dashboard-ui-page-tabs')
+        cy.get('.node-input-tab-name').eq(2).type('Settings')
+        cy.get('.node-input-tab-name').eq(2).should('not.have.class', 'input-error')
+        cy.get('#node-config-dialog-ok').click()
+        cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').its('valid').should('equal', true)
+        cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').its('tabs').should((tabs) => {
+            expect(tabs.map((t) => t.name)).to.deep.equal(['Compose', 'Inbox', 'Settings'])
+        })
+    })
+})
+
+describe('Node-RED Dashboard 2.0 - Editor: Group tab', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        openEditor()
+    })
+
+    it('lists the page tabs and selects the group\'s tab', () => {
+        editConfig('ui-group', 'dashboard-ui-group-tabs-inbox')
+        cy.get('#node-config-row-tab').should('be.visible')
+        cy.get('#node-config-input-tab option').should((options) => {
+            expect([...options].map((o) => o.textContent)).to.deep.equal(['None (own tab)', 'Compose', 'Inbox'])
+        })
+        cy.get('#node-config-input-tab').should('have.value', 'tab-inbox')
+    })
+
+    it('hides and clears the tab when the group moves to a page without the Tabs layout', () => {
+        editConfig('ui-group', 'dashboard-ui-group-tabs-inbox')
+        cy.get('#node-config-input-page').select('dashboard-ui-page-grid')
+        cy.get('#node-config-row-tab').should('not.be.visible')
+        cy.get('#node-config-dialog-ok').click()
+
+        cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-group-tabs-inbox').its('tab').should('equal', '')
+    })
+})
diff --git a/cypress/tests/layouts.spec.js b/cypress/tests/layouts.spec.js
index cc7836a5b..9ac81f50c 100644
--- a/cypress/tests/layouts.spec.js
+++ b/cypress/tests/layouts.spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
 // test admin rights & access in FlowFuse
 
 describe('Node-RED Dashboard 2.0 - Layout: Grid', () => {
@@ -42,6 +43,126 @@ describe('Node-RED Dashboard 2.0 - Layout: Notebook', () => {
     })
 })
 
+describe('Node-RED Dashboard 2.0 - Layout: Tabs', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        cy.visit('/dashboard/tabs')
+    })
+
+    it('should render page tabs in list order, followed by untabbed groups', () => {
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 3)
+        cy.get('.nrdb-layout--tabs .v-tab').eq(0).should('contain.text', 'Compose')
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).should('contain.text', 'Inbox')
+        cy.get('.nrdb-layout--tabs .v-tab').eq(2).should('contain.text', 'Loose')
+    })
+
+    it('should render every group assigned to the active tab, in group order', () => {
+        cy.get('.v-window-item--active .nrdb-ui-group').should('have.length', 2)
+        cy.get('.v-window-item--active .nrdb-ui-group').eq(0).find('.v-card-title').should('have.text', 'Compose')
+        cy.get('.v-window-item--active .nrdb-ui-group').eq(1).find('.v-card-title').should('have.text', 'Attachments')
+    })
+
+    it('should switch to the groups of the selected tab', () => {
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).click()
+        cy.get('.v-window-item--active .nrdb-ui-group').should('have.length', 1)
+        cy.get('.v-window-item--active #nrdb-ui-group-dashboard-ui-group-tabs-inbox').should('exist')
+    })
+
+    it('should render a single-group tab without a group title, matching group-per-tab tabs', () => {
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).click()
+        cy.get('.v-window-item--active #nrdb-ui-group-dashboard-ui-group-tabs-inbox .v-card').should('be.visible')
+            .find('.v-card-title').should('not.exist')
+    })
+
+    it('should fall back when the active tab is hidden, without jumping back when it reappears', () => {
+        cy.wait(1000)
+        cy.reloadDashboard()
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).click()
+        cy.get('.v-window-item--active #nrdb-ui-widget-dashboard-ui-button-tabs-hide-inbox').should('be.visible')
+        cy.wait(500)
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-tabs-hide-inbox'))
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 2)
+        cy.get('.nrdb-layout--tabs .v-tab--selected').should('have.length', 1)
+        cy.get('.v-window-item--active .nrdb-ui-group').should('have.length.at.least', 1)
+
+        cy.request('POST', '/inject/dashboard-inject-tabs-show-inbox')
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 3)
+        cy.wait(500)
+        cy.get('.nrdb-layout--tabs .v-tab--selected').should('have.length', 1).and('not.contain.text', 'Inbox')
+    })
+})
+
+describe('Node-RED Dashboard 2.0 - Layout: Tabs across redeploys', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        cy.visit('/dashboard/tabs')
+    })
+
+    it('should keep the selected tab when flows are redeployed', () => {
+        cy.wait(1000)
+        cy.reloadDashboard()
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).click()
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).should('have.class', 'v-tab--selected')
+        // eslint-disable-next-line promise/catch-or-return
+        cy.request({ url: '/flows', headers: { 'Node-RED-API-Version': 'v2' } }).then((res) => {
+            return cy.deployFlow(res.body.rev, res.body.flows)
+        })
+        cy.wait(3000)
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 3)
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).should('have.class', 'v-tab--selected')
+    })
+
+    it('should keep the first tab when flows are redeployed before any tab is clicked', () => {
+        cy.wait(1000)
+        cy.reloadDashboard()
+        cy.get('.nrdb-layout--tabs .v-tab').eq(0).should('have.class', 'v-tab--selected')
+        // eslint-disable-next-line promise/catch-or-return
+        cy.request({ url: '/flows', headers: { 'Node-RED-API-Version': 'v2' } }).then((res) => {
+            return cy.deployFlow(res.body.rev, res.body.flows)
+        })
+        cy.wait(3000)
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 3)
+        cy.get('.nrdb-layout--tabs .v-tab').eq(0).should('have.class', 'v-tab--selected')
+    })
+})
+
+describe('Node-RED Dashboard 2.0 - Layout: Tabs wizard', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        cy.visit('/dashboard/tabs-wizard')
+    })
+
+    it('should select the revealed tab when the active tab is hidden and another shown together', () => {
+        cy.wait(1000)
+        cy.reloadDashboard()
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 1)
+        cy.request('POST', '/inject/dashboard-inject-tabs-wizard-next')
+        cy.wait(1000)
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 1).and('contain.text', 'Step 2')
+        cy.get('.nrdb-layout--tabs .v-tab--selected').should('have.length', 1)
+        cy.get('.v-window-item--active #nrdb-ui-group-dashboard-ui-group-wizard-step2').should('be.visible')
+    })
+})
+
+describe('Node-RED Dashboard 2.0 - Layout: Tabs without page tabs', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        cy.visit('/dashboard/tabs-legacy')
+    })
+
+    it('should render each visible, non-dialog group as its own tab, in group order', () => {
+        cy.get('.nrdb-layout--tabs .v-tab').should('have.length', 2)
+        cy.get('.nrdb-layout--tabs .v-tab').eq(0).should('contain.text', 'Legacy A')
+        cy.get('.nrdb-layout--tabs .v-tab').eq(1).should('contain.text', 'Legacy B')
+    })
+
+    it('should render the group full width without a title', () => {
+        cy.get('.v-window-item--active #nrdb-ui-group-dashboard-ui-group-legacy-a .v-card').should('be.visible')
+            .find('.v-card-title').should('not.exist')
+        cy.get('.v-window-item--active .nrdb-layout--tabs-grid').should('not.exist')
+    })
+})
+
 describe('Node-RED Dashboard 2.0 - Groups', () => {
     beforeEach(() => {
         cy.deployFixture('dashboard-layouts')
diff --git a/docs/en/layouts/types/tabs.md b/docs/en/layouts/types/tabs.md
index 44a388d0f..8c81ff8c0 100644
--- a/docs/en/layouts/types/tabs.md
+++ b/docs/en/layouts/types/tabs.md
@@ -1,5 +1,5 @@
 ---
-description:Render each group as a standalone Tab in a tabbed view for the page
+description: Render a page's groups in a tabbed view, with one or more groups per tab
 ---
 <script setup>
     import AddedIn from '../../../components/AddedIn.vue'
@@ -7,11 +7,22 @@ description:Render each group as a standalone Tab in a tabbed view for the page
 
 # Layout: Tabs <AddedIn version="1.15.0" />
 
-Rather than rendering each group side-by-side (as per Fixed and Grid layouts) or above and below each other (as per Notebook layout), the Tabs layout will render each group as a standalone Tab in a tabbed view for the page. You can then switch between the tabs to view the different groups.
+Rather than rendering groups side-by-side (as per Fixed and Grid layouts) or above and below each other (as per Notebook layout), the Tabs layout renders them in a tabbed view for the page. By default each group is its own tab.
 
 ![Tabs Layout](../../../assets/images/layout-tabs.gif){data-zoomable}
 *An example UI rendered using the "Tabs" Layout, showing each "Group" as a Tab.*
 
+## Multiple Groups per Tab <AddedIn version="1.33.0" />
+
+1. In the `ui-page` config, add tabs to the **Tabs** list. Drag to reorder.
+2. In each `ui-group` config, pick a **Tab**.
+
+You can also drag groups between tabs, and reorder tabs, in the Dashboard 2.0 sidebar's [Layout](../../user/sidebar.md#layout) tab.
+
+Groups in the same tab render side-by-side with their titles, as in the [Grid](./grid.md) layout. Any group without a tab still gets a tab of its own, placed after the page's tabs.
+
+To hide a tab, hide all of its groups with `ui-control`.
+
 Note that it's not currently possible to navigate to a page with a a particular tab open. The page will always open with the first tab selected.
 
 ## Controlling Width & Columns
@@ -20,6 +31,8 @@ Each tab will always render the full width of the screen. The "width" of each gr
 
 For example, if you have a group with a width of 6, and two charts, each with a width of 3, they will render side-by-side within the tab, at 50% of the screen's width. If you then changed the group's width to be 12, the two charts would instead only take up 25% of the screen width each.
 
+In a tab with several groups, each group's width is instead a share of the page's columns, as in the Grid layout.
+
 ## Breakpoints
 
 Depending on the screen size, the number of default columns rendered will change. Here you can see examples of the columns rendered at three breakpoints:
diff --git a/docs/en/nodes/config/ui-group.md b/docs/en/nodes/config/ui-group.md
index c29a0b889..28a890dd4 100644
--- a/docs/en/nodes/config/ui-group.md
+++ b/docs/en/nodes/config/ui-group.md
@@ -3,6 +3,7 @@ description: Group your widgets effectively in FlowFuse Dashboard for better org
 props:
     Name: Descriptive name for this group, will show in the Node-RED Editor and as a label in the Dashboard.
     Page: The Page (<code>ui-page</code>) that this group will render on.
+    Tab: Only for pages using the "Tabs" layout. Which of the page's tabs this group renders in. "None" renders the group as its own tab.
     Type: Controls whether the group appears as a default group or as a dialog, which needs to be triggered manually using ui-control. You can choose between 'Default' and 'Dialog' types.
     Size: The width and height of the group. Height will always be reinforced by this value, the height is generally a <i>minimum</i> height, and will extend to fit its content.
     Class: Any custom CSS classes you wish to add to the Group.
diff --git a/docs/en/nodes/config/ui-page.md b/docs/en/nodes/config/ui-page.md
index 612d35eae..b2ad4ae77 100644
--- a/docs/en/nodes/config/ui-page.md
+++ b/docs/en/nodes/config/ui-page.md
@@ -7,6 +7,7 @@ props:
     Theme: Which FlowFuse Dashboard theme to use for this page. You can customise your own too.
     Layout: Which Layout Manager to render the widgets with
     Default State: <ul><li><b>Visibility</b> - Defines the default visibility of this page in hte side navigation menu.</li><li><b>Interactivity</b> - Controls whether the item is disabled/enabled in the side navigation menu.</li></ul><p>Both of these can be overridden by the user at runtime using a <code>ui-control</code> node.</p>
+    Tabs: Only for the "Tabs" layout. The tabs on this page, in display order. Groups are assigned to a tab in their own config.
     Breakpoints: Configure the responsive breakpoints for your Dashboard, controlling how many columns render at different screen sizes. Not available for "Fixed" layouts.
 ---
 
diff --git a/docs/en/user/sidebar.md b/docs/en/user/sidebar.md
index 1dd368754..e32c1555c 100644
--- a/docs/en/user/sidebar.md
+++ b/docs/en/user/sidebar.md
@@ -16,6 +16,8 @@ The Dashboard 2.0 sidebar tab is added to the Node-RED sidebar. It is designed t
 
 Provides an overview of all pages, links, groups and widgets configured for the respective Dashboard. From here you can re-order, re-group and edit any of these elements. There are also shortcuts to "+ Link", "+ Page" and "+ Group" to quickly add new structural elements to the Dashboard.
 
+Pages using the [Tabs](../layouts/types/tabs.md) layout with tabs defined show a level for each tab, plus a "No tab" row for groups without one. Drag groups between tabs, or drag tabs to reorder them.
+
 ### Theming
 
 Every page in the Dashboard can have a different theme applied to it. This tab provides an overview of all themes defined on the Dashboard, and allows you to edit or create new themes.
diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
index 92340729f..e192bde30 100644
--- a/nodes/config/locales/en-US/ui_base.json
+++ b/nodes/config/locales/en-US/ui_base.json
@@ -62,7 +62,9 @@
             "expand": "Expand",
             "delete": "Delete",
             "spacer": "Add Spacer",
-            "unattachedGroups": "Unattached Groups"
+            "unattachedGroups": "Unattached Groups",
+            "noTab": "No tab",
+            "editTabs": "Edit Tabs"
         },
         "themes": {
             "header": "Themes",
diff --git a/nodes/config/locales/en-US/ui_group.html b/nodes/config/locales/en-US/ui_group.html
index dbbbbf01d..4c224e3c9 100644
--- a/nodes/config/locales/en-US/ui_group.html
+++ b/nodes/config/locales/en-US/ui_group.html
@@ -10,6 +10,13 @@ <h3>Properties</h3>
         <dd>
             Specifies the page within the FlowFuse Dashboard where the group will be displayed. You can select or change the page using this option.
         </dd>
+        <dt>
+            Tab
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            Only for pages using the "Tabs" layout. Which of the page's tabs this group renders in. "None" renders the group as its own tab.
+        </dd>
         <dt>
             Type
             <span class="property-type">option</span>
diff --git a/nodes/config/locales/en-US/ui_group.json b/nodes/config/locales/en-US/ui_group.json
index c940211d7..96d0ecfbe 100644
--- a/nodes/config/locales/en-US/ui_group.json
+++ b/nodes/config/locales/en-US/ui_group.json
@@ -17,7 +17,9 @@
             "openDashboardSidebar": "Open Dashboard 2.0 Sidebar",
             "type": "Type",
             "typeDefault": "Default",
-            "typeDialog": "Dialog"
+            "typeDialog": "Dialog",
+            "tab": "Tab",
+            "noTab": "None (own tab)"
         }
     }
 }
\ No newline at end of file
diff --git a/nodes/config/locales/en-US/ui_page.html b/nodes/config/locales/en-US/ui_page.html
index 4cf8c8368..6322dd149 100644
--- a/nodes/config/locales/en-US/ui_page.html
+++ b/nodes/config/locales/en-US/ui_page.html
@@ -42,6 +42,13 @@ <h3>Properties</h3>
             Choose form one of the available Dashboard Layouts.
             You can read more about our layouts <a href="https://dashboard.flowfuse.com/layouts/types/grid.html">here</a>.
         </dd>
+        <dt>
+            Tabs
+            <span class="property-type">array</span>
+        </dt>
+        <dd>
+            Only for the "Tabs" layout. The tabs on this page, in display order. Groups are assigned to a tab in their own config.
+        </dd>
         <dt>
             Class
             <span class="property-type">string</span>
diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json
index eb9a32f6e..3947ef8fa 100644
--- a/nodes/config/locales/en-US/ui_page.json
+++ b/nodes/config/locales/en-US/ui_page.json
@@ -26,7 +26,10 @@
             "interactivity": "Interactivity",
             "active": "Active",
             "disabled": "Disabled",
-            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar"
+            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar",
+            "addTab": "tab",
+            "tabName": "Tab name",
+            "tabsEmpty": "Add tabs here to render multiple groups per tab, then set the tab in each group's settings."
         },
         "error": {
             "registeringConfig": "Error registering config. No parent ui-base node found for ui-page node: __pageName__",
diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index ecb04cb53..080816fef 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -94,7 +94,8 @@
     .nrdb2-sb-unattached-groups-list li {
         padding: 0;
         border-bottom: 0;
-        background-color: #ffefef;
+        background-color: var(--red-ui-secondary-background);
+        border-left: 3px solid var(--red-ui-border-color-error);
     }
     .nrdb2-sb-list-header {
         display: flex;
@@ -166,9 +167,19 @@
         opacity: 0.5;
     }
     /* indent the groups */
-    .nrdb2-sb-groups-list-header .nrdb2-sb-list-chevron {
+    .nrdb2-sb-groups-list-header .nrdb2-sb-list-chevron,
+    .nrdb2-sb-tabs-list-header .nrdb2-sb-list-chevron {
         margin-left: 1.5rem;
     }
+    .nrdb2-sb-tab-group-list-container .nrdb2-sb-groups-list-header .nrdb2-sb-list-chevron {
+        margin-left: 3rem;
+    }
+    .nrdb2-sb-tab-group-list-container .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon {
+        margin-left: 5rem;
+    }
+    .nrdb2-sb-tab-group-list-container .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon.nrdb2-sb-widget-icon-img {
+        margin-left: 4.85rem;
+    }
     /* indent the widgets */
     .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon {
         margin-left: 3.5rem;
@@ -246,15 +257,15 @@
         text-align: center;
         border-left-width: 0;
         border-right-width: 0;
-        background-color: #f9f9f9;
+        background-color: var(--red-ui-secondary-background);
     }
     div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty {
-        border: 1px dashed #c4c4c4;
+        border: 1px dashed var(--red-ui-secondary-border-color);
     }
     div.nrdb2-sb-group-list-container ol.nrdb2-sb-group-list.red-ui-editableList-list.ui-sortable:empty::before,
     div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty::before {
        /* content: "empty";  TODO: localized properly? */
-        color: #d2d2d2;
+        color: var(--red-ui-tertiary-text-color);
         font-style: italic;
     }
     ol.nrdb2-sb-group-list li:last-child ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty {
@@ -1420,7 +1431,7 @@
      * @param {Object[]} groups - The list of groups to add to the list
      * @param {DashboardItemLookup} widgetsByGroup - The lookup of widgets by group
      */
-    function addGroupOrderingList (pageId, container, groups, widgetsByGroup) {
+    function addGroupOrderingList (pageId, container, groups, widgetsByGroup, tabId) {
         // sort groups by order
         groups.sort((a, b) => a.order - b.order)
 
@@ -1431,7 +1442,7 @@
         }
 
         // ordered list of groups to live within a container (e.g. page list item)
-        const groupsOL = $('<ol>', { class: 'nrdb2-sb-group-list' }).appendTo(container).editableList({
+        const groupsOL = $('<ol>', { class: 'nrdb2-sb-group-list', 'data-page': pageId, 'data-tab': tabId }).appendTo(container).editableList({
             sortable: '.nrdb2-sb-groups-list-header',
             addButton: false,
             height: 'auto',
@@ -1440,12 +1451,21 @@
                 if (!group || !group.id) {
                     // this is a new group that's been added and we need to setup the basics
                     const history = []
-                    const newGroup = createGroupNode({ order: i + 1 })
+                    let order = i + 1
+                    if (tabId !== undefined) {
+                        RED.nodes.eachConfig((n) => {
+                            if (n.type === 'ui-group' && n.page === pageId) {
+                                order = Math.max(order, (n.order || 0) + 1)
+                            }
+                        })
+                    }
+                    const newGroup = createGroupNode({ order })
                     addNode(newGroup, history)
                     assignPage(newGroup, page, history)
                     recordEvents(history)
                     RED.editor.editConfig('', newGroup.type, newGroup.id)
                     group = toDashboardItem(newGroup)
+                    container.data('data', group)
                 }
 
                 const widgets = widgetsByGroup[group.id] || []
@@ -1475,11 +1495,18 @@
                 addRowStateOptions(actions, group)
 
                 const events = []
-                updateItemOrder(groupsOL.editableList('items'), events)
+                if (tabId === undefined) {
+                    updateItemOrder(groupsOL.editableList('items'), events)
+                }
                 // add our changes to NR history and trigger whether or not we need to redeploy
                 recordEvents(events)
             },
             sortItems: function (items) {
+                if (tabId !== undefined) {
+                    scheduleGroupSync(pageId)
+                    return
+                }
+
                 // track any changes
                 const events = []
 
@@ -1489,13 +1516,16 @@
                     const widget = dbItem?.node || {}
                     if (widget.page !== pageId) {
                         const oldPageId = widget.page
+                        const changes = { page: oldPageId }
                         widget.page = pageId
+                        if (widget.tab) {
+                            changes.tab = widget.tab
+                            widget.tab = ''
+                        }
                         events.push({
                             t: 'edit',
                             node: widget,
-                            changes: {
-                                page: oldPageId
-                            },
+                            changes,
                             dirty: widget.changed,
                             changed: widget.dirty
                         })
@@ -1524,7 +1554,7 @@
         div.nrdb2-sb-group-list-container ol.nrdb2-sb-group-list.red-ui-editableList-list.ui-sortable:empty::before,
         div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty::before {
             content: "${localizedEmptyText}";
-            color: #d2d2d2;
+            color: var(--red-ui-tertiary-text-color);
             font-style: italic;
         }
     `
@@ -1533,6 +1563,104 @@
         return groupsOL
     }
 
+    function syncPageGroups (pageId, events) {
+        const tabIds = RED.nodes.node(pageId).tabs.map((t) => t.id)
+        const items = []
+        $(`.nrdb2-layout-order-editor ol.nrdb2-sb-group-list[data-page="${pageId}"]`).each(function () {
+            const tabId = $(this).attr('data-tab')
+            $(this).editableList('items').each(function () {
+                const group = this.data('data')?.node || {}
+                const changes = {}
+                if (group.page !== pageId) {
+                    changes.page = group.page
+                    group.page = pageId
+                }
+                const currentTab = 'page' in changes || tabIds.includes(group.tab) ? group.tab || '' : ''
+                if (currentTab !== tabId) {
+                    changes.tab = group.tab
+                    group.tab = tabId
+                }
+                if (Object.keys(changes).length > 0) {
+                    events.push(createEditHistoryEvent(group, changes))
+                }
+                items.push(this)
+            })
+        })
+        updateItemOrder($(items), events)
+    }
+
+    // a drag between two lists fires sortItems on both, so batch them into one history event
+    const pendingGroupSyncs = new Set()
+    function scheduleGroupSync (pageId) {
+        if (pendingGroupSyncs.size === 0) {
+            setTimeout(function () {
+                const events = []
+                pendingGroupSyncs.forEach((id) => syncPageGroups(id, events))
+                pendingGroupSyncs.clear()
+                recordEvents(events)
+            }, 0)
+        }
+        pendingGroupSyncs.add(pageId)
+    }
+
+    function addTabGroupsRow (container, pageId, tab, groups, widgetsByGroup) {
+        const titleRow = $('<div>', { class: 'nrdb2-sb-list-header nrdb2-sb-tabs-list-header' }).appendTo(container)
+        const handle = $('<i class="nrdb2-sb-list-handle nrdb2-sb-tab-list-handle fa fa-bars"></i>').appendTo(titleRow)
+        if (!tab.id) {
+            handle.css('visibility', 'hidden')
+        }
+        const chevron = $('<i class="fa fa-angle-down nrdb2-sb-list-chevron">', { style: 'width:10px;' }).appendTo(titleRow)
+        $('<i>', { class: 'nrdb2-sb-icon fa fa-folder-o' }).appendTo(titleRow)
+        $('<span>', { class: 'nrdb2-sb-title' }).text(tab.name).appendTo(titleRow)
+        $('<span>', { class: 'nrdb2-sb-info' }).text(`${groups.length} ${c_('layout.groups')}`).appendTo(titleRow)
+
+        const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
+        const btnGroup = $('<div>', { class: 'nrdb2-sb-list-header-button-group' }).appendTo(actions)
+        $(`<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.editTabs')}"><i class="fa fa-cog"></i></a>`)
+            .on('click', function (evt) {
+                RED.editor.editConfig('', 'ui-page', pageId)
+                evt.stopPropagation()
+                evt.preventDefault()
+            })
+            .appendTo(btnGroup)
+
+        const groupsList = $('<div>', { class: 'nrdb2-sb-group-list-container nrdb2-sb-tab-group-list-container' }).appendTo(container)
+        titleRow.click(titleToggle(tab.id, groupsList, chevron))
+        return addGroupOrderingList(pageId, groupsList, groups, widgetsByGroup, tab.id)
+    }
+
+    function addTabOrderingList (pageId, container, groups, widgetsByGroup) {
+        const page = RED.nodes.node(pageId)
+        const tabIds = page.tabs.map((t) => t.id)
+
+        $('<ol>', { class: 'nrdb2-sb-tab-list' }).appendTo(container).editableList({
+            sortable: '.nrdb2-sb-tabs-list-header',
+            addButton: false,
+            height: 'auto',
+            addItem: function (container, i, tab) {
+                const tabGroups = groups.filter((g) => g.node.tab === tab.id)
+                addTabGroupsRow(container, pageId, tab, tabGroups, widgetsByGroup)
+            },
+            sortItems: function (items) {
+                const oldTabs = page.tabs
+                const tabs = []
+                items.each((i, el) => {
+                    tabs.push(el.data('data'))
+                })
+                if (tabs.some((t, i) => t.id !== oldTabs[i]?.id)) {
+                    const events = [createEditHistoryEvent(page, { tabs: oldTabs })]
+                    page.tabs = tabs
+                    syncPageGroups(pageId, events)
+                    recordEvents(events)
+                }
+            }
+        }).editableList('addItems', page.tabs)
+
+        const untabbed = groups.filter((g) => !tabIds.includes(g.node.tab))
+        const untabbedContainer = $('<div>', { class: 'nrdb2-sb-untabbed-groups' }).appendTo(container)
+        return addTabGroupsRow(untabbedContainer, pageId, { id: '', name: c_('layout.noTab') }, untabbed, widgetsByGroup)
+    }
+
     /**
      *  Adds  list of widgets underneath a group
      * @param {String} groupId - The id of the group that these widgets belong to
@@ -1636,7 +1764,7 @@
         const content = $('.nrdb2-layout-order-editor > .red-ui-editableList .nrdb2-sb-group-list-container')
         return {
             content,
-            chevrons: content.parent().find('div.nrdb2-sb-pages-list-header > .nrdb2-sb-list-chevron')
+            chevrons: content.parent().find('div.nrdb2-sb-pages-list-header > .nrdb2-sb-list-chevron, div.nrdb2-sb-tabs-list-header > .nrdb2-sb-list-chevron')
         }
     }
     const collapseLayoutItems = function ({ chevrons, content }) {
@@ -1885,7 +2013,7 @@
                     $('<span>', { class: 'nrdb2-sb-info' }).text(`${groups.length} ${c_('layout.groups')}`).appendTo(titleRow)
                     // adds groups within this page
                     titleRow.click(titleToggle(item.id, groupsList, chevron))
-                    const groupsOL = addGroupOrderingList(item.id, groupsList, groups, widgetsByGroup)
+                    const groupsOL = item.node.layout === 'tabs' && item.node.tabs?.length > 0 ? addTabOrderingList(item.id, groupsList, groups, widgetsByGroup) : addGroupOrderingList(item.id, groupsList, groups, widgetsByGroup)
 
                     // page - actions
                     const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
diff --git a/nodes/config/ui_group.html b/nodes/config/ui_group.html
index b7a20b6c3..ca0033ca9 100644
--- a/nodes/config/ui_group.html
+++ b/nodes/config/ui_group.html
@@ -14,7 +14,8 @@
             className: { value: '' },
             visible: { value: true },
             disabled: { value: false },
-            groupType: { value: 'default' }
+            groupType: { value: 'default' },
+            tab: { value: '' }
         },
         label: function () {
             const page = RED.nodes.node(this.page)?.name || ''
@@ -48,6 +49,42 @@
             }
 
             $('#node-config-input-groupType').val(this.groupType || 'default')
+
+            let selectedTab = this.tab || ''
+            const renderTabs = function () {
+                const page = RED.nodes.node($('#node-config-input-page').val())
+                const tabs = page?.tabs || []
+                const select = $('#node-config-input-tab').empty()
+
+                $('<option>')
+                    .val('')
+                    .text(RED._('@flowfuse/node-red-dashboard/ui-group:ui-group.label.noTab'))
+                    .appendTo(select)
+                tabs.forEach(function (tab) {
+                    $('<option>')
+                        .val(tab.id)
+                        .text(tab.name)
+                        .appendTo(select)
+                })
+
+                if (tabs.some((tab) => tab.id === selectedTab)) {
+                    select.val(selectedTab)
+                } else {
+                    select.val('')
+                }
+
+                if (page?.layout === 'tabs') {
+                    $('#node-config-row-tab').show()
+                } else {
+                    $('#node-config-row-tab').hide()
+                }
+            }
+
+            $('#node-config-input-tab').on('change', function () {
+                selectedTab = $(this).val()
+            })
+            $('#node-config-input-page').on('change', renderTabs)
+            renderTabs()
         },
         oneditsave: function () {
             // convert string to boolean
@@ -78,6 +115,10 @@
         <label for="node-config-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.page"></label>
         <input type="text" id="node-config-input-page">
     </div>
+    <div class="form-row" id="node-config-row-tab">
+        <label for="node-config-input-tab"><i class="fa fa-folder-o"></i> <span data-i18n="ui-group.label.tab"></span></label>
+        <select id="node-config-input-tab" style="width: 70%;"></select>
+    </div>
     <div class="form-row">
         <label for="node-config-input-groupType"><i class="fa fa-window-restore"></i> <span data-i18n="ui-group.label.type"></label>
         <select id="node-config-input-groupType" style="width: 70%;">
diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html
index b6f423d1b..c49a27de1 100644
--- a/nodes/config/ui_page.html
+++ b/nodes/config/ui_page.html
@@ -29,6 +29,17 @@
     .node-config-breakpoints-actions {
 
     }
+    .node-config-list-tabs-item {
+        display: flex;
+        align-items: center;
+        margin-right: 28px;
+    }
+    .node-config-list-tabs-item input {
+        width: 100%;
+    }
+    #node-config-list-tabs li:last-child {
+        border-bottom: none;
+    }
 </style>
 
 <script type="text/javascript">
@@ -74,6 +85,12 @@
                         { name: 'Desktop', px: 1024, cols: 12 }
                     ]
                 },
+                tabs: {
+                    value: [],
+                    validate: function (tabs) {
+                        return this.layout !== 'tabs' || (tabs || []).every((tab) => tab.name?.trim())
+                    }
+                },
                 order: {
                     value: -1
                 },
@@ -115,8 +132,79 @@
                     } else {
                         $('#node-config-container-breakpoints').show()
                     }
+
+                    if (value === 'tabs') {
+                        $('#node-config-container-tabs').show()
+                    } else {
+                        $('#node-config-container-tabs').hide()
+                    }
+                    validateTabNames()
+                })
+
+                const toggleTabsEmpty = function () {
+                    const tabsBorder = $('#node-config-list-tabs').closest('.red-ui-editableList-border')
+                    if ($('#node-config-list-tabs').editableList('length') === 0) {
+                        $('#node-config-tabs-empty').show()
+                        tabsBorder.hide()
+                    } else {
+                        $('#node-config-tabs-empty').hide()
+                        tabsBorder.show()
+                    }
+                }
+
+                const validateTabNames = function () {
+                    const isTabs = $('#node-config-input-layout').typedInput('value') === 'tabs'
+                    $('#node-config-list-tabs .node-input-tab-name').each(function () {
+                        $(this).toggleClass('input-error', isTabs && !$(this).val().trim())
+                    })
+                }
+
+                const tabsList = $('#node-config-list-tabs').editableList({
+                    addButton: c_('label.addTab'),
+                    sortable: true,
+                    removable: true,
+                    height: 'auto',
+                    addItem: function (container, i, tab) {
+                        container.data('tab-id', tab.id || RED.nodes.id())
+                        const row = $('<div>').addClass('node-config-list-tabs-item').appendTo(container)
+
+                        $('<input/>').addClass('node-input-tab-name')
+                            .attr('type', 'text')
+                            .attr('placeholder', c_('label.tabName'))
+                            .val(tab.name || '')
+                            .on('input', validateTabNames)
+                            .appendTo(row)
+
+                        toggleTabsEmpty()
+                        validateTabNames()
+                        return row
+                    },
+                    removeItem: function () {
+                        toggleTabsEmpty()
+                        validateTabNames()
+                    }
                 })
 
+                $('<div>', { id: 'node-config-tabs-empty', class: 'nrdb2-layout-helptext' })
+                    .text(c_('label.tabsEmpty'))
+                    .prependTo(tabsList.closest('.red-ui-editableList'))
+
+                if (!this.tabs) {
+                    this.tabs = []
+                }
+
+                for (let i = 0; i < this.tabs.length; i++) {
+                    const tab = this.tabs[i]
+                    tabsList.editableList('addItem', tab)
+                }
+                toggleTabsEmpty()
+
+                if ($('#node-config-input-layout').typedInput('value') === 'tabs') {
+                    $('#node-config-container-tabs').show()
+                } else {
+                    $('#node-config-container-tabs').hide()
+                }
+
                 // button to edit page layout in wysiwyg layout editor
                 $('#node-config-layout-edit').on('click', function (evt) {
                     evt.preventDefault()
@@ -244,6 +332,18 @@
                     this.disabled = false
                 }
 
+                const tabs = $('#node-config-list-tabs').editableList('items')
+
+                node.tabs = []
+                tabs.each(function (i) {
+                    const row = $(this)
+                    const tab = {
+                        id: row.data('tab-id'),
+                        name: row.find('.node-input-tab-name').val().trim()
+                    }
+                    node.tabs.push(tab)
+                })
+
                 // breakpoints
                 const breakpoints = $('#node-config-list-breakpoints').editableList('items')
     
@@ -302,6 +402,14 @@
             </button>
         </div>
     </div>
+    <div id="node-config-container-tabs">
+        <div class="form-row" style="font-weight: 600;">
+            <i class="w-16 fa fa-folder-o"></i> <span data-i18n="ui-page.label.tabs"></span>
+        </div>
+        <div class="form-row">
+            <ol id="node-config-list-tabs"></ol>
+        </div>
+    </div>
     <div class="form-row" id="text-row-class">
         <label for="node-config-input-className"><i class="w-16 fa fa-code"></i> <span data-i18n="ui-page.label.class"></label>
         <input type="text" id="node-config-input-className" data-i18n="[placeholder]ui-page.label.classNamePlaceholder"/>
diff --git a/test/store/ui.spec.js b/test/store/ui.spec.js
index 797a2e294..3071fedbd 100644
--- a/test/store/ui.spec.js
+++ b/test/store/ui.spec.js
@@ -114,4 +114,80 @@ describe('store: ui getters', function () {
             orderOf(widgets).should.eql(['a', 'b', 's'])
         })
     })
+
+    describe('tabsByPage', function () {
+        function tabsOf (groups, tabs) {
+            const state = {
+                pages: { p1: { id: 'p1', layout: 'tabs', tabs } },
+                groups: Object.fromEntries(groups.map((g) => [g.id, { page: 'p1', visible: true, ...g }]))
+            }
+            const getters = { groupsByPage: ui.getters.groupsByPage(state) }
+            return ui.getters.tabsByPage(state, getters)('p1').map((t) => ({ id: t.id, name: t.name, groups: t.groups.map((g) => g.id) }))
+        }
+
+        it('renders one tab per group when the page defines no tabs', function () {
+            tabsOf([
+                { id: 'g2', name: 'B', order: 2 },
+                { id: 'g1', name: 'A', order: 1 }
+            ]).should.eql([
+                { id: 'g1', name: 'A', groups: ['g1'] },
+                { id: 'g2', name: 'B', groups: ['g2'] }
+            ])
+        })
+
+        it('keeps groups with order 0 first, as the Tabs layout always has', function () {
+            tabsOf([
+                { id: 'g1', name: 'B', order: 1 },
+                { id: 'g0', name: 'A', order: 0 },
+                { id: 'g2', name: 'C', order: 2 }
+            ]).map((t) => t.id).should.eql(['g0', 'g1', 'g2'])
+        })
+
+        it('renders groups sharing a tab id in one tab, ordered by group order', function () {
+            tabsOf([
+                { id: 'g2', name: 'Attachments', order: 2, tab: 't1' },
+                { id: 'g1', name: 'Compose', order: 1, tab: 't1' }
+            ], [{ id: 't1', name: 'Compose' }]).should.eql([
+                { id: 't1', name: 'Compose', groups: ['g1', 'g2'] }
+            ])
+        })
+
+        it('orders tabs by the page tab list, not by group order', function () {
+            tabsOf([
+                { id: 'g1', name: 'A', order: 1, tab: 't2' },
+                { id: 'g2', name: 'B', order: 2, tab: 't1' }
+            ], [{ id: 't1', name: 'First' }, { id: 't2', name: 'Second' }]).map((t) => t.id).should.eql(['t1', 't2'])
+        })
+
+        it('omits tabs with no visible groups', function () {
+            tabsOf([
+                { id: 'g1', name: 'A', order: 1, tab: 't1', visible: false },
+                { id: 'g2', name: 'B', order: 2, tab: 't2' }
+            ], [{ id: 't1', name: 'Hidden' }, { id: 't2', name: 'Shown' }]).map((t) => t.id).should.eql(['t2'])
+        })
+
+        it('excludes dialog groups', function () {
+            tabsOf([
+                { id: 'g1', name: 'A', order: 1, tab: 't1' },
+                { id: 'g2', name: 'Dialog', order: 2, tab: 't1', groupType: 'dialog' }
+            ], [{ id: 't1', name: 'Tab' }]).should.eql([
+                { id: 't1', name: 'Tab', groups: ['g1'] }
+            ])
+        })
+
+        it('gives a group pointing at an unknown tab its own tab', function () {
+            tabsOf([
+                { id: 'g1', name: 'Orphan', order: 1, tab: 'deleted' }
+            ], [{ id: 't1', name: 'Tab' }]).should.eql([
+                { id: 'g1', name: 'Orphan', groups: ['g1'] }
+            ])
+        })
+
+        it('places untabbed groups after the page tabs', function () {
+            tabsOf([
+                { id: 'g1', name: 'Loose', order: 1 },
+                { id: 'g2', name: 'B', order: 2, tab: 't1' }
+            ], [{ id: 't1', name: 'Tab' }]).map((t) => t.id).should.eql(['t1', 'g1'])
+        })
+    })
 })
diff --git a/ui/src/layouts/Tabs.vue b/ui/src/layouts/Tabs.vue
index a3599d79f..7711331d5 100644
--- a/ui/src/layouts/Tabs.vue
+++ b/ui/src/layouts/Tabs.vue
@@ -13,22 +13,30 @@
                 />
             </div>
 
-            <v-tabs v-if="orderedGroups" v-model="tab" show-arrows>
-                <v-tab v-for="t in orderedGroups" :key="t.id" :value="t.id">{{ t.name }}</v-tab>
+            <v-tabs v-model="tab" show-arrows>
+                <v-tab v-for="t in tabs" :key="t.id" :value="t.id">{{ t.name }}</v-tab>
             </v-tabs>
 
-            <v-tabs-window v-if="orderedGroups" v-model="tab">
-                <v-tabs-window-item v-for="t in orderedGroups" :key="t.id" :value="t.id">
-                    <div
-                        class="nrdb-ui-group" :class="getGroupClass(t)"
-                        :disabled="t.disabled === true ? 'disabled' : null"
-                        :style="`grid-column-end: span min(${ t.width }, var(--layout-columns)`"
-                    >
-                        <v-card variant="outlined" class="bg-group-background">
-                            <template #text>
-                                <widget-group :group="t" :widgets="widgetsByGroup(t.id)" />
-                            </template>
-                        </v-card>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item v-for="t in tabs" :key="t.id" :value="t.id">
+                    <div :class="{ 'nrdb-layout--tabs-grid': t.groups.length > 1 }">
+                        <div
+                            v-for="g in t.groups"
+                            :id="'nrdb-ui-group-' + g.id"
+                            :key="g.id"
+                            class="nrdb-ui-group" :class="getGroupClass(g)"
+                            :disabled="g.disabled === true ? 'disabled' : null"
+                            :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
+                        >
+                            <v-card variant="outlined" class="bg-group-background">
+                                <template v-if="t.groups.length > 1 && g.showTitle" #title>
+                                    {{ g.name }}
+                                </template>
+                                <template #text>
+                                    <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
+                                </template>
+                            </v-card>
+                        </div>
                     </div>
                 </v-tabs-window-item>
             </v-tabs-window>
@@ -73,37 +81,27 @@ export default {
     beforeRouteEnter (to, from, next) {
         next(vm => {
             // Select the first tabsheet every time the user arrives on this page
-            if (vm.orderedGroups && vm.orderedGroups.length > 0) {
+            if (vm.tabs.length > 0) {
                 // Check if origin and destination pages are unique
                 if (to?.name !== from?.name) {
-                    vm.tab = vm.orderedGroups[0].id
+                    vm.tab = vm.tabs[0].id
+                    vm.selectedTab = vm.tabs[0].id
                 }
             }
         })
     },
     data () {
         return {
-            tab: null
+            tab: null,
+            selectedTab: null
         }
     },
     computed: {
         ...mapState('ui', ['groups', 'widgets', 'pages']),
         ...mapState('data', ['properties']),
-        ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
-        orderedGroups: function () {
-            // get groups on this page - these are going to be rendered as the different tabs
-            const groups = this.groupsByPage(this.$route.meta.id)
-                // only show hte groups that haven't had their "visible" property set to false
-                .filter((g) => {
-                    if ('visible' in g) {
-                        return g.visible && g.groupType !== 'dialog'
-                    }
-                    return true
-                })
-                .sort((a, b) => {
-                    return a.order - b.order
-                })
-            return groups
+        ...mapGetters('ui', ['groupsByPage', 'tabsByPage', 'widgetsByGroup', 'widgetsByPage']),
+        tabs () {
+            return this.tabsByPage(this.$route.meta.id)
         },
         dialogGroups () {
             const groups = this.groupsByPage(this.$route.meta.id).filter((g) => g.groupType === 'dialog')
@@ -116,6 +114,24 @@ export default {
             return this.pages[this.$route.meta.id]
         }
     },
+    watch: {
+        tab (tab) {
+            if (this.tabs.some((t) => t.id === tab)) {
+                this.selectedTab = tab
+            } else if (this.tabs.some((t) => t.id === this.selectedTab)) {
+                this.tab = this.selectedTab
+            }
+        },
+        tabs (tabs) {
+            if (tabs.length === 0) {
+                return
+            }
+            if (!tabs.some((t) => t.id === this.selectedTab)) {
+                this.selectedTab = tabs.some((t) => t.id === this.tab) ? this.tab : tabs[0].id
+            }
+            this.tab = this.selectedTab
+        }
+    },
     methods: {
         getWidgetClass (widget) {
             const classes = []
@@ -157,6 +173,12 @@ export default {
     padding: var(--page-padding);
 }
 
+.nrdb-layout--tabs-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--layout-columns), 1fr);
+    gap: var(--group-gap);
+}
+
 .v-card {
     width: 100%;
 }
diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs
index 652144812..a179e934b 100644
--- a/ui/src/store/ui.mjs
+++ b/ui/src/store/ui.mjs
@@ -87,6 +87,34 @@ const getters = {
             })
         }
     },
+    tabsByPage: (state, getters) => (pageId) => {
+        if (state.groups) {
+            const groupsOnPage = getters.groupsByPage(pageId)
+                .filter((g) => {
+                    return ('visible' in g ? g.visible : true) && g.groupType !== 'dialog'
+                })
+                .sort((a, b) => {
+                    return a.order - b.order
+                })
+            const pageTabs = state.pages?.[pageId]?.tabs || []
+            const tabs = pageTabs
+                .map((t) => {
+                    return { id: t.id, name: t.name, groups: groupsOnPage.filter((g) => g.tab === t.id) }
+                })
+                .filter((t) => {
+                    return t.groups.length > 0
+                })
+            const untabbed = groupsOnPage
+                .filter((g) => {
+                    return !pageTabs.some((t) => t.id === g.tab)
+                })
+                .map((g) => {
+                    return { id: g.id, name: g.name, groups: [g] }
+                })
+            return [...tabs, ...untabbed]
+        }
+        return []
+    },
     widgetsByPage: (state) => (pageId) => {
         if (state.widgets) {
             const widgetsOnPage = Object.values(state.widgets)