diff --git a/forge/db/migrations/20260727-01-add-asyncloginsession.js b/forge/db/migrations/20260727-01-add-asyncloginsession.js
new file mode 100644
index 0000000000..93714c1cba
--- /dev/null
+++ b/forge/db/migrations/20260727-01-add-asyncloginsession.js
@@ -0,0 +1,36 @@
+const { DataTypes } = require('sequelize')
+
+module.exports = {
+    /**
+     * upgrade database
+     * @param {QueryInterface} context Sequelize.QueryInterface
+     */
+    up: async (context, Sequelize) => {
+        await context.createTable('AsyncLoginSessions', {
+            sessionToken: {
+                type: DataTypes.STRING,
+                primaryKey: true
+            },
+            doneToken: {
+                type: DataTypes.STRING
+            },
+            status: {
+                type: DataTypes.STRING,
+                defaultValue: 'pending'
+            },
+            result: {
+                type: DataTypes.TEXT
+            },
+            createdAt: {
+                type: DataTypes.DATE,
+                allowNull: false
+            },
+            updatedAt: {
+                type: DataTypes.DATE,
+                allowNull: false
+            }
+        })
+        await context.addIndex('AsyncLoginSessions', { name: 'async_login_sessions_done_token', fields: ['doneToken'] })
+    },
+    down: async (context, Sequelize) => { }
+}
diff --git a/forge/db/models/AsyncLoginSession.js b/forge/db/models/AsyncLoginSession.js
new file mode 100644
index 0000000000..8447ea6e2a
--- /dev/null
+++ b/forge/db/models/AsyncLoginSession.js
@@ -0,0 +1,71 @@
+const { DataTypes } = require('sequelize')
+
+const { generateToken } = require('../utils')
+
+async function validateSessionExpiry (session) {
+    if (session) {
+        const age = Date.now() - session.createdAt.getTime()
+        if (age > 1000 * 60 * 30) {
+            // session is older than 30 minutes, expire it
+            await session.destroy()
+            return null
+        }
+    }
+    return session
+}
+
+module.exports = {
+    name: 'AsyncLoginSession',
+    schema: {
+        sessionToken: {
+            type: DataTypes.STRING,
+            primaryKey: true
+        },
+        doneToken: {
+            type: DataTypes.STRING
+        },
+        status: {
+            type: DataTypes.STRING,
+            defaultValue: 'pending'
+        },
+        result: {
+            type: DataTypes.TEXT
+        }
+    },
+    indexes: [
+        { name: 'async_login_sessions_done_token', fields: ['doneToken'] }
+    ],
+    finders: function (M) {
+        return {
+            static: {
+                createToken: async () => {
+                    const sessionToken = generateToken(16)
+                    const doneToken = generateToken(32)
+                    const session = await this.create({
+                        sessionToken,
+                        doneToken
+                    })
+                    return session
+                },
+                bySessionToken: async (sessionToken) => {
+                    const session = await this.findOne({
+                        where: { sessionToken }
+                    })
+                    return validateSessionExpiry(session)
+                },
+                getAndExpireByDoneToken: async (doneToken) => {
+                    let session = await this.findOne({
+                        where: { doneToken }
+                    })
+                    session = await validateSessionExpiry(session)
+                    if (session && session.status !== 'pending') {
+                        // The session is resolved. We only allow retrieving it once,
+                        // so we destroy it after retrieval.
+                        await session.destroy()
+                    }
+                    return session
+                }
+            }
+        }
+    }
+}
diff --git a/forge/db/models/index.js b/forge/db/models/index.js
index acb7f596ce..93ae1e13ea 100644
--- a/forge/db/models/index.js
+++ b/forge/db/models/index.js
@@ -84,7 +84,8 @@ const modelTypes = [
     'TeamBrokerClient',
     'BrokerCredentials',
     'MQTTTopicSchema',
-    'TeamBrokerAgent'
+    'TeamBrokerAgent',
+    'AsyncLoginSession'
 ]
 
 // A local map of the known models.
diff --git a/forge/housekeeper/tasks/expireTokens.js b/forge/housekeeper/tasks/expireTokens.js
index 82a1ef14bd..5343a0ade2 100644
--- a/forge/housekeeper/tasks/expireTokens.js
+++ b/forge/housekeeper/tasks/expireTokens.js
@@ -13,5 +13,7 @@ module.exports = {
         await app.db.models.AccessToken.destroy({ where: { expiresAt: { [Op.lt]: Date.now() } } })
         // Remove any OAuthSession objects that were created more than 5 minutes ago
         await app.db.models.OAuthSession.destroy({ where: { createdAt: { [Op.lt]: Date.now() - 1000 * 60 * 5 } } })
+        // Remove any AsyncLoginSession objects that were created more than 30 minutes ago
+        await app.db.models.AsyncLoginSession.destroy({ where: { createdAt: { [Op.lt]: Date.now() - 1000 * 60 * 30 } } })
     }
 }
diff --git a/forge/routes/api/device.js b/forge/routes/api/device.js
index a5bfbed67a..b2fb95ade5 100644
--- a/forge/routes/api/device.js
+++ b/forge/routes/api/device.js
@@ -200,6 +200,17 @@ module.exports = async function (app) {
                     }
                 } else if (request.body?.team && request.session.User) {
                     // User action: check if the user is in the team and has the required role
+                    if (request.body.application) {
+                        // This request is to create the device and assign directly to an application
+                        // Validate application is in the team
+                        const application = await app.db.models.Application.byId(request.body.application)
+                        if (!application || application.Team.hashid !== request.body.team) {
+                            reply.code(400).send({ code: 'invalid_application', error: 'Invalid application' })
+                            return
+                        }
+                        // Attach to the request so Granular RBAC checks can be applied
+                        request.application = application
+                    }
                     request.teamMembership = await request.session.User.getTeamMembership(request.body.team)
                     const hasPermission = app.needsPermission('device:create')
                     await hasPermission(request, reply) // hasPermission sends the error response if required which stops the request
@@ -225,7 +236,8 @@ module.exports = async function (app) {
                         allOf: [
                             { required: ['setup'] }, // when provided, setup must be `true` (see enum below)
                             { not: { required: ['name'] } }, // neither of name or team are allowed when setting up a device
-                            { not: { required: ['team'] } }
+                            { not: { required: ['team'] } },
+                            { not: { required: ['application'] } }
                         ]
                     }
                 ],
@@ -233,8 +245,10 @@ module.exports = async function (app) {
                     name: { type: 'string' },
                     type: { type: 'string' },
                     team: { type: 'string' },
+                    application: { type: 'string' },
                     setup: { type: 'boolean', enum: [true] }, // enum only permits a value of true for setup
-                    agentHost: { type: 'string' } // future, for audit log
+                    agentHost: { type: 'string' }, // future, for audit log
+                    registrationSession: { type: 'string' } // optional, for async device registration flow
                 }
             },
             response: {
@@ -316,6 +330,16 @@ module.exports = async function (app) {
             }
             const teamMembership = await request.session.User.getTeamMembership(request.body.team, true)
             team = teamMembership.get('Team')
+            // If application was provided, the preHandler will have already populated request.application
+            application = request.application || null
+
+            if (request.body.registrationSession) {
+                request.body.asyncSession = await app.db.models.AsyncLoginSession.bySessionToken(request.body.registrationSession)
+                if (!request.body.asyncSession || request.body.asyncSession.status !== 'pending') {
+                    reply.code(400).send({ code: 'invalid_request', error: 'Invalid registration session' })
+                    return
+                }
+            }
         }
 
         const transaction = await app.db.sequelize.transaction()
@@ -353,7 +377,7 @@ module.exports = async function (app) {
                 await app.auditLog.Team.team.device.created(actionedBy, null, team, device)
 
                 // When device provisioning: if a project was specified, add the device to the project
-                if (provisioningMode && application) {
+                if (application) {
                     await assignDeviceToApplication(device, application)
                     await device.save()
                     await device.reload({
@@ -381,6 +405,14 @@ module.exports = async function (app) {
                 response.meta = {
                     ffVersion: app.config.version
                 }
+
+                if (request.body.asyncSession) {
+                    // This is an async registration session that started with a POST to /_/register.
+                    // We need to update the AsyncLoginSession with the result of this device creation
+                    request.body.asyncSession.status = 'success'
+                    request.body.asyncSession.result = JSON.stringify({ id: device.hashid, otc: credentials.otc })
+                    await request.body.asyncSession.save()
+                }
                 reply.send(response)
             } finally {
                 if (app.license.active() && app.billing) {
@@ -389,10 +421,107 @@ module.exports = async function (app) {
             }
         } catch (err) {
             await transaction.rollback()
+            if (request.body.asyncSession) {
+                try {
+                    // This is an async registration session that started with a POST to /_/register.
+                    // We need to update the AsyncLoginSession with the result of this device creation
+                    request.body.asyncSession.status = 'error'
+                    request.body.asyncSession.result = JSON.stringify({ error: 'Failed to register device' })
+                    await request.body.asyncSession.save()
+                } catch (err) { }
+            }
             reply.code(400).send({ code: 'unexpected_error', error: err.toString() })
         }
     })
 
+    app.post('/_/register', {
+        config: {
+            allowAnonymous: true,
+            // Rate limit to 5 requests per 30 seconds per IP address. Given
+            // this is a manual registration flow, we don't support high volume requests
+            // from single sources.
+            rateLimit: app.config.rate_limits ? { max: 5, timeWindow: 30000 } : false
+        },
+        schema: {
+            summary: 'Start an asynchronous registration for a device',
+            response: {
+                200: {
+                    type: 'object',
+                    properties: {
+                        registerUrl: { type: 'string' },
+                        doneUrl: { type: 'string' }
+                    }
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    }, async (request, reply) => {
+        // Create a new AsyncLoginSession with a unique sessionToken and doneToken
+        const session = await app.db.models.AsyncLoginSession.createToken()
+        const registerUrl = `/register/remote-instance/${session.sessionToken}`
+        const doneUrl = `/api/v1/devices/_/register/done/${session.doneToken}`
+        reply.send({ registerUrl, doneUrl })
+    })
+    app.get('/_/register/status/:sessionToken', {
+        schema: {
+            summary: 'Get the status of an asynchronous registration session',
+            response: {
+                202: {
+                    type: 'object',
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    }, async (request, reply) => {
+        // Check if the session exists and is still pending
+        const session = await app.db.models.AsyncLoginSession.bySessionToken(request.params.sessionToken)
+        if (!session || session.status !== 'pending') {
+            reply.code(404).send({ code: 'not_found', error: 'Not found' })
+            return
+        }
+        reply.code(202).send({})
+    })
+    app.get('/_/register/done/:doneToken', {
+        config: { allowAnonymous: true },
+        schema: {
+            summary: 'Get the completion result of an asynchronous registration for a device',
+            response: {
+                200: {
+                    type: 'object',
+                    properties: {
+                        otc: { type: 'string' }
+                    }
+                },
+                202: {
+                    type: 'object'
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    }, async (request, reply) => {
+        const session = await app.db.models.AsyncLoginSession.getAndExpireByDoneToken(request.params.doneToken)
+        if (!session) {
+            reply.code(404).send({ code: 'not_found', error: 'Not found' })
+            return
+        }
+        if (session.status === 'pending') {
+            reply.header('retry-after', '5').code(202).send({})
+        } else if (session.status === 'success') {
+            const result = JSON.parse(session.result)
+            reply.code(200).send(result)
+        } else if (session.status === 'error') {
+            reply.code(400).send({ code: 'unexpected_error', error: session.result })
+        } else {
+            reply.code(400).send({ code: 'unexpected_error', error: 'Unexpected error' })
+        }
+    })
+
     /**
      * Delete a device
      * @name /api/v1/devices
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fa8c3c2b7a..0f793be915 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,6 +37,11 @@
                     <router-view />
                 </ff-layout-immersive>
             </template>
+            <template v-else-if="pageLayout === 'plain'">
+                <ff-layout-plain>
+                    <router-view />
+                </ff-layout-plain>
+            </template>
             <EducationModal />
         </template>
         <!-- Password Reset Required -->
@@ -73,7 +78,9 @@ import EducationModal from './components/dialogs/EducationModal.vue'
 import FFLayoutBox from './layouts/Box.vue'
 import FFLayoutDocs from './layouts/Docs.vue'
 import FFLayoutImmersiveEditor from './layouts/ImmersiveEditor.vue'
+import FFLayoutPlain from './layouts/Plain.vue'
 import FFLayoutPlatform from './layouts/Platform.vue'
+
 import Login from './pages/Login.vue'
 import PasswordExpired from './pages/PasswordExpired.vue'
 import TermsAndConditions from './pages/TermsAndConditions.vue'
@@ -103,7 +110,8 @@ export default {
         'ff-layout-platform': FFLayoutPlatform,
         'ff-layout-box': FFLayoutBox,
         'ff-layout-docs': FFLayoutDocs,
-        'ff-layout-immersive': FFLayoutImmersiveEditor
+        'ff-layout-immersive': FFLayoutImmersiveEditor,
+        'ff-layout-plain': FFLayoutPlain
     },
     computed: {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
@@ -143,7 +151,7 @@ export default {
         },
         pageLayout () {
             const layout = this.$route.meta?.layout
-            return ['platform', 'modal', 'docs', 'immersive'].includes(layout) ? layout : 'platform'
+            return ['platform', 'modal', 'docs', 'immersive', 'plain'].includes(layout) ? layout : 'platform'
         }
     },
     watch: {
diff --git a/frontend/src/api/devices.js b/frontend/src/api/devices.js
index ae540423ab..9edde22e34 100644
--- a/frontend/src/api/devices.js
+++ b/frontend/src/api/devices.js
@@ -270,7 +270,9 @@ const updateHTTPToken = async (deviceId, tokenId, scope, expiresAt) => {
 const deleteHTTPToken = async (deviceId, tokenId) => {
     return client.delete(`/api/v1/devices/${deviceId}/httpTokens/${tokenId}`)
 }
-
+const checkRegistrationSession = async (sessionToken) => {
+    return client.get(`/api/v1/devices/_/register/status/${sessionToken}`).then(res => res.data)
+}
 export default {
     create,
     getDevice,
@@ -300,5 +302,6 @@ export default {
     getHTTPTokens,
     createHTTPToken,
     updateHTTPToken,
-    deleteHTTPToken
+    deleteHTTPToken,
+    checkRegistrationSession
 }
diff --git a/frontend/src/components/Loading.vue b/frontend/src/components/Loading.vue
index 8b7e1d178f..b0da2c4ab5 100644
--- a/frontend/src/components/Loading.vue
+++ b/frontend/src/components/Loading.vue
@@ -4,7 +4,7 @@
         :class="{'theme-light': resolvedColor == 'black', 'theme-dark': resolvedColor == 'white'}"
         data-el="loading"
     >
-        <div class="text-center w-64">
+        <div :class="['text-center', scaleClass]">
             <lottie-animation v-if="resolvedColor == 'white'" :animationData="require('../images/lottie/ff-loading-white.json')" :loop="true" />
             <lottie-animation v-else :animationData="require('../images/lottie/ff-loading-black.json')" :loop="true" />
             <h4>{{ message || 'Loading...' }}</h4>
@@ -26,12 +26,24 @@ export default {
         message: {
             default: null,
             type: String
+        },
+        scale: {
+            default: 'regular',
+            type: String
         }
     },
     computed: {
         ...mapState(useThemeStore, ['effective']),
         resolvedColor () {
             return this.color || (this.effective === 'dark' ? 'white' : 'black')
+        },
+        scaleClass () {
+            if (this.scale === 'small') {
+                return 'w-32'
+            } else if (this.scale === 'tiny') {
+                return 'w-16'
+            }
+            return 'w-64'
         }
     }
 }
diff --git a/frontend/src/components/banners/FeatureUnavailableToTeam.vue b/frontend/src/components/banners/FeatureUnavailableToTeam.vue
index fbbc0df25c..d83626950a 100644
--- a/frontend/src/components/banners/FeatureUnavailableToTeam.vue
+++ b/frontend/src/components/banners/FeatureUnavailableToTeam.vue
@@ -9,13 +9,13 @@
             <div>
                 <span v-if="fullMessage">
                     {{ fullMessage }}
-                    Please <router-link class="ff-link" href="#" :to="navigateToUpgrade">upgrade</router-link>
+                    Please <router-link class="ff-link" href="#" :to="upgradePath">upgrade</router-link>
                     your Team to continue.
                 </span>
                 <span v-else>
                     {{ featureName }} is not available for your current Team.
                     Please
-                    <router-link class="ff-link" href="#" :to="navigateToUpgrade">upgrade</router-link> your Team in order to use it.
+                    <router-link class="ff-link" href="#" :to="upgradePath">upgrade</router-link> your Team in order to use it.
                 </span>
             </div>
         </slot>
@@ -55,11 +55,6 @@ export default {
         upgradePath () {
             return { name: 'TeamChangeType', params: { team_slug: this.team.slug } }
         }
-    },
-    methods: {
-        navigateToUpgrade () {
-            this.$router.push(this.upgradePath)
-        }
     }
 }
 </script>
diff --git a/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue b/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
new file mode 100644
index 0000000000..949822c8f3
--- /dev/null
+++ b/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
@@ -0,0 +1,253 @@
+<template>
+    <MultiStepForm
+        ref="multiStepForm"
+        :steps="formSteps"
+        :starting-step="startingStep"
+        :disable-next-step="shouldDisableNextStep"
+        :loading-overlay="formLoading"
+        :loading-overlay-text="loadingText"
+        :showFooter="false"
+        :last-step-label="lastStepLabel"
+        @previous-step-state-changed="$emit('previous-step-state-changed', $event)"
+        @next-step-state-changed="$emit('next-step-state-changed', $event)"
+        @next-step-label-changed="$emit('next-step-label-changed', $event)"
+        @submit="onSubmit"
+        @step-updated="updateForm"
+    />
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import applicationApi from '../../../api/application.js'
+import deviceApi from '../../../api/devices.js'
+import Alerts from '../../../services/alerts.js'
+import MultiStepForm from '../MultiStepForm.vue'
+
+import ApplicationStep from '../instance/steps/ApplicationStep.vue'
+
+import DeviceStep from './steps/DeviceStep.vue'
+import TeamStep from './steps/TeamStep.vue'
+
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
+const TEAM_STEP_SLUG = 'team'
+const APPLICATION_SLUG = 'application'
+const DEVICE_SLUG = 'device'
+
+export default {
+    name: 'MultiStepDeviceForm',
+    components: { MultiStepForm },
+    props: {
+        applications: {
+            type: Array,
+            required: true
+        },
+        lastStepLabel: {
+            required: false,
+            type: String,
+            default: 'Create Instance'
+        },
+        hasTeamStep: {
+            required: false,
+            type: Boolean,
+            default: false
+        },
+        registrationSession: {
+            // When used in the async device registration flow, this is the session ID that
+            // needs passing to the backend when creating the device
+            required: false,
+            type: String,
+            default: null
+        }
+    },
+    emits: ['form-success', 'previous-step-state-changed', 'next-step-state-changed', 'next-step-label-changed'],
+    data () {
+        const startingStep = 0
+
+        return {
+            form: {
+                [TEAM_STEP_SLUG]: {},
+                [APPLICATION_SLUG]: {},
+                [DEVICE_SLUG]: {}
+            },
+            formLoading: false,
+            loadingText: '',
+            errors: {},
+            startingStep,
+            currentStepKey: startingStep,
+            blueprints: [],
+            newApplications: []
+        }
+    },
+    computed: {
+        ...mapState(useContextStore, ['team', 'isFreeTeamType']),
+        ...mapState(useAccountStore, ['teams']),
+        formSteps () {
+            return [
+                {
+                    sliderTitle: 'Team',
+                    component: TeamStep,
+                    hidden: this.hasTeamStep ? this.teams.length === 1 : true,
+                    bindings: {
+                        slug: TEAM_STEP_SLUG,
+                        state: this.form[TEAM_STEP_SLUG]
+                    }
+                },
+                {
+                    sliderTitle: 'Application',
+                    component: ApplicationStep,
+                    bindings: {
+                        slug: APPLICATION_SLUG,
+                        applications: this.localApplications,
+                        state: this.form[APPLICATION_SLUG]
+                    }
+                },
+                {
+                    sliderTitle: 'Instance',
+                    component: DeviceStep,
+                    bindings: {
+                        slug: DEVICE_SLUG,
+                        state: this.form[DEVICE_SLUG].input,
+                        initialErrors: this.form[DEVICE_SLUG].errors
+                    }
+                }
+            ].filter(step => !step.hidden)
+        },
+        shouldDisableNextStep () {
+            const currentStep = this.formSteps[this.currentStepKey]
+            const currentSlug = currentStep.bindings.slug
+            return this.form[currentSlug].hasErrors
+        },
+        hasToCreateAnApplication () {
+            return this.localApplications.length === 0
+        },
+        localApplications () {
+            return [...this.applications, ...this.newApplications]
+        }
+    },
+    methods: {
+        updateForm (payload, stepKey) {
+            this.currentStepKey = stepKey
+            this.form = { ...this.form, ...payload }
+        },
+        async onSubmit () {
+            this.loadingText = 'Creating a new Instance'
+            this.formLoading = true
+            let createdApplication
+
+            return new Promise((resolve) => {
+                if (this.hasToCreateAnApplication) {
+                    return applicationApi.createApplication({
+                        ...this.form[APPLICATION_SLUG].input,
+                        teamId: this.team.id
+                    })
+                        .then(application => {
+                            // pre-select the applications and also adding it to the new applications list immediately after creation
+                            // so that if the instance creation fails in the next step, a subsequent submit won't create a new duplicate
+                            // application but use the newly created one
+                            this.form[APPLICATION_SLUG].selection = application
+                            // delete this.form[APPLICATION_SLUG].input
+                            this.newApplications.push({
+                                ...application,
+                                label: application.name,
+                                counters: {
+                                    instances: 0,
+                                    devices: 0
+                                }
+                            })
+                            createdApplication = application
+
+                            if (!this.instanceFollowUp || this.isFreeTeamType) {
+                                this.$emit('form-success', {
+                                    application
+                                })
+                            }
+                            return application
+                        })
+                        .then(resolve)
+                }
+                createdApplication = this.form[APPLICATION_SLUG].selection
+                return resolve(createdApplication)
+            })
+                .catch((err) => {
+                    // catching application related api errors
+                    if (err.response) {
+                        const error = err.response.data.error
+
+                        if (error) {
+                            Alerts.emit('Failed to create the application: ' + error, 'warning', 7500)
+                        } else {
+                            Alerts.emit('Failed to create the application')
+                            console.error(err)
+                        }
+                    }
+                })
+                .then((application) => {
+                    const payload = {
+                        team: this.team.id,
+                        application: application.id,
+                        name: this.form[DEVICE_SLUG].input.name,
+                        type: this.form[DEVICE_SLUG].input.type
+                    }
+                    if (this.registrationSession) {
+                        payload.registrationSession = this.registrationSession
+                    }
+                    return deviceApi.create(payload)
+                })
+                .catch(err => {
+                    // catching device related api errors
+                    if (
+                        Object.prototype.hasOwnProperty.call(err, 'response') &&
+                        Object.prototype.hasOwnProperty.call(err.response, 'data')
+                    ) {
+                        if (err.response.data.code === 'invalid_project_name') {
+                            this.form[DEVICE_SLUG].errors.name = err.response.data.error
+                        }
+                        const error = err.response.data.error
+                        Alerts.emit('Failed to create the device: ' + error, 'warning', 7500)
+                    }
+
+                    const idx = this.formSteps.findIndex(step => step.sliderTitle === 'Instance')
+                    if (idx >= 0) { // step back to the device step
+                        this.$refs.multiStepForm.selectStep(idx)
+                    }
+                })
+                .then((device) => {
+                    if (device) {
+                        this.$emit('form-success', { application: createdApplication, device })
+                    }
+                })
+                .catch(err => {
+                    if (err.response) {
+                        const error = err.response.data.error
+
+                        if (error) {
+                            Alerts.emit('Failed to create: ' + error, 'warning', 7500)
+                        } else {
+                            Alerts.emit('Failed to create')
+                            console.error(err)
+                        }
+                    } else {
+                        console.error(err)
+                    }
+                })
+                .finally(() => {
+                    this.loadingText = ''
+                    this.formLoading = false
+                })
+        },
+        goToNextStep () {
+            this.$refs.multiStepForm.nextStep()
+        },
+        goToPreviousStep () {
+            this.$refs.multiStepForm.previousStep()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/components/multi-step-forms/device/steps/DeviceStep.vue b/frontend/src/components/multi-step-forms/device/steps/DeviceStep.vue
new file mode 100644
index 0000000000..be031fa670
--- /dev/null
+++ b/frontend/src/components/multi-step-forms/device/steps/DeviceStep.vue
@@ -0,0 +1,255 @@
+<template>
+    <section class="ff-instance-step text-center flex flex-col gap-4 pt-6" data-step="instance">
+        <h2>Setup your Remote Instance</h2>
+        <form class="max-w-2xl m-auto w-full text-left flex flex-col gap-7">
+            <FeatureUnavailableToTeam v-if="teamDeviceLimitReached" fullMessage="You have reached the limit for Remote Instances in this team." />
+            <FeatureUnavailableToTeam v-else-if="teamRuntimeLimitReached" fullMessage="You have reached the limit for Instances in this team." />
+
+            <div class="ff-instance-name ff-input-wrapper flex flex-col gap-1">
+                <label class="mb-1">Name</label>
+                <p class="opacity-50 text-sm">
+                    Provide a unique, identifiable name for your Remote Instance.
+                </p>
+                <div class="ff-input-wrapper flex gap-3 items-center relative mb-4">
+                    <ff-text-input
+                        v-model="input.name"
+                        label="instance-name"
+                        :error="errors.name"
+                        data-el="instance-name"
+                    />
+                </div>
+            </div>
+            <div class="ff-instance-name ff-input-wrapper flex flex-col gap-1">
+                <label class="mb-1">Type</label>
+                <p class="opacity-50 text-sm">
+                    <i>Optional: </i> What type of device is this instance running on?
+                </p>
+                <div class="ff-input-wrapper flex gap-3 items-center relative mb-4">
+                    <ff-text-input
+                        v-model="input.type"
+                        label="instance-type"
+                        :error="errors.type"
+                        data-el="instance-type"
+                    />
+                </div>
+            </div>
+            <!-- Billing details -->
+            <div v-if="deviceIsBillable" class="my-5 text-left">
+                <InstanceChargesTable
+                    :project-type="deviceBillingInformation"
+                    :subscription="subscription"
+                    :trialMode="false"
+                    :prorationMode="team?.type?.properties?.billing?.proration"
+                />
+            </div>
+        </form>
+    </section>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import billingApi from '../../../../api/billing.js'
+import { getTeamProperty } from '../../../../composables/TeamProperties.js'
+import InstanceChargesTable from '../../../../pages/instance/components/InstanceChargesTable.vue'
+import FfTextInput from '../../../../ui-components/components/form/TextInput.vue'
+
+import FeatureUnavailableToTeam from '../../../banners/FeatureUnavailableToTeam.vue'
+
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
+import { useContextStore } from '@/stores/context.js'
+
+export default {
+    name: 'DeviceStep',
+    components: {
+        InstanceChargesTable,
+        FeatureUnavailableToTeam,
+        FfTextInput
+    },
+    props: {
+        slug: {
+            required: true,
+            type: String
+        },
+        state: {
+            required: false,
+            type: Object,
+            default: () => ({})
+        },
+        initialErrors: {
+            required: false,
+            type: Object,
+            default: () => ({})
+        }
+    },
+    emits: ['step-updated'],
+    setup (props) {
+        return {
+            initialState: props.state,
+        }
+    },
+    data () {
+        return {
+            input: {
+                name: this.initialState.name || '',
+                type: this.initialState.type || ''
+            },
+            errors: {
+                name: this.initialErrors.name ?? null,
+                type: this.initialErrors.type ?? null,
+                limitsRuntime: this.initialErrors.limitsRuntime ?? null,
+                limitsDevice: this.initialErrors.limitsDevice ?? null
+            },
+            subscription: null,
+            loading: true,
+        }
+    },
+    computed: {
+        ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useContextStore, ['team']),
+        teamRuntimeLimitReached () {
+            let teamTypeRuntimeLimit = getTeamProperty(this.team, 'runtimes.limit')
+            const currentRuntimeCount = this.team.deviceCount + this.team.instanceCount
+            if (this.team.billing?.trial && !this.team.billing?.active && getTeamProperty(this.team, 'trial.runtimesLimit')) {
+                teamTypeRuntimeLimit = getTeamProperty(this.team, 'trial.runtimesLimit')
+            }
+            return (teamTypeRuntimeLimit > 0 && currentRuntimeCount >= teamTypeRuntimeLimit)
+        },
+        teamDeviceLimitReached () {
+            const teamTypeDeviceLimit = getTeamProperty(this.team, 'devices.limit')
+            if (teamTypeDeviceLimit > 0 && this.team.deviceCount >= teamTypeDeviceLimit) {
+                // Device specific limit has been reached
+                return true
+            }
+            return false
+        },
+        deviceIsBillable () {
+            let freeAllocation = getTeamProperty(this.team, 'devices.free') || 0
+            let deviceCount = this.team.deviceCount
+            if (getTeamProperty(this.team, 'devices.combinedFreeType')) {
+                deviceCount += this.team.instanceCountByType?.[getTeamProperty(this.team, 'devices.combinedFreeType')] || 0
+                freeAllocation = getTeamProperty(this.team, `instances.${getTeamProperty(this.team, 'devices.combinedFreeType')}.free`) || 0
+            }
+            return this.features.billing && // billing enabled
+                !this.team.billing?.unmanaged &&
+                getTeamProperty(this.team, 'devices.description') && // >0 per device cost
+                freeAllocation <= deviceCount // no remaining free allocation
+        },
+        deviceBillingInformation () {
+            if (this.deviceIsBillable) {
+                let descriptionKey = 'devices.description'
+                if (this.team.billing?.interval === 'year') {
+                    descriptionKey = 'devices.yrDescription'
+                }
+                if (getTeamProperty(this.team, descriptionKey)) {
+                    const [price, priceInterval] = getTeamProperty(this.team, descriptionKey).split('/')
+                    const currency = price.replace(/[\d.]+/, '')
+                    const cost = (Number(price.replace(/[^\d.]+/, '')) || 0) * 100
+                    return {
+                        name: 'Remote Instance',
+                        currency,
+                        cost,
+                        priceInterval
+                    }
+                }
+            }
+            return null
+        },
+    },
+    watch: {
+        input: {
+            immediate: true,
+            deep: true,
+            handler () {
+                this.updateParent()
+            }
+        },
+        'input.name': {
+            immediate: true,
+            handler: function (value) {
+                if (this.input.name.trim().length === 0) {
+                    this.errors.name = 'Name is required.'
+                } else {
+                    this.errors.name = null
+                }
+            }
+        },
+        errors: {
+            deep: true,
+            handler: function () {
+                this.updateParent()
+            }
+        },
+        teamRuntimeLimitReached: {
+            immediate: true,
+            handler: function (value) {
+                if (value) {
+                    this.errors.limitsRuntime = 'You have reached the limit for Remote Instances in this team.'
+                } else {
+                    this.errors.limitsRuntime = null
+                }
+            }
+        },
+        teamDeviceLimitReached: {
+            immediate: true,
+            handler: function (value) {
+                if (value) {
+                    this.errors.limitsDevice = 'You have reached the limit for Remote Instances in this team.'
+                } else {
+                    this.errors.limitsDevice = null
+                }
+            }
+        }
+    },
+    async mounted () {
+        this.updateParent()
+        this.getSubscription()
+            .catch(e => e)
+            .finally(() => {
+                this.loading = false
+            })
+    },
+    methods: {
+        async getSubscription () {
+            if (this.features.billing && !this.team.billing?.unmanaged && !getTeamProperty(this.team, 'billing.disabled')) {
+                try {
+                    this.subscription = await billingApi.getSubscriptionInfo(this.team.id)
+                } catch (err) {
+                    if (err.response?.data?.code === 'not_found') {
+                        // This team has no subscription.
+                        if (!this.team.billing?.trial || this.team.billing?.trialEnded) {
+                            throw err
+                        }
+                    }
+                }
+            }
+        },
+
+        updateParent () {
+            let hasErrors = false
+
+            Object.keys(this.errors).forEach(key => {
+                if (this.errors[key] !== null) {
+                    hasErrors = true
+                }
+            })
+
+            // Handle the inital state of the form - where name is blank, but we don't show an error
+            // as the user hasn't done anything yet
+            if (this.input.name.trim().length === 0) {
+                hasErrors = true
+            }
+            this.$emit('step-updated', {
+                [this.slug]: {
+                    input: { ...(this.input ?? {}) },
+                    hasErrors,
+                    errors: this.errors
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/frontend/src/components/multi-step-forms/device/steps/SuccessStep.vue b/frontend/src/components/multi-step-forms/device/steps/SuccessStep.vue
new file mode 100644
index 0000000000..5bd6d57a8a
--- /dev/null
+++ b/frontend/src/components/multi-step-forms/device/steps/SuccessStep.vue
@@ -0,0 +1,133 @@
+<template>
+    <section class="ff-instance-step text-center flex flex-col gap-4 pt-6 max-w-md m-auto h-full">
+        <h1>Registration Complete</h1>
+        <template v-if="!deviceConnected">
+            <p>
+                Return to the Device Agent to complete the setup.
+            </p>
+            <p>
+                Keep this window open to view your Remote Instance once it has connected.
+            </p>
+            <p class="flex flex-col gap-2">
+                <ff-loading scale="small" message=" " />
+            </p>
+            <p>
+                If prompted, enter the following One-Time Code (OTC) in the Device Agent to complete the registration
+            </p>
+            <!-- make this text larger and bold-->
+            <p class="font-bold border border-gray-300 rounded-full p-1 bg-gray-100">
+                <TextCopier :text="device.credentials.otc" />
+            </p>
+        </template>
+        <template v-else>
+            <p>
+                Remote Instance Connected
+            </p>
+            <p>
+                Starting Node-RED...
+            </p>
+            <p class="flex flex-col gap-2">
+                <ff-loading scale="small" message=" " />
+            </p>
+        </template>
+    </section>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import deviceApi from '@/api/devices.js'
+
+import FfLoading from '@/components/Loading.vue'
+import TextCopier from '@/components/TextCopier.vue'
+import { useContextStore } from '@/stores/context.js'
+import { createPollTimer } from '@/utils/timers.js'
+
+// This isn't really a MultiStepForm step, but it is a step in the flow, so we are using the same pattern for consistency
+export default {
+    name: 'SuccessStep',
+    components: {
+        TextCopier,
+        FfLoading
+    },
+    props: {
+        device: {
+            required: true,
+            type: Object
+        }
+    },
+    data () {
+        return {
+            pollTimer: null,
+            polledDevice: null
+        }
+    },
+    computed: {
+        ...mapState(useContextStore, ['team']),
+        deviceConnected () {
+            return this.polledDevice?.lastSeenMs > 0
+        },
+        deviceNRRunning () {
+            return this.deviceConnected && this.polledDevice?.status === 'running'
+        }
+    },
+    mounted () {
+        this.startPolling()
+    },
+    unmounted () {
+        this.stopPolling()
+    },
+    beforeUnmount () {
+        this.stopPolling()
+    },
+    methods: {
+        async pollStatus () {
+            try {
+                const device = await deviceApi.getDevice(this.device.id)
+                if (device.lastSeenMs > 0) {
+                    // Only update the device now so we don't wipe the OTC as that isn't returned by the API after the first call
+                    this.polledDevice = device
+                }
+                if (device.status === 'running') {
+                    // Stop polling once NR is running
+                    this.stopPolling()
+                    await deviceApi.setMode(this.device.id, 'developer')
+                    await deviceApi.enableEditorTunnel(this.device.id)
+                    this.$router.push({
+                        name: 'device-editor',
+                        params: { id: this.device.id }
+                    })
+                }
+            } catch (err) {
+                console.error('Error polling device status', err)
+            }
+        },
+        startPolling () {
+            this.pollTimer = createPollTimer(this.pollStatus, 5000)
+        },
+        stopPolling () {
+            if (this.pollTimer) {
+                this.pollTimer.stop()
+                this.pollTimer = null
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+h1 {
+        font-size: 1.5rem;
+        line-height: 1.75rem;
+        margin: auto;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        font-weight: 500;
+        max-width: 450px;
+}
+img {
+    text-align: center;
+    margin: 2em auto;
+    max-width: 180px;
+}
+</style>
diff --git a/frontend/src/components/multi-step-forms/device/steps/TeamStep.vue b/frontend/src/components/multi-step-forms/device/steps/TeamStep.vue
new file mode 100644
index 0000000000..93c6b0a4da
--- /dev/null
+++ b/frontend/src/components/multi-step-forms/device/steps/TeamStep.vue
@@ -0,0 +1,97 @@
+<template>
+    <section class="ff-select-team-step text-center flex flex-col gap-4 pt-6" data-step="team">
+        <h2>Choose a Team</h2>
+
+        <p>Select the team you want to register your new instance in:</p>
+
+        <ul class="max-w-2xl w-full m-auto text-left flex flex-col gap-4">
+            <li
+                v-for="(teamOption, $key) in teams"
+                :key="$key"
+                class="team-tile flex flex-col gap-2"
+                :class="{selected: teamOption.id === team?.id}"
+                data-el="team-item"
+                @click="selectTeam(teamOption)"
+            >
+                <div class="header flex justify-between gap-2 items-center">
+                    <h5 class="title truncate">
+                        {{ teamOption.name }}
+                    </h5>
+                </div>
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
+export default {
+    name: 'TeamStep',
+    props: {
+        slug: {
+            required: true,
+            type: String
+        }
+    },
+    emits: ['next-step', 'step-updated'],
+    computed: {
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams'])
+    },
+    mounted () {
+        this.$emit('step-updated', {
+            [this.slug]: {
+                hasErrors: false,
+                errors: {}
+            }
+        })
+    },
+    methods: {
+        selectTeam (team) {
+            return useAccountStore().setTeam(team.slug)
+                .then(() => this.$emit('next-step'))
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.ff-select-team-step {
+    .team-tile {
+        padding: 12px;
+        border: 2px solid var(--ff-color-border-strong);
+        width: 100%;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: ease-in-out .3s;
+
+        &:hover {
+            border-color: var(--ff-color-accent);
+        }
+
+        &.selected {
+            border-color: var(--ff-color-accent);
+        }
+
+        .header {
+            .title {
+
+            }
+
+            .counters {
+                color: var(--ff-color-text-subtle);
+                font-size: $ff-funit-xs;
+            }
+        }
+
+        .description {
+            color: var(--ff-color-text-subtle);
+            font-size: $ff-funit-sm;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/multi-step-forms/instance/steps/ApplicationStep.vue b/frontend/src/components/multi-step-forms/instance/steps/ApplicationStep.vue
index bcc261a1f2..0ffb53eacc 100644
--- a/frontend/src/components/multi-step-forms/instance/steps/ApplicationStep.vue
+++ b/frontend/src/components/multi-step-forms/instance/steps/ApplicationStep.vue
@@ -12,7 +12,7 @@
                 >
                     <template #icon><MagnifyingGlassIcon /></template>
                     <template #icon-right>
-                        <x-icon
+                        <XMarkIcon
                             v-if="searchTerm.length"
                             class="ff-icon ff-icon-sm absolute right-0 top-o z-10 text-gray-600 mr-1 transition-all duration-300 ease-in-out cursor-pointer"
                             @click="searchTerm = ''"
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 import usePermissions from '../../../../composables/Permissions.js'
 
@@ -119,7 +119,7 @@ import IconNodeRedSolid from '../../../icons/NodeRedSolid.js'
 
 export default {
     name: 'ApplicationStep',
-    components: { FormRow, IconDeviceSolid, IconNodeRedSolid, MagnifyingGlassIcon },
+    components: { FormRow, IconDeviceSolid, IconNodeRedSolid, MagnifyingGlassIcon, XMarkIcon },
     props: {
         slug: {
             required: true,
diff --git a/frontend/src/layouts/Plain.vue b/frontend/src/layouts/Plain.vue
new file mode 100644
index 0000000000..2441acec40
--- /dev/null
+++ b/frontend/src/layouts/Plain.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="ff-layout--plain">
+        <div class="ff-header">
+            <router-link :to="homeLink" class="ff-logo-wrapper">
+                <!-- Mobile: Icon-only logo -->
+                <img class="ff-logo lg:hidden" src="/ff-minimal-red.svg" alt="FlowFuse">
+                <!-- Desktop: Full wordmark logo -->
+                <img class="ff-logo hidden lg:block" src="/ff-logo--wordmark--light.svg" alt="FlowFuse">
+            </router-link>
+        </div>
+        <div class="ff-layout--plain--wrapper">
+            <!-- <LeftDrawer /> -->
+            <div class="ff-view">
+                <div id="platform-banner" />
+                <slot />
+            </div>
+            <transition name="page-fade">
+                <div v-if="overlay" class="ff-dialog-container z-100!" />
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import navigationMixin from '../mixins/Navigation.js'
+
+import { useUxStore } from '@/stores/ux.js'
+
+export default {
+    name: 'ff-layout-plain',
+    mixins: [navigationMixin],
+    computed: {
+        ...mapState(useUxStore, ['overlay'])
+    }
+}
+</script>
diff --git a/frontend/src/layouts/Platform.vue b/frontend/src/layouts/Platform.vue
index 5641ad31ba..bbb76c0f05 100644
--- a/frontend/src/layouts/Platform.vue
+++ b/frontend/src/layouts/Platform.vue
@@ -34,7 +34,6 @@ import PlatformDialog from '../components/dialogs/PlatformDialog.vue'
 import LeftDrawer from '../components/drawers/LeftDrawer.vue'
 import RightDrawer from '../components/drawers/RightDrawer.vue'
 
-import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxStore } from '@/stores/ux.js'
 
@@ -50,27 +49,7 @@ export default {
     },
     computed: {
         ...mapState(useUxStore, ['overlay']),
-        ...mapState(useProductBrokersStore, ['interview']),
-        ...mapState(useAccountSettingsStore, ['hasAvailableTeams'])
-    },
-    watch: {
-        $route: function () {
-            this.checkRouteMeta()
-        }
-    },
-    mounted () {
-        this.checkRouteMeta()
-    },
-    methods: {
-        checkRouteMeta () {
-            for (let l = 0; l < this.$route.matched.length; l++) {
-                const level = this.$route.matched[l]
-                if (level.meta.hideSideMenu) {
-                    this.hideTeamOptions = true
-                    break
-                }
-            }
-        }
+        ...mapState(useProductBrokersStore, ['interview'])
     }
 }
 </script>
diff --git a/frontend/src/pages/team/registerDevice.vue b/frontend/src/pages/team/registerDevice.vue
new file mode 100644
index 0000000000..a7e761554d
--- /dev/null
+++ b/frontend/src/pages/team/registerDevice.vue
@@ -0,0 +1,146 @@
+<template>
+    <ff-page>
+        <template #header>
+            <ff-page-header title="Register a new Remote Instance">
+                <template #context>
+                    Let's get your new Node-RED remote instance setup in no time.
+                </template>
+                <template #tools>
+                    <section v-if="!loading &&!device && !invalidSession" class="flex gap-3">
+                        <ff-button
+                            class="flex-1"
+                            kind="secondary"
+                            :disabled="!form.previousButtonState"
+                            data-el="previous-step"
+                            @click="$refs.multiStepForm.goToPreviousStep()"
+                        >
+                            Back
+                        </ff-button>
+                        <ff-button
+                            class="flex-1 whitespace-nowrap"
+                            :disabled="form.nextButtonState"
+                            data-el="next-step"
+                            @click="$refs.multiStepForm.goToNextStep()"
+                        >
+                            {{ form.nextStepLabel }}
+                        </ff-button>
+                    </section>
+                </template>
+            </ff-page-header>
+        </template>
+        <ff-loading v-if="loading" />
+        <template v-else-if="invalidSession">
+            <section class="flex flex-col gap-4 text-center">
+                <h1 class="text-2xl font-semibold">Invalid registration session</h1>
+                <p class="opacity-50">
+                    The registration session you are trying to use is invalid or has expired. Please restart the registration process.
+                </p>
+                <p class="m-auto text-center mt-8">
+                    <ff-button kind="secondary" @click="$router.push('/')">Back to Dashboard</ff-button>
+                </p>
+            </section>
+        </template>
+        <MultiStepDeviceForm
+            v-else-if="!device"
+            ref="multiStepForm"
+            :applications="applications"
+            :has-team-step="true"
+            :registrationSession="registrationSession"
+            @form-success="onInstanceCreated"
+            @previous-step-state-changed="form.previousButtonState = $event"
+            @next-step-state-changed="form.nextButtonState = $event"
+            @next-step-label-changed="form.nextStepLabel = $event"
+        />
+        <SuccessStep v-else :device="device" />
+    </ff-page>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import devicesApi from '../../api/devices.js'
+import teamApi from '../../api/team.js'
+import MultiStepDeviceForm from '../../components/multi-step-forms/device/MultiStepDeviceForm.vue'
+
+import SuccessStep from '../../components/multi-step-forms/device/steps/SuccessStep.vue'
+
+import { useContextStore } from '@/stores/context.js'
+
+export default {
+    name: 'RegisterDevice',
+    components: {
+        MultiStepDeviceForm,
+        SuccessStep
+    },
+    inheritAttrs: false,
+    data () {
+        return {
+            applications: [],
+            loading: true,
+            mounted: false,
+            device: null,
+            invalidSession: false,
+            form: {
+                nextButtonState: false,
+                previousButtonState: false,
+                nextStepLabel: 'Next'
+            }
+        }
+    },
+    computed: {
+        ...mapState(useContextStore, ['team']),
+        registrationSession () {
+            // The path is /register/remote-instance/:sessionToken
+            // We need to access :sessionToken from the route params and pass it to the MultiStepDeviceForm component
+            return this.$route.params.sessionToken || null
+        }
+    },
+    watch: {
+        async team () {
+            await this.getData()
+        }
+    },
+    async created () {
+        await this.checkSession()
+        this.loading = false
+        if (this.team) {
+            await this.getData()
+        }
+    },
+    async mounted () {
+        this.mounted = true
+    },
+    methods: {
+        async checkSession () {
+            if (this.registrationSession) {
+                try {
+                    await devicesApi.checkRegistrationSession(this.registrationSession)
+                    return
+                } catch (error) {
+                    // Fall through to set invalidSession to true
+                }
+            }
+            this.invalidSession = true
+        },
+
+        async getData () {
+            const data = await teamApi.getTeamApplications(this.team.id)
+            this.applications = data.applications.map((a) => {
+                return {
+                    label: a.name,
+                    description: a.description,
+                    value: a.id,
+                    id: a.id,
+                    counters: {
+                        instances: a.instances.length,
+                        devices: a.devices.length
+                    }
+                }
+            })
+        },
+        onInstanceCreated (payload) {
+            this.device = payload.device
+        }
+    }
+}
+</script>
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 266f15b45a..14d8b8cdd2 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -30,8 +30,8 @@ import ChangeTeamType from './changeType.vue'
 import CreateTeam from './create.vue'
 import CreateApplication from './createApplication.vue'
 import CreateInstance from './createInstance.vue'
-
 import Team from './index.vue'
+import RegisterDevice from './registerDevice.vue'
 
 import DashboardViewer from '@/components/dashboard/DashboardViewer.vue'
 
@@ -246,6 +246,15 @@ export default [
             }
         ]
     },
+    {
+        path: '/register/remote-instance/:sessionToken',
+        component: RegisterDevice,
+        name: 'RegisterDevice',
+        meta: {
+            title: 'Register Remote Instance',
+            layout: 'plain'
+        }
+    },
     {
         name: 'team-dashboards-view',
         path: '/team/:team_slug/dashboards/:instanceId',
diff --git a/frontend/src/stylesheets/layouts.scss b/frontend/src/stylesheets/layouts.scss
index ce962e376d..0dacabd243 100644
--- a/frontend/src/stylesheets/layouts.scss
+++ b/frontend/src/stylesheets/layouts.scss
@@ -216,7 +216,8 @@ $nav_height: 60px;
     flex-direction: column;
 }
 
-.ff-layout--platform--wrapper{
+.ff-layout--platform--wrapper,
+.ff-layout--plain--wrapper {
     padding-top: $nav_height;
     position: absolute;
     width: 100%;
@@ -244,17 +245,6 @@ $nav_height: 60px;
     }
 }
 
-.ff-layout--plain--wrapper {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    main {
-        background-color: var(--ff-color-bg-surface);
-        flex: 1;
-    }
-}
 
 .ff-notifications {
     position: absolute;
@@ -876,9 +866,14 @@ $nav_height: 60px;
                 left: 0;
             }
         }
-
+        .ff-layout--plain--wrapper {
+            .ff-view {
+                margin-left:  0;
+            }
+        }
         .ff-view {
             margin-left:  -$sidenav_width;
         }
     }
+
 }
diff --git a/frontend/src/types/generated.ts b/frontend/src/types/generated.ts
index 75cef58891..b69f03e60b 100644
--- a/frontend/src/types/generated.ts
+++ b/frontend/src/types/generated.ts
@@ -5599,10 +5599,12 @@ export interface paths {
                         name?: string;
                         type?: string;
                         team?: string;
+                        application?: string;
                         /** @enum {boolean} */
                         setup?: true;
                         agentHost?: string;
-                    } & ((unknown & unknown & unknown) | (unknown & unknown & unknown));
+                        registrationSession?: string;
+                    } & ((unknown & unknown & unknown) | (unknown & unknown & unknown & unknown));
                 };
             };
             responses: {
diff --git a/test/unit/forge/routes/api/device_spec.js b/test/unit/forge/routes/api/device_spec.js
index 7bded4b02e..534b8f625f 100644
--- a/test/unit/forge/routes/api/device_spec.js
+++ b/test/unit/forge/routes/api/device_spec.js
@@ -471,6 +471,158 @@ describe('Device API', async function () {
         })
     })
 
+    describe('Async device registration', async function () {
+        it('session token status check requires user session', async function () {
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/devices/_/register/status/invalid_session_token'
+            })
+            // 401 as this is unauthorized rather than non-existent
+            response.statusCode.should.equal(401)
+        })
+        it('rejects if the session token is invalid', async function () {
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/devices/_/register/status/invalid_session_token',
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            // 404 as this is non-existent rather than unauthorized
+            response.statusCode.should.equal(404)
+        })
+        it('rejects if the done token is invalid', async function () {
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/devices/_/register/done/invalid_done_token',
+            })
+            response.statusCode.should.equal(404)
+        })
+        it('starts a device registration session', async function () {
+            const response = await app.inject({
+                method: 'POST',
+                url: '/api/v1/devices/_/register'
+                // No cookie as this is an anonymous request to start the registration process
+            })
+            response.statusCode.should.equal(200)
+            const result = response.json()
+            result.should.have.property('registerUrl').and.be.a.String()
+            result.should.have.property('doneUrl').and.be.a.String()
+
+            const sessionToken = result.registerUrl.split('/').pop()
+            // Verify status cannot be checked without a valid user session
+            let statusResponse = await app.inject({
+                method: 'GET',
+                url: `/api/v1/devices/_/register/status/${sessionToken}`
+            })
+            // 401 as this is unauthorized rather than non-existent
+            statusResponse.statusCode.should.equal(401)
+
+            // Verify status can be checked with a valid user session
+            statusResponse = await app.inject({
+                method: 'GET',
+                url: `/api/v1/devices/_/register/status/${sessionToken}`,
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            statusResponse.statusCode.should.equal(202)
+
+            // Verify done URL can be checked without a valid user session
+            let doneResponse = await app.inject({
+                method: 'GET',
+                url: result.doneUrl
+            })
+            doneResponse.statusCode.should.equal(202)
+
+            // The user will now do the UI walkthrough to complete the registration process.
+            // This will result in a post to the create endpoint, including the sessionToken
+            // which we recreate here:
+
+            const createResponse = await app.inject({
+                method: 'POST',
+                url: '/api/v1/devices',
+                body: {
+                    name: 'my device',
+                    type: 'test device',
+                    team: TestObjects.ATeam.hashid,
+                    application: TestObjects.Application1.hashid,
+                    registrationSession: sessionToken
+                },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            createResponse.statusCode.should.equal(200)
+            const createResult = createResponse.json()
+            createResult.should.have.property('id')
+            createResult.should.have.property('name', 'my device')
+            createResult.should.have.property('type', 'test device')
+            createResult.should.have.property('team').and.be.an.Object()
+            createResult.should.have.property('application').and.be.an.Object()
+            createResult.should.have.property('credentials').and.be.an.Object()
+            createResult.team.should.have.property('id', TestObjects.ATeam.hashid)
+            createResult.application.should.have.property('id', TestObjects.Application1.hashid)
+            createResult.credentials.should.have.property('otc')
+            const deviceOTC = createResult.credentials.otc
+
+            // Verify sessionToken now returns a 404 on the status endpoint
+            statusResponse = await app.inject({
+                method: 'GET',
+                url: `/api/v1/devices/_/register/status/${sessionToken}`,
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            statusResponse.statusCode.should.equal(404)
+
+            // At this point, the session still exists and will do until `doneURL` is polled.
+            // Verify we can't reuse the sessionToken to create another device within this window
+            const createResponse2 = await app.inject({
+                method: 'POST',
+                url: '/api/v1/devices',
+                body: {
+                    name: 'my device 2',
+                    type: 'test device',
+                    team: TestObjects.ATeam.hashid,
+                    application: TestObjects.Application1.hashid,
+                    registrationSession: sessionToken
+                },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            createResponse2.statusCode.should.equal(400)
+            const result2 = createResponse2.json()
+            result2.should.have.property('error', 'Invalid registration session')
+            result2.should.have.property('code', 'invalid_request')
+
+            // Verify the doneUrl now returns a 200 and includes the device credentials
+            doneResponse = await app.inject({
+                method: 'GET',
+                url: result.doneUrl
+            })
+            doneResponse.statusCode.should.equal(200)
+            const doneResult = doneResponse.json()
+            doneResult.should.have.property('otc', deviceOTC)
+
+            // Verify the doneURL now returns a 404 on subsequent requests
+            doneResponse = await app.inject({
+                method: 'GET',
+                url: result.doneUrl
+            })
+            doneResponse.statusCode.should.equal(404)
+        })
+        it('rejects attempting to create device with an invalid registration session token', async function () {
+            const createResponse = await app.inject({
+                method: 'POST',
+                url: '/api/v1/devices',
+                body: {
+                    name: 'my device',
+                    type: 'test device',
+                    team: TestObjects.ATeam.hashid,
+                    application: TestObjects.Application1.hashid,
+                    registrationSession: 'invalid_session_token'
+                },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            createResponse.statusCode.should.equal(400)
+            const result = createResponse.json()
+            result.should.have.property('error', 'Invalid registration session')
+            result.should.have.property('code', 'invalid_request')
+        })
+    })
+
     describe('Generate Device credentials', function () {
         it('regenerates a devices credentials', async function () {
             const response = await app.inject({