diff --git a/.github/scripts/initial-setup.sh b/.github/scripts/initial-setup.sh
index 1be4dfb624..b421a524e8 100755
--- a/.github/scripts/initial-setup.sh
+++ b/.github/scripts/initial-setup.sh
@@ -207,7 +207,7 @@ curl -ks -w "\n" -XPOST \
                        "contextLimit": null,
                        "customHostnames":false,
                        "staticAssets":false,
-                       "teamBroker":true
+                       "teamBroker":false
                   },
                   "instances": {
                       "'"$projectTypeId"'": {
diff --git a/ci/ci-values.yaml b/ci/ci-values.yaml
index 5139168996..af7ab08b27 100644
--- a/ci/ci-values.yaml
+++ b/ci/ci-values.yaml
@@ -4,6 +4,8 @@ forge:
   localPostgresql: true
   broker:
     enabled: true
+    teamBroker:
+      uiOnly: true
   cloudProvider: aws
   email:
     ses:
diff --git a/docs/cloud/images/create-broker-client.png b/docs/cloud/images/create-broker-client.png
index 651de591a9..3796bb33b0 100644
Binary files a/docs/cloud/images/create-broker-client.png and b/docs/cloud/images/create-broker-client.png differ
diff --git a/docs/cloud/images/node-red-mqtt-connection.png b/docs/cloud/images/node-red-mqtt-connection.png
new file mode 100644
index 0000000000..ac14a64395
Binary files /dev/null and b/docs/cloud/images/node-red-mqtt-connection.png differ
diff --git a/docs/cloud/images/node-red-mqtt-security.png b/docs/cloud/images/node-red-mqtt-security.png
new file mode 100644
index 0000000000..1bf448d515
Binary files /dev/null and b/docs/cloud/images/node-red-mqtt-security.png differ
diff --git a/docs/cloud/introduction.md b/docs/cloud/introduction.md
index a1d408500b..97e4b76a3b 100644
--- a/docs/cloud/introduction.md
+++ b/docs/cloud/introduction.md
@@ -188,9 +188,9 @@ platform.
 
 #### Enterprise Team Broker
 
-Enterprise level teams come with their own MQTT broker. You can provision clients from the broker tab in the left hand menu.
+Both Team and Enterprise level teams come with their own MQTT broker. You can provision clients from the broker tab in the left hand menu.
 
-Teams can register up to 20 clients as part of their plan. The ability to purchase additional packs of clients will come in a future release.
+Enterprise level Teams can register up to 20 and Teams level Teams can register up to 5 clients as part of their plan. The ability to purchase additional packs of clients will come in a near future release.
 
 The broker is available on `broker.flowfuse.cloud` and supports the following connection types:
 
@@ -198,7 +198,7 @@ The broker is available on `broker.flowfuse.cloud` and supports the following co
  - MQTT over TLS on port `8883`
  - MQTT over secure WebSockets on port `443`
 
- When creating clients you can specify a username, but it will prepended to the the Team's id e.g. `alice` will become `alice@abcd1234`.
+ When creating clients you can specify a username, but it will prepended to the the Team's id e.g. `alice` will become `alice@32E4NEO5pY`.
  Clients must also use the username as the MQTT Client ID in order to connect.
 
  ![Create Broker Client](./images/create-broker-client.png)
@@ -206,9 +206,15 @@ The broker is available on `broker.flowfuse.cloud` and supports the following co
  e.g.
 
  ```
- mosquitto_sub -u "alice@abcd1234" -i "alice@abcd1234" -P "password" -h broker.flowfuse.cloud -t "#"
+ mosquitto_sub -u "alice@32E4NEO5pY" -i "alice@32E4NEO5pY" -P "password" -h broker.flowfuse.cloud -t "#"
  ```
 
+ Or in Node-RED as follows
+
+![Node-RED MQTT Client Connection](./images/node-red-mqtt-connection.png)
+
+![Node-RED MQTT Client Security](./images/node-red-mqtt-security.png)
+
 ### IP Addresses
 
 Outbound connections from FlowFuse will always come from the IP address `63.33.85.112`. 
diff --git a/docs/install/docker/README.md b/docs/install/docker/README.md
index 129b58fe75..216d0411b4 100644
--- a/docs/install/docker/README.md
+++ b/docs/install/docker/README.md
@@ -57,8 +57,6 @@ meta:
 This guide walks you through detailed set up of FlowFuse Platform on a Docker container envoronment using Docker Compose. Typically suited for small/medium on premise deployments.
 By the end, you will have a fully functioning FlowFuse instance running in a Docker container.
 
-For a FlowFuse platform evaluation purposes, check out our [Quick Start Guide](../../quick-start/README.md).
-
 The following guide walks through a full production-ready deployment. If you want to install FlowFuse for evaluation purposes, please refer to the [Quick Start Guide](../../quick-start/README.md).
 
 ## Checklist
diff --git a/forge/comms/v2AuthRoutes.js b/forge/comms/v2AuthRoutes.js
index 398d3d814c..4f3b9b0eae 100644
--- a/forge/comms/v2AuthRoutes.js
+++ b/forge/comms/v2AuthRoutes.js
@@ -104,7 +104,7 @@ module.exports = async function (app) {
         const topic = request.body.topic
         const action = request.body.action
         if ((username.startsWith('device:') ||
-            username.startsWith('platform:') ||
+            username.startsWith('project:') ||
             username.startsWith('frontend:') ||
             username === 'forge_platform') && !username.includes('@')) {
             const acc = action === 'subscribe' ? 1 : 2
diff --git a/frontend/src/components/Accordion.vue b/frontend/src/components/Accordion.vue
index eef260cba6..c90b028b7c 100644
--- a/frontend/src/components/Accordion.vue
+++ b/frontend/src/components/Accordion.vue
@@ -6,7 +6,7 @@
             </slot>
             <div class="toggle">
                 <slot name="meta" />
-                <ChevronLeftIcon v-if="!disabled" class="ff-icon" />
+                <ChevronLeftIcon v-if="!disabled" class="ff-icon chevron" />
             </div>
         </button>
         <div ref="content" class="ff-accordion--content">
diff --git a/frontend/src/components/TextCopier.vue b/frontend/src/components/TextCopier.vue
index b793d0e57a..d5f7e5f5f4 100644
--- a/frontend/src/components/TextCopier.vue
+++ b/frontend/src/components/TextCopier.vue
@@ -13,6 +13,8 @@
 <script>
 import { DuplicateIcon } from '@heroicons/vue/outline'
 
+import Alert from '../services/alerts.js'
+
 export default {
     name: 'TextCopier',
     components: { DuplicateIcon },
@@ -20,18 +22,32 @@ export default {
         text: {
             required: true,
             type: String
+        },
+        confirmationType: {
+            type: String,
+            required: false,
+            default: 'prompt',
+            validator: (value) => {
+                return ['prompt', 'alert'].includes(value)
+            }
         }
     },
+    emits: ['copied'],
     methods: {
         copyPath () {
             navigator.clipboard.writeText(this.text)
 
-            // show "Copied" notification
-            this.$refs.copied.style.display = 'inline'
-            // hide after 500ms
-            setTimeout(() => {
-                this.$refs.copied.style.display = 'none'
-            }, 500)
+            if (this.confirmationType === 'alert') {
+                Alert.emit('Copied to Clipboard', 'confirmation')
+            } else {
+                // show "Copied" notification
+                this.$refs.copied.style.display = 'inline'
+                // hide after 500ms
+                setTimeout(() => {
+                    this.$refs.copied.style.display = 'none'
+                }, 500)
+                this.$emit('copied')
+            }
         }
     }
 }
diff --git a/frontend/src/composables/String.js b/frontend/src/composables/String.js
index c0a3edf7fb..c0befda75d 100644
--- a/frontend/src/composables/String.js
+++ b/frontend/src/composables/String.js
@@ -31,3 +31,14 @@ export const removeSlashes = (str, leading = true, trailing = true) => {
     }
     return str
 }
+
+/**
+ *
+ * @param length
+ * @returns {string}
+ */
+export const generateUuid = (length = 6) => {
+    return Array.from(crypto.getRandomValues(new Uint8Array(6)), (byte) =>
+        byte.toString(36).padStart(2, '0')
+    ).join('').substring(0, length)
+}
diff --git a/frontend/src/images/empty-states/mqtt-empty.png b/frontend/src/images/empty-states/mqtt-empty.png
new file mode 100644
index 0000000000..f2cd6c22d3
Binary files /dev/null and b/frontend/src/images/empty-states/mqtt-empty.png differ
diff --git a/frontend/src/images/empty-states/mqtt.png b/frontend/src/images/empty-states/mqtt-forbidden.png
similarity index 100%
rename from frontend/src/images/empty-states/mqtt.png
rename to frontend/src/images/empty-states/mqtt-forbidden.png
diff --git a/frontend/src/pages/team/Broker/components/BrokerAclRule.vue b/frontend/src/pages/team/Broker/components/BrokerAclRule.vue
new file mode 100644
index 0000000000..af06cb0ba6
--- /dev/null
+++ b/frontend/src/pages/team/Broker/components/BrokerAclRule.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="acl-rule grid grid-cols-6 gap-4">
+        <div class="action col-start-2 flex gap-2.5">
+            <span :class="pubClass" data-el="pub">
+                <CheckIcon v-if="canPublish" class="ff-icon-sm" />
+                <XIcon v-else class="ff-icon-sm" />
+                pub
+            </span>
+            <span :class="subClass" data-el="sub">
+                <CheckIcon v-if="canSubscribe" class="ff-icon-sm" />
+                <XIcon v-else class="ff-icon-sm" />
+                sub
+            </span>
+        </div>
+        <div class="pattern">
+            {{ acl.pattern }}
+        </div>
+    </div>
+</template>
+
+<script>
+import { CheckIcon, XIcon } from '@heroicons/vue/outline'
+
+export default {
+    name: 'BrokerAclRule',
+    components: {
+        CheckIcon,
+        XIcon
+    },
+    props: {
+        acl: {
+            required: true,
+            type: Object
+        }
+    },
+    computed: {
+        canPublish () {
+            return ['publish', 'both'].includes(this.acl.action)
+        },
+        canOnlyPublish () {
+            return ['publish'].includes(this.acl.action)
+        },
+        canSubscribe () {
+            return ['subscribe', 'both'].includes(this.acl.action)
+        },
+        canOnlySubscribe () {
+            return ['subscribe'].includes(this.acl.action)
+        },
+        pubClass () {
+            return {
+                'text-green-500': this.canPublish,
+                'text-red-500': this.canOnlySubscribe
+            }
+        },
+        subClass () {
+            return {
+                'text-green-500': this.canSubscribe,
+                'text-red-500': this.canOnlyPublish
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/team/Broker/components/BrokerClient.vue b/frontend/src/pages/team/Broker/components/BrokerClient.vue
new file mode 100644
index 0000000000..c41b264c33
--- /dev/null
+++ b/frontend/src/pages/team/Broker/components/BrokerClient.vue
@@ -0,0 +1,177 @@
+<template>
+    <ff-accordion class="max-w-full w-full broker-client">
+        <template #label>
+            <div class="username text-left flex">
+                <text-copier :text="client.username + '@' + team.id" confirmation-type="alert" @click.prevent.stop>
+                    <span :title="client.username + '@' + team.id" class="title-wrapper">
+                        <span class="mt-1 font-bold">{{ client.username }}</span>
+                        <span class="italic mt-1">@{{ team.id }}</span>
+                    </span>
+                </text-copier>
+            </div>
+            <div class="rules text-left">
+                <span>{{ client.acls.length }} Rule{{ client.acls.length > 1 ? 's' : '' }}</span>
+            </div>
+        </template>
+        <template #meta>
+            <span
+                class="edit hover:cursor-pointer"
+                data-action="edit-client"
+                @click.prevent.stop="$emit('edit-client', client)"
+            >
+                <PencilIcon
+                    v-if="hasAMinimumTeamRoleOf(Roles.Owner)"
+                    class="ff-icon-sm"
+                />
+            </span>
+            <span
+                class="delete hover:cursor-pointer "
+                data-action="delete-client"
+                @click.prevent.stop="$emit('delete-client',client)"
+            >
+                <TrashIcon
+                    v-if="hasAMinimumTeamRoleOf(Roles.Owner)"
+                    class="ff-icon-sm text-red-500"
+                />
+            </span>
+        </template>
+        <template #content>
+            <ul class="acl-list">
+                <li v-for="(acl, $key) in client.acls" :key="$key" class="acl-wrapper" data-el="acl">
+                    <BrokerAclRule :acl="acl" />
+                </li>
+            </ul>
+        </template>
+    </ff-accordion>
+</template>
+
+<script>
+import { PencilIcon, TrashIcon } from '@heroicons/vue/outline'
+
+import FfAccordion from '../../../../components/Accordion.vue'
+import TextCopier from '../../../../components/TextCopier.vue'
+import permissionsMixin from '../../../../mixins/Permissions.js'
+import { Roles } from '../../../../utils/roles.js'
+
+import BrokerAclRule from './BrokerAclRule.vue'
+
+export default {
+    name: 'BrokerClient',
+    components: {
+        BrokerAclRule,
+        TextCopier,
+        PencilIcon,
+        FfAccordion,
+        TrashIcon
+    },
+    mixins: [permissionsMixin],
+    props: {
+        client: {
+            required: true,
+            type: Object
+        }
+    },
+    emits: ['edit-client', 'delete-client'],
+    computed: {
+        Roles () {
+            return Roles
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.ff-accordion.broker-client {
+    margin-bottom: 0;
+
+    button {
+        border: none;
+        background: none;
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 15px;
+        padding: 0;
+
+        .username {
+            padding: 15px 10px;
+            grid-column: span 2;
+            overflow: hidden;
+
+            .ff-text-copier {
+                @include truncate;
+                & > span {
+                    @include truncate;
+                }
+                .title-wrapper {
+                    @include truncate;
+                }
+
+            }
+
+            .ff-icon {
+                margin-left: 0;
+                min-width: 20px;
+            }
+        }
+
+        .rules {
+            padding: 15px 10px;
+
+        }
+
+        .toggle {
+            grid-column: span 3;
+            text-align: right;
+            padding-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+            .edit, .delete {
+                padding: 24px 15px;
+                display: inline-block;
+                position: relative;
+                align-self: stretch;
+
+                .ff-icon-sm {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    transition: ease-in-out .3s;
+                }
+
+                &:hover {
+                    .ff-icon-sm {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+            }
+
+            .edit:hover {
+                color: $ff-grey-700;
+            }
+            .delete:hover {
+                color: $ff-red-700;
+            }
+        }
+    }
+
+    .ff-accordion--content {
+        background: $ff-grey-100;
+        .acl-list {
+            .acl-wrapper {
+                border-bottom: 1px solid $ff-grey-200;
+                padding: 15px 10px;
+                gap: 10px;
+                font-size: 80%;
+
+                &:last-of-type {
+                    border: none;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/team/Broker/dialogs/AclItem.vue b/frontend/src/pages/team/Broker/dialogs/AclItem.vue
index bbdcc1d89c..cf5c038352 100644
--- a/frontend/src/pages/team/Broker/dialogs/AclItem.vue
+++ b/frontend/src/pages/team/Broker/dialogs/AclItem.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="acl flex gap-2.5 mb-3 items-start">
+    <div class="acl flex gap-2.5 mb-3 items-start" data-el="acl-item">
         <div>
-            <ff-listbox v-model="model.action" :options="actions" @update:model-value="update" />
+            <ff-listbox :key="orderKey" v-model="model.action" :options="actions" @update:model-value="update" />
             <div v-if="validationError.action" data-el="form-row-error" class="ml-4 text-red-400 text-xs">{{ validationError.action }}</div>
         </div>
         <div class="w-full">
@@ -10,14 +10,20 @@
                 class="flex-1"
                 type="input"
                 containerClass="max-w-full"
+                data-input="pattern"
                 :error="validationError.pattern"
                 @update:model-value="update"
             />
         </div>
-        <MinusIcon
-            v-if="canBeRemoved" class="ff-icon hover:cursor-pointer self-center p-1"
-            @click="$emit('remove-acl', orderKey)"
-        />
+        <ff-button
+            kind="tertiary"
+            size="small"
+            class="self-top p-1 mt-1.5"
+            :disabled="!canBeRemoved"
+            @click="removeAcl"
+        >
+            <MinusIcon class="ff-icon" />
+        </ff-button>
     </div>
 </template>
 
@@ -42,12 +48,17 @@ export default {
         orderKey: {
             required: true,
             type: Number
+        },
+        acls: {
+            required: true,
+            type: Array
         }
     },
     emits: ['update:modelValue', 'remove-acl'],
     data () {
         return {
             model: {
+                id: '',
                 action: '',
                 pattern: ''
             },
@@ -69,16 +80,22 @@ export default {
             return this.hasActionError || this.hasPatternError
         },
         canBeRemoved () {
-            return this.orderKey !== 0
+            return this.acls.length > 1
         }
     },
     mounted () {
+        this.model.id = this.modelValue.id
         this.model.action = this.modelValue.action
         this.model.pattern = this.modelValue.pattern
     },
     methods: {
         update () {
             this.$emit('update:modelValue', this.model)
+        },
+        removeAcl () {
+            if (this.canBeRemoved) {
+                this.$emit('remove-acl', this.model)
+            }
         }
     }
 }
diff --git a/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue b/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue
index efd3f71a26..7dd9cf473b 100644
--- a/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue
+++ b/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue
@@ -38,8 +38,10 @@
             <div class="acls">
                 <h3 class="flex justify-between">
                     <span>Access Control Rules</span>
-                    <span>
-                        <PlusIcon class="ff-icon hover:cursor-pointer" data-action="add-acl" @click="addAcl" />
+                    <span data-action="add-acl">
+                        <ff-button kind="tertiary" size="small" @click="addAcl">
+                            <PlusIcon class="ff-icon" />
+                        </ff-button>
                     </span>
                 </h3>
                 <div class="headers flex gap-2.5 items-center">
@@ -50,12 +52,13 @@
                         Pattern
                     </label>
                 </div>
-                <ul>
-                    <li v-for="(acl, $key) in input.acls" :key="$key">
+                <ul data-el="acl-list">
+                    <li v-for="(acl, $key) in input.acls" :key="acl.id">
                         <AclItem
                             v-model="input.acls[$key]"
                             :order-key="$key"
-                            :validation-error="errors.acls[$key]"
+                            :acls="input.acls"
+                            :validation-error="errors.acls[acl.id]"
                             @update:model-value="onAclUpdated($event, $key)"
                             @remove-acl="onRemoveAcl"
                         />
@@ -68,9 +71,11 @@
 
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
+import { mapState } from 'vuex'
 
 import brokerApi from '../../../../api/broker.js'
 import FormRow from '../../../../components/FormRow.vue'
+import { generateUuid } from '../../../../composables/String.js'
 
 import AclItem from './AclItem.vue'
 
@@ -82,10 +87,6 @@ export default {
         PlusIcon
     },
     props: {
-        team: {
-            type: Object,
-            required: true
-        },
         clients: {
             required: true,
             type: Array
@@ -96,10 +97,17 @@ export default {
         return {
             showCreate () {
                 this.isEditing = false
-                this.input.acls.push({
+                const initialAcl = {
                     action: 'both',
-                    pattern: '#'
-                })
+                    pattern: '#',
+                    id: generateUuid()
+                }
+                this.input.acls.push(initialAcl)
+                this.errors.acls[initialAcl.id] = {
+                    id: initialAcl.id,
+                    action: null,
+                    pattern: null
+                }
                 this.$refs.dialog.show()
             },
             showEdit (client) {
@@ -110,13 +118,15 @@ export default {
                     password: '',
                     passwordConfirm: ''
                 }
-                this.input.acls = [...client.acls]
-                client.acls.forEach((acl, key) => {
-                    this.errors.acls[key] = {
+                this.input.acls = [...client.acls.map(acl => ({ ...acl, id: generateUuid() }))]
+                this.input.acls.forEach((acl) => {
+                    this.errors.acls[acl.id] = {
+                        id: acl.id,
                         action: null,
                         pattern: null
                     }
                 })
+                this.originalState = JSON.stringify(this.input)
                 this.$refs.dialog.show()
             }
         }
@@ -134,22 +144,19 @@ export default {
             errors: {
                 username: null,
                 password: null,
-                acls: [
-                    {
-                        action: null,
-                        pattern: null
-                    }
-                ]
-            }
+                acls: {}
+            },
+            originalState: null
         }
     },
     computed: {
+        ...mapState('account', ['team']),
         disableConfirm () {
             if (!this.input.username) {
                 return true
             }
             if (this.isEditing) {
-                return false
+                return this.isDirty
             }
             return !this.input.password || !this.input.passwordConfirm
         },
@@ -165,6 +172,12 @@ export default {
             }
 
             return 'Confirm Client Password'
+        },
+        isDirty () {
+            if (!this.isEditing) {
+                return false
+            }
+            return this.originalState === JSON.stringify(this.input)
         }
     },
     methods: {
@@ -239,7 +252,7 @@ export default {
         },
         validatePattern (pattern) {
             const parts = pattern.split('/')
-            for (let i = 0; parts.length; i++) {
+            for (let i = 0; i < parts.length; i++) {
                 if (parts[i] === '+') {
                     continue
                 }
@@ -253,35 +266,38 @@ export default {
             return true
         },
         addAcl () {
+            const id = generateUuid()
             this.input.acls.push({
+                id,
                 action: '',
                 pattern: ''
             })
-            this.errors.acls.push({
+            this.errors.acls[id] = {
+                id,
                 action: null,
                 pattern: null
-            })
+            }
         },
-        onAclUpdated (acl, $key) {
+        onAclUpdated (acl) {
             if (!acl.action.length) {
-                this.errors.acls[$key].action = 'Please select an action.'
+                this.errors.acls[acl.id].action = 'Please select an action.'
             } else {
-                this.errors.acls[$key].action = null
+                this.errors.acls[acl.id].action = null
             }
 
             if (!acl.pattern.length) {
-                this.errors.acls[$key].pattern = 'The pattern cannot be empty.'
+                this.errors.acls[acl.id].pattern = 'The pattern cannot be empty.'
             } else {
                 if (!this.validatePattern(acl.pattern)) {
-                    this.errors.acls[$key].pattern = 'The pattern is not valid'
+                    this.errors.acls[acl.id].pattern = 'The pattern is not valid'
                 } else {
-                    this.errors.acls[$key].pattern = null
+                    this.errors.acls[acl.id].pattern = null
                 }
             }
         },
-        onRemoveAcl ($key) {
-            this.errors.acls = this.errors.acls.filter((item, key) => key !== $key || key === 0)
-            this.input.acls = this.input.acls.filter((item, key) => key !== $key || key === 0)
+        onRemoveAcl (acl) {
+            this.input.acls = this.input.acls.filter((item) => item.id !== acl.id)
+            delete this.errors.acls[acl.id]
         },
         clearData () {
             this.input = {
@@ -293,12 +309,7 @@ export default {
             this.errors = {
                 username: null,
                 password: null,
-                acls: [
-                    {
-                        action: null,
-                        pattern: null
-                    }
-                ]
+                acls: []
             }
         }
     }
diff --git a/frontend/src/pages/team/Broker/index.vue b/frontend/src/pages/team/Broker/index.vue
index 6554506c47..60a87fe0c3 100644
--- a/frontend/src/pages/team/Broker/index.vue
+++ b/frontend/src/pages/team/Broker/index.vue
@@ -22,7 +22,7 @@
             :featureUnavailableToTeam="!isMqttBrokerFeatureEnabledForTeam"
         >
             <template #img>
-                <img src="../../../images/empty-states/mqtt.png" alt="pipelines-logo">
+                <img src="../../../images/empty-states/mqtt-forbidden.png" alt="pipelines-logo">
             </template>
             <template #header>
                 <span>Broker Not Available</span>
@@ -67,72 +67,11 @@
                             </div>
                             <ul data-el="clients-list" class="clients-list">
                                 <li v-for="client in filteredClients" :key="client.id" class="client" data-el="client">
-                                    <ff-accordion class="max-w-full w-full">
-                                        <template #label>
-                                            <div class="username text-left flex">
-                                                <span class="mt-1 font-bold">{{ client.username }}</span><span class="italic mt-1">@{{ team.id }}</span>
-                                                <ff-button v-if="!!clipboardSupported" class="ml-2" kind="tertiary" size="small" @click.prevent.stop="copy(client)">
-                                                    <template #icon-right><ClipboardCopyIcon /></template>
-                                                </ff-button>
-                                            </div>
-                                            <div class="rules text-left">
-                                                <span>{{ client.acls.length }} Rule{{ client.acls.length > 1 ? 's' : '' }}</span>
-                                            </div>
-                                        </template>
-                                        <template #meta>
-                                            <span
-                                                class="edit hover:cursor-pointer"
-                                                data-action="edit-client"
-                                                @click.prevent.stop="editClient(client)"
-                                            >
-                                                <PencilIcon
-                                                    v-if="hasAMinimumTeamRoleOf(Roles.Owner)"
-                                                    class="ff-icon-sm"
-                                                />
-                                            </span>
-                                            <span
-                                                class="delete hover:cursor-pointer "
-                                                data-action="delete-client"
-                                                @click.prevent.stop="deleteClient(client)"
-                                            >
-                                                <TrashIcon
-                                                    v-if="hasAMinimumTeamRoleOf(Roles.Owner)"
-                                                    class="ff-icon-sm text-red-500"
-                                                />
-                                            </span>
-                                        </template>
-                                        <template #content>
-                                            <ul class="acl-list">
-                                                <li v-for="(acl, $key) in client.acls" :key="$key" class="acl grid grid-cols-6 gap-4" data-el="acl">
-                                                    <div class="action col-start-2 flex gap-2.5">
-                                                        <span
-                                                            :class="{
-                                                                'text-green-500': ['publish', 'both'].includes(acl.action),
-                                                                'text-red-500': ['subscribe'].includes(acl.action)
-                                                            } "
-                                                        >
-                                                            <CheckIcon v-if="['publish', 'both'].includes(acl.action)" class="ff-icon-sm" />
-                                                            <XIcon v-else class="ff-icon-sm" />
-                                                            pub
-                                                        </span>
-                                                        <span
-                                                            :class="{
-                                                                'text-green-500': ['subscribe', 'both'].includes(acl.action),
-                                                                'text-red-500': ['publish'].includes(acl.action)
-                                                            } "
-                                                        >
-                                                            <CheckIcon v-if="['subscribe', 'both'].includes(acl.action)" class="ff-icon-sm" />
-                                                            <XIcon v-else class="ff-icon-sm" />
-                                                            sub
-                                                        </span>
-                                                    </div>
-                                                    <div class="pattern">
-                                                        {{ acl.pattern }}
-                                                    </div>
-                                                </li>
-                                            </ul>
-                                        </template>
-                                    </ff-accordion>
+                                    <broker-client
+                                        :client="client"
+                                        @edit-client="onEditClient"
+                                        @delete-client="onDeleteClient"
+                                    />
                                 </li>
                                 <li v-if="!filteredClients.length" class="text-center p-5">
                                     No clients found by that name.
@@ -142,7 +81,7 @@
                     </section>
                     <EmptyState v-else>
                         <template #img>
-                            <img src="../../../images/empty-states/mqtt.png" alt="logo">
+                            <img src="../../../images/empty-states/mqtt-empty.png" alt="logo">
                         </template>
                         <template #header>Create your first Broker Client</template>
                         <template #message>
@@ -168,7 +107,6 @@
             <ClientDialog
                 ref="clientDialog"
                 :clients="clients"
-                :team="team"
                 @client-created="fetchData"
                 @client-updated="fetchData"
             />
@@ -177,11 +115,10 @@
 </template>
 
 <script>
-import { CheckIcon, ClipboardCopyIcon, PencilIcon, PlusSmIcon, SearchIcon, TrashIcon, XIcon } from '@heroicons/vue/outline'
+import { PlusSmIcon, SearchIcon } from '@heroicons/vue/outline'
 import { mapState } from 'vuex'
 
 import brokerApi from '../../../api/broker.js'
-import FfAccordion from '../../../components/Accordion.vue'
 import EmptyState from '../../../components/EmptyState.vue'
 import clipboardMixin from '../../../mixins/Clipboard.js'
 import featuresMixin from '../../../mixins/Features.js'
@@ -190,32 +127,25 @@ import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 import { Roles } from '../../../utils/roles.js'
 
+import BrokerClient from './components/BrokerClient.vue'
+
 import ClientDialog from './dialogs/ClientDialog.vue'
 
 export default {
     name: 'TeamBroker',
     components: {
-        FfAccordion,
+        BrokerClient,
         SearchIcon,
         PlusSmIcon,
-        PencilIcon,
-        TrashIcon,
-        CheckIcon,
-        XIcon,
         EmptyState,
-        ClientDialog,
-        ClipboardCopyIcon
+        ClientDialog
     },
     mixins: [permissionsMixin, featuresMixin, clipboardMixin],
     data () {
         return {
             loading: false,
             clients: [],
-            filterTerm: '',
-            columns: [
-                { label: 'Username', class: ['flex-grow'], key: 'username', sortable: true },
-                { label: 'ACLS', class: ['w-44'], key: 'acls', sortable: false }
-            ]
+            filterTerm: ''
         }
     },
     computed: {
@@ -259,10 +189,10 @@ export default {
         async createClient () {
             this.$refs.clientDialog.showCreate()
         },
-        async editClient (client) {
+        async onEditClient (client) {
             this.$refs.clientDialog.showEdit(client)
         },
-        async deleteClient (client) {
+        async onDeleteClient (client) {
             await Dialog.show({
                 header: 'Delete Client',
                 text: 'Are you sure you want to delete this Client?',
@@ -273,15 +203,6 @@ export default {
                 await this.fetchData()
                 Alerts.emit('Successfully deleted Client.', 'confirmation')
             })
-        },
-        copy (client) {
-            const username = `${client.username}@${this.team.id}`
-            this.copyToClipboard(username).then(() => {
-                Alerts.emit('Copied to Clipboard.', 'confirmation')
-            }).catch((err) => {
-                console.warn('Clipboard write permission denied: ', err)
-                Alerts.emit('Clipboard write permission denied.', 'warning')
-            })
         }
     }
 }
@@ -316,85 +237,6 @@ export default {
                 &:last-of-type {
                     border-bottom: none;
                 }
-
-               .ff-accordion {
-                   margin-bottom: 0;
-
-                   button {
-                       border: none;
-                       background: none;
-                       display: grid;
-                       grid-template-columns: repeat(6, 1fr);
-                       gap: 15px;
-                       padding: 0;
-
-                       .username {
-                           padding: 15px 10px;
-                           grid-column: span 2;
-                       }
-
-                       .rules {
-                           padding: 15px 10px;
-
-                       }
-
-                       .toggle {
-                           grid-column: span 3;
-                           text-align: right;
-                           padding-right: 10px;
-                           display: flex;
-                           align-items: center;
-                           justify-content: flex-end;
-
-                           .edit, .delete {
-                               padding: 24px 15px;
-                               display: inline-block;
-                               position: relative;
-                               align-self: stretch;
-
-                               .ff-icon-sm {
-                                   position: absolute;
-                                   top: 50%;
-                                   left: 50%;
-                                   transform: translate(-50%, -50%);
-                                   transition: ease-in-out .3s;
-                               }
-
-                               &:hover {
-                                   .ff-icon-sm {
-                                       width: 20px;
-                                       height: 20px;
-                                   }
-                               }
-                           }
-
-                           .edit:hover {
-                               //color: green;
-                               color: $ff-grey-700;
-                           }
-                           .delete:hover {
-                               //color: yellow;
-                               color: $ff-red-700;
-                           }
-                       }
-                   }
-
-                   .ff-accordion--content {
-                       background: $ff-grey-100;
-                       .acl-list {
-                           .acl {
-                               border-bottom: 1px solid $ff-grey-200;
-                               padding: 15px 10px;
-                               gap: 10px;
-                               font-size: 80%;
-
-                               &:last-of-type {
-                                   border: none;
-                               }
-                           }
-                       }
-                   }
-               }
             }
         }
     }
diff --git a/frontend/src/stylesheets/components/accordion.scss b/frontend/src/stylesheets/components/accordion.scss
index dac854c847..0ec11a8fde 100644
--- a/frontend/src/stylesheets/components/accordion.scss
+++ b/frontend/src/stylesheets/components/accordion.scss
@@ -40,8 +40,8 @@
         .ff-accordion--content {
             display: block;
         }
-        .ff-accordion--button .ff-icon {
+        .ff-accordion--button .ff-icon.chevron {
             transform: rotate(-90deg);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/ui-components/components/form/ListBox.vue b/frontend/src/ui-components/components/form/ListBox.vue
index 005a116224..6ac668a162 100644
--- a/frontend/src/ui-components/components/form/ListBox.vue
+++ b/frontend/src/ui-components/components/form/ListBox.vue
@@ -1,10 +1,11 @@
 <template>
-    <Listbox v-model="value" :disabled="disabled" class="ff-listbox">
+    <Listbox v-model="value" :disabled="disabled" class="ff-listbox" data-el="listbox">
         <div class="relative">
             <ListboxButton
                 class="w-full rounded-md bg-white flex justify-between ff-button"
                 :class="[disabled ? 'cursor-not-allowed bg-gray-200 text-gray-500' : '']"
             >
+                <input type="text" hidden="hidden" :value="selectedLabel">
                 <slot name="button">
                     <span class="block truncate">{{ selectedLabel }}</span>
                 </slot>
@@ -27,6 +28,7 @@
                             :value="option"
                             as="template"
                             class="ff-option"
+                            :data-option="labelKey === 'label' ? option.label : option[labelKey]"
                             :title="optionTitleKey ? option[optionTitleKey] : null"
                         >
                             <li>
@@ -147,8 +149,12 @@ export default {
   .ff-button {
     border: 1px solid $ff-grey-300;
     padding: 5px 5px 5px 10px;
-    &:focus-visible, &:focus {
-      outline: none;
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:focus {
+        border-color: $ff-blue-500;
     }
 
     .icon {
diff --git a/frontend/src/ui-components/stylesheets/ff-utility.scss b/frontend/src/ui-components/stylesheets/ff-utility.scss
index 8ac483dc54..238014c559 100644
--- a/frontend/src/ui-components/stylesheets/ff-utility.scss
+++ b/frontend/src/ui-components/stylesheets/ff-utility.scss
@@ -3,10 +3,10 @@
 */
 
 // screen sizes
-$ff-screen-sm: 640px; 
-$ff-screen-md: 768px; 
-$ff-screen-lg: 1024px; 
-$ff-screen-xl: 1280px; 
+$ff-screen-sm: 640px;
+$ff-screen-md: 768px;
+$ff-screen-lg: 1024px;
+$ff-screen-xl: 1280px;
 $ff-screen-2xl: 1536px;
 
 // unit
@@ -21,4 +21,10 @@ $ff-funit-xs: 0.75rem;
 $ff-funit-sm: 0.85rem;
 $ff-funit-md: 1rem;
 $ff-funit-lg: 1.5rem;
-$ff-funit-xl: 2rem;
\ No newline at end of file
+$ff-funit-xl: 2rem;
+
+@mixin truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/package-lock.json b/package-lock.json
index f2f9b71f0a..85faed8d94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16503,9 +16503,9 @@
             }
         },
         "node_modules/nodemon": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
-            "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz",
+            "integrity": "sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==",
             "dev": true,
             "dependencies": {
                 "chokidar": "^3.5.2",
@@ -23852,9 +23852,12 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
         "node_modules/yaml": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-            "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+            "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+            "bin": {
+                "yaml": "bin.mjs"
+            },
             "engines": {
                 "node": ">= 14"
             }
@@ -35783,9 +35786,9 @@
             "integrity": "sha512-7o38Yogx6krdoBf3jCAqnIN4oSQFx+fMa0I7dK1D+me9kBxx12D+/33wSb+fhOCtIxvYJ+4x4IMEhmhCKfAiOA=="
         },
         "nodemon": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
-            "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz",
+            "integrity": "sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==",
             "dev": true,
             "requires": {
                 "chokidar": "^3.5.2",
@@ -40998,9 +41001,9 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
         "yaml": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-            "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA=="
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+            "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ=="
         },
         "yargs": {
             "version": "16.2.0",
diff --git a/test/e2e/frontend/cypress/tests-ee/broker.spec.js b/test/e2e/frontend/cypress/tests-ee/broker.spec.js
index 16c4b33576..2ec8a53567 100644
--- a/test/e2e/frontend/cypress/tests-ee/broker.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/broker.spec.js
@@ -8,15 +8,15 @@ describe('FlowForge - Broker', () => {
         it('users have access to the broker entry in the main menu', () => {
             cy.get('[data-nav="team-broker"]').should('exist')
             cy.get('[data-nav="team-broker"]').should('not.be.disabled')
-            // cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('exist')
+            cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('exist')
         })
 
-        // it('should display the upgrade banner when accessing the broker with the not available logo', () => {
-        //     cy.get('[data-nav="team-broker"]').click()
-        //     cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
-        //     cy.contains('Broker Not Available')
-        //     cy.contains('The MQTT Broker page offers a streamlined interface for managing your broker instance and defining client connections.')
-        // })
+        it('should display the upgrade banner when accessing the broker with the not available logo', () => {
+            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
+            cy.contains('Broker Not Available')
+            cy.contains('The MQTT Broker page offers a streamlined interface for managing your broker instance and defining client connections.')
+        })
     })
 
     describe('is accessible to feature enabled teams ', () => {
@@ -42,6 +42,7 @@ describe('FlowForge - Broker', () => {
             cy.get('[data-nav="team-broker"]').should('not.be.disabled')
             cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('not.exist')
         })
+
         it('should display the empty state visible when no clients created and can create a client', () => {
             cy.intercept('GET', '/api/*/teams/*/broker/clients', {
                 clients: [],
@@ -76,6 +77,7 @@ describe('FlowForge - Broker', () => {
 
             cy.wait('@getClients')
         })
+
         it('should correctly display a list of clients ', () => {
             cy.intercept('GET', '/api/*/teams/*/broker/clients', {
                 clients: [
@@ -113,7 +115,7 @@ describe('FlowForge - Broker', () => {
                     }
                 ],
                 meta: {},
-                count: 0
+                count: 2
             }).as('getClients')
             cy.get('[data-nav="team-broker"]').click()
 
@@ -142,8 +144,13 @@ describe('FlowForge - Broker', () => {
                     .within(() => {
                         cy.get('[data-el="accordion"]')
                             .within(() => {
-                                // todo check for more data
                                 cy.get('[data-el="acl"]').should('have.length', 3)
+
+                                // checking how sub/pub is displayed based on provided input
+                                cy.get('[data-el="acl"] [data-el="pub"].text-green-500').should('have.length', 2)
+                                cy.get('[data-el="acl"] [data-el="pub"].text-red-500').should('have.length', 1)
+                                cy.get('[data-el="acl"] [data-el="sub"].text-green-500').should('have.length', 2)
+                                cy.get('[data-el="acl"] [data-el="sub"].text-red-500').should('have.length', 1)
                             })
                     })
                 cy.get('[data-el="client"]')
@@ -156,15 +163,100 @@ describe('FlowForge - Broker', () => {
                     .within(() => {
                         cy.get('[data-el="accordion"]')
                             .within(() => {
-                                // todo check for more data
                                 cy.get('[data-el="acl"]').should('have.length', 2)
+                                // checking how sub/pub is displayed based on provided input
+                                cy.get('[data-el="acl"] [data-el="pub"].text-green-500').should('have.length', 1)
+                                cy.get('[data-el="acl"] [data-el="pub"].text-red-500').should('have.length', 1)
+                                cy.get('[data-el="acl"] [data-el="sub"].text-green-500').should('have.length', 1)
+                                cy.get('[data-el="acl"] [data-el="sub"].text-red-500').should('have.length', 1)
                             })
                     })
             })
         })
+
         it('should validate the create client input modal', () => {
-            // todo test modal validation
+            cy.intercept('POST', '/api/*/teams/*/broker/client', { statusCode: 200 })
+                .as('saveClient')
+            cy.intercept('GET', '/api/*/teams/*/broker/clients', {
+                clients: [
+                    {
+                        id: '1',
+                        username: 'john',
+                        acls: [
+                            {
+                                action: 'both',
+                                pattern: 'both/#'
+                            },
+                            {
+                                action: 'subscribe',
+                                pattern: 'subscribe/#'
+                            },
+                            {
+                                action: 'publish',
+                                pattern: 'publish/#'
+                            }
+                        ]
+                    }
+
+                ],
+                meta: {},
+                count: 1
+            }).as('getClients')
+
+            cy.get('[data-nav="team-broker"]').click()
+
+            cy.get('[data-el="create-client-dialog"]').should('not.be.visible')
+            cy.get('[data-action="create-client"]').should('not.be.disabled')
+            cy.get('[data-action="create-client"]').click()
+            cy.get('[data-el="create-client-dialog"]').should('be.visible')
+
+            cy.get('[data-el="create-client-dialog"]').within(() => {
+                cy.get('[data-action="dialog-confirm"]').should('be.disabled')
+
+                // filling in the username with an already existing one
+                cy.get('[data-el="username"] input').should('have.value', '')
+                cy.get('[data-el="username"] input').should('not.be.disabled')
+                cy.get('[data-el="username"] input').type('john')
+                cy.get('[data-action="dialog-confirm"]').should('be.disabled')
+
+                // filling in the password
+                cy.get('[data-el="password"] input').should('have.value', '')
+                cy.get('[data-el="password"] input').type('password')
+                cy.get('[data-action="dialog-confirm"]').should('be.disabled')
+
+                // filling in the confirm-password with a mismatched password to trigger an error
+                cy.get('[data-el="confirm-password"] input').should('have.value', '')
+                cy.get('[data-el="confirm-password"] input').type('another-password')
+                cy.get('[data-action="dialog-confirm"]').should('not.be.disabled')
+
+                cy.get('[data-el="acl-item"]').should('have.length', 1)
+                cy.get('[data-action="add-acl"]').click()
+                cy.get('[data-el="acl-item"]').should('have.length', 2)
+
+                cy.get('[data-action="dialog-confirm"]').click()
+
+                cy.contains('Client name already exists.')
+                cy.contains('The provided passwords do not match.')
+
+                // fill in valid data
+                cy.get('[data-el="username"] input').clear()
+                cy.get('[data-el="username"] input').type('new-client')
+
+                cy.get('[data-el="confirm-password"] input').clear()
+                cy.get('[data-el="confirm-password"] input').type('password')
+
+                cy.get('[data-el="acl-item"]').last().within(() => {
+                    cy.get('[data-el="listbox"]').click()
+                    cy.get('[data-option="Subscribe"]').click()
+                    cy.get('[data-input="pattern"] input').type('topic/#')
+                })
+
+                cy.get('[data-action="dialog-confirm"]').click()
+            })
+            cy.wait('@saveClient')
+            cy.wait('@getClients')
         })
+
         it('should allow to edit an existing client', () => {
             cy.intercept('GET', '/api/*/teams/*/broker/clients', {
                 clients: [
@@ -202,8 +294,11 @@ describe('FlowForge - Broker', () => {
                     }
                 ],
                 meta: {},
-                count: 0
+                count: 2
             }).as('getClients')
+            cy.intercept('PUT', '/api/*/teams/*/broker/client/*', {
+                statusCode: 200
+            }).as('updateClient')
 
             cy.get('[data-nav="team-broker"]').click()
 
@@ -217,9 +312,45 @@ describe('FlowForge - Broker', () => {
                 })
 
             cy.get('[data-el="create-client-dialog"]').should('be.visible')
-            // todo check update modal validation & loaded data
-            // todo check that confirming the update modal refreshes the data
+
+            cy.get('[data-el="create-client-dialog"]')
+                .within(() => {
+                    cy.get('[data-el="username"] input').should('have.value', 'matt')
+                    cy.get('[data-el="username"] input').should('be.disabled')
+
+                    cy.get('[data-action="add-acl"]').should('exist')
+
+                    cy.get('[data-el="password"] input').should('have.attr', 'placeholder', 'Leave blank to keep current password')
+                    cy.get('[data-el="confirm-password"] input').should('have.attr', 'placeholder', 'Leave blank to keep current password')
+
+                    cy.get('[data-el="acl-item"]').should('have.length', 2)
+
+                    cy.get('[data-el="acl-list"] li:first-child')
+                        .within(() => {
+                            cy.get('[data-el="listbox"] input').should('have.value', 'Subscribe')
+                            cy.get('[data-input="pattern"] input').should('have.value', 'subscribe/#')
+                        })
+
+                    cy.get('[data-el="acl-list"] li:last-child')
+                        .within(() => {
+                            cy.get('[data-el="listbox"] input').should('have.value', 'Publish')
+                            cy.get('[data-input="pattern"] input').should('have.value', 'publish/#')
+                        })
+
+                    cy.get('[data-action="dialog-confirm"]').should('be.disabled')
+
+                    cy.get('[data-el="password"] input').type('new-password')
+                    cy.get('[data-el="confirm-password"] input').type('new-password')
+
+                    cy.get('[data-action="dialog-confirm"]').should('not.be.disabled')
+
+                    cy.get('[data-action="dialog-confirm"]').click()
+                })
+
+            cy.wait('@updateClient')
+            cy.wait('@getClients')
         })
+
         it('should allow to delete an existing client', () => {
             cy.intercept('DELETE', '/api/*/teams/*/broker/client/*', {
                 statusCode: 200,
@@ -247,7 +378,7 @@ describe('FlowForge - Broker', () => {
                     }
                 ],
                 meta: {},
-                count: 0
+                count: 1
             }).as('getClients')
 
             cy.get('[data-nav="team-broker"]').click()
diff --git a/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js b/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
index d1e2e4e222..8a0e5d4c88 100644
--- a/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
@@ -40,8 +40,7 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.intercept('GET', '/api/*/projects/*/snapshots', { count: 0, snapshots: [] }).as('getEmptyProjectSnapshots')
         cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@getEmptyProjectSnapshots')
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('main').contains('Create your First Snapshot')
+        cy.get('[data-el="empty-state"]').contains('h1', 'Create your First Snapshot')
     })
 
     it('provides functionality to create a snapshot', () => {
@@ -49,15 +48,12 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@snapshotData')
 
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('button[data-action="create-snapshot"]').click()
+        cy.get('[data-action="create-snapshot"]').click()
 
         cy.get('[data-el="dialog-create-snapshot"]').should('be.visible')
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-dialog-header').contains('Create Snapshot')
+        cy.get('[data-el="dialog-create-snapshot"] .ff-dialog-header').contains('Create Snapshot')
         // disabled primary button by default
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-dialog-box button.ff-btn.ff-btn--primary').should('be.disabled')
+        cy.get('[data-el="dialog-create-snapshot"] .ff-dialog-box button.ff-btn.ff-btn--primary').should('be.disabled')
 
         cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-name"] input[type="text"]').type('snapshot1')
         // inserting snapshot name is enough to enable button
@@ -442,8 +438,7 @@ describe('FlowForge - Instance Snapshots', () => {
             cy.get('[data-el="platform-dialog"] .ff-btn--danger').click()
             cy.wait('@deleteSnapshot')
             if (count === 1) {
-                // eslint-disable-next-line cypress/require-data-selectors
-                cy.get('main').contains('Create your First Snapshot')
+                cy.get('[data-el="empty-state"]').contains('h1', 'Create your First Snapshot')
             } else {
                 cy.get('[data-el="snapshots"] tbody').find('tr').should('have.length', count - 1)
             }
@@ -728,19 +723,15 @@ describe('FlowForge shows audit logs', () => {
     })
 
     it('for when a snapshot is created', () => {
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Created', { includeShadowDom: true, force: true }) // force check to inspect items off screen
+        cy.get('[data-el="accordion"] .ff-audit-entry').contains('Instance Snapshot Created', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is deleted', () => {
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Deleted', { includeShadowDom: true, force: true }) // force check to inspect items off screen
+        cy.get('[data-el="accordion"] .ff-audit-entry').contains('Instance Snapshot Deleted', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is exported', () => {
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Exported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
+        cy.get('[data-el="accordion"] .ff-audit-entry').contains('Instance Snapshot Exported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is imported', () => {
-        // eslint-disable-next-line cypress/require-data-selectors
-        cy.get('.ff-audit-entry').contains('Snapshot Imported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
+        cy.get('[data-el="accordion"] .ff-audit-entry').contains('Snapshot Imported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
 })
diff --git a/test/e2e/frontend/environments/standard.js b/test/e2e/frontend/environments/standard.js
index 42463a4e06..026e69bf18 100644
--- a/test/e2e/frontend/environments/standard.js
+++ b/test/e2e/frontend/environments/standard.js
@@ -10,7 +10,6 @@ const { Roles } = FF_UTIL.require('forge/lib/roles')
 module.exports = async function (settings = {}, config = {}) {
     process.env.FF_TELEMETRY_DISABLED = true
     config = {
-        ...config,
         telemetry: { enabled: false },
         logging: {
             level: 'warn'
@@ -24,11 +23,9 @@ module.exports = async function (settings = {}, config = {}) {
         },
         // configure a broker so that device app.comms is loaded and can be stubbed
         broker: {
-            url: ':test:',
-            teamBroker: {
-                enabled: true
-            }
-        }
+            url: ':test:'
+        },
+        ...config
     }
 
     // mock out stripe JS library
diff --git a/test/e2e/frontend/test_environment_ee.js b/test/e2e/frontend/test_environment_ee.js
index 1a90d122cc..ed68b25d4d 100644
--- a/test/e2e/frontend/test_environment_ee.js
+++ b/test/e2e/frontend/test_environment_ee.js
@@ -49,6 +49,12 @@ const { Roles } = FF_UTIL.require('forge/lib/roles')
                 secure: false,
                 debug: true
             }
+        },
+        broker: {
+            url: ':test:',
+            teamBroker: {
+                enabled: true
+            }
         }
     })
 
@@ -60,7 +66,6 @@ const { Roles } = FF_UTIL.require('forge/lib/roles')
     defaultTeamTypeProperties.features.deviceGroups = true
     defaultTeamTypeProperties.features.protectedInstance = true
     defaultTeamTypeProperties.features.teamHttpSecurity = true
-    defaultTeamTypeProperties.features.teamBroker = true
     defaultTeamType.properties = defaultTeamTypeProperties
     await defaultTeamType.save()
 
diff --git a/test/unit/forge/comms/authRoutesV2_spec.js b/test/unit/forge/comms/authRoutesV2_spec.js
new file mode 100644
index 0000000000..1cbe6614eb
--- /dev/null
+++ b/test/unit/forge/comms/authRoutesV2_spec.js
@@ -0,0 +1,894 @@
+const should = require('should') // eslint-disable-line
+const setup = require('../routes/setup')
+const TestModelFactory = require('../../../lib/TestModelFactory') // eslint-disable-line
+
+describe('Broker Auth API', async function () {
+    let app
+    /** @type {TestModelFactory} */
+    let factory = null
+    const TestObjects = {}
+
+    async function setupCE () {
+        app = await setup()
+        await setupTestObjects()
+    }
+    async function setupEE () {
+        app = await setup({
+            license: 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGbG93Rm9yZ2UgSW5jLiIsInN1YiI6IkZsb3dGb3JnZSBJbmMuIERldmVsb3BtZW50IiwibmJmIjoxNjYyNDIyNDAwLCJleHAiOjc5ODY5MDIzOTksIm5vdGUiOiJEZXZlbG9wbWVudC1tb2RlIE9ubHkuIE5vdCBmb3IgcHJvZHVjdGlvbiIsInVzZXJzIjoxNTAsInRlYW1zIjo1MCwicHJvamVjdHMiOjUwLCJkZXZpY2VzIjo1MCwiZGV2Ijp0cnVlLCJpYXQiOjE2NjI0ODI5ODd9.e8Jeppq4aURwWYz-rEpnXs9RY2Y7HF7LJ6rMtMZWdw2Xls6-iyaiKV1TyzQw5sUBAhdUSZxgtiFH5e_cNJgrUg'
+        })
+        await setupTestObjects()
+    }
+    async function sendACLPost (opts) {
+        opts.clientid = opts.username
+        return await app.inject({
+            method: 'POST',
+            url: '/api/comms/v2/acls',
+            body: opts
+        })
+    }
+    async function allowWrite (opts) {
+        opts.action = 'publish'
+        const response = await sendACLPost(opts)
+        response.statusCode.should.equal(200)
+        const body = response.json()
+        body.should.have.property('result', 'allow')
+    }
+    async function allowRead (opts) {
+        // Due to the way mosquitto auth checks work, we need to check
+        // both READ and SUBSCRIBE access
+        opts.action = 'subscribe'
+        const response = await sendACLPost(opts)
+        response.statusCode.should.equal(200)
+        const body = response.json()
+        body.should.have.property('result', 'allow')
+    }
+    async function denyWrite (opts) {
+        opts.action = 'publish'
+        const response = await sendACLPost(opts)
+        response.statusCode.should.equal(200)
+        const body = response.json()
+        body.should.have.property('result', 'deny')
+    }
+    async function denyRead (opts) {
+        // Due to the way mosquitto auth checks work, we need to check
+        // both READ and SUBSCRIBE access
+        opts.action = 'subscribe'
+        const response = await sendACLPost(opts)
+        response.statusCode.should.equal(200)
+        const body = response.json()
+        body.should.have.property('result', 'deny')
+    }
+    async function login (username, password) {
+        const response = await app.inject({
+            method: 'POST',
+            url: '/account/login',
+            payload: { username, password, remember: false }
+        })
+        response.cookies.should.have.length(1)
+        response.cookies[0].should.have.property('name', 'sid')
+        TestObjects.tokens[username] = response.cookies[0].value
+    }
+
+    async function setupTestObjects ({ createDeviceOptions = null } = {}) {
+        // alice : admin
+        // ATeam ( alice  (owner) )
+
+        // Alice create in setup()
+        TestObjects.alice = await app.db.models.User.byUsername('alice')
+        // ATeam create in setup()
+        TestObjects.ATeam = await app.db.models.Team.byName('ATeam')
+        // Alice set as ATeam owner in setup()
+
+        TestObjects.ProjectA = app.project
+        TestObjects.ProjectACredentials = await TestObjects.ProjectA.refreshAuthTokens()
+
+        TestObjects.ApplicationA = app.application
+
+        factory = app.factory
+
+        TestObjects.tokens = {}
+        await login('alice', 'aaPassword')
+    }
+
+    describe('Auth Client', async function () {
+        // POST /api/comms/auth/client
+        before(async function () {
+            await setupCE()
+        })
+
+        after(async function () {
+            await app.close()
+        })
+
+        it('rejects if request missing required values', async function () {
+            const response = await app.inject({
+                method: 'POST',
+                url: '/api/comms/auth/client',
+                body: { }
+            })
+            response.statusCode.should.equal(400)
+        })
+
+        it('accepts valid credentials', async function () {
+            const response = await app.inject({
+                method: 'POST',
+                url: '/api/comms/auth/client',
+                body: {
+                    clientid: TestObjects.ProjectACredentials.broker.username,
+                    username: TestObjects.ProjectACredentials.broker.username,
+                    password: TestObjects.ProjectACredentials.broker.password
+                }
+            })
+            response.statusCode.should.equal(200)
+        })
+
+        it('rejects invalid password', async function () {
+            const response = await app.inject({
+                method: 'POST',
+                url: '/api/comms/auth/client',
+                body: {
+                    clientid: TestObjects.ProjectACredentials.broker.username,
+                    username: TestObjects.ProjectACredentials.broker.username,
+                    password: 'wrong-password'
+                }
+            })
+            response.statusCode.should.equal(401)
+        })
+    })
+
+    describe('Auth ACL', async function () {
+        describe('Platform Client', async function () {
+            before(async function () {
+                await setupCE()
+            })
+
+            after(async function () {
+                await app.close()
+            })
+            it('allows platform to subscribe to launcher status topic', async function () {
+                await allowRead({
+                    username: 'forge_platform',
+                    topic: 'ff/v1/+/l/+/status'
+                })
+            })
+            it('allows platform to subscribe to device status topic', async function () {
+                await allowRead({
+                    username: 'forge_platform',
+                    topic: 'ff/v1/+/d/+/status'
+                })
+            })
+            it('allows platform to publish to project-device command topic', async function () {
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: 'ff/v1/abc/p/xyz/command'
+                })
+            })
+            it('allows platform to publish to launcher command topic', async function () {
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: 'ff/v1/abc/l/xyz/command'
+                })
+            })
+            it('allows platform to publish to device command topic', async function () {
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: 'ff/v1/abc/d/ghi/command'
+                })
+            })
+        })
+
+        describe('Project', async function () {
+            describe('CE', async function () {
+                before(async function () {
+                    await setupCE()
+                })
+
+                after(async function () {
+                    await app.close()
+                })
+
+                // Status Topic
+                it('allows launcher to publish to own status topic', async function () {
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/xyz/status'
+                    })
+                })
+                it('prevents launcher from publishing to other status topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/other-project/status'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/other-team/l/xyz/status'
+                    })
+                })
+                it('prevents launcher from subscribing to status topic', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/xyz/status'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/other-project/status'
+                    })
+                })
+
+                // Command topic
+                it('allows launcher to subscribe to own command topic', async function () {
+                    allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/xyz/command'
+                    })
+                })
+                it('prevents project from subscribing to other command topic', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/other-project/command'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/other-team/l/xyz/command'
+                    })
+                })
+                it('prevents launcher from publishing to command topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/xyz/command'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/l/other-project/command'
+                    })
+                })
+                it('project cannot publish to own broadcast topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo/bar'
+                    })
+                })
+                it('project cannot subscribe to another projects broadcast', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/bar'
+                    })
+                })
+                it('project cannot subscribe to own inbox', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/foo'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/foo/bar'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/#'
+                    })
+                })
+                it('project cannot publish to another projects inbox', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo/bar'
+                    })
+                })
+                it('project cannot subscribe to own response topic', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/foo'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/foo/bar'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/#'
+                    })
+                })
+                it('project cannot publish to another projects response topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo/bar'
+                    })
+                })
+            })
+
+            describe('EE', async function () {
+                before(async function () {
+                    await setupEE()
+                })
+
+                after(async function () {
+                    await app.close()
+                })
+                it('prevents project using incorrect shared subscription group', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: '$share/wrong-project/ff/v1/abc/p/another-project/out/foo/bar'
+                    })
+                })
+                // Inter-project comms
+                it('allows project to publish to own broadcast topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/out/foo/bar'
+                    })
+                })
+                it('allows project to subscribe to another projects broadcast', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/bar'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: '$share/xyz/ff/v1/abc/p/another-project/out/foo/bar'
+                    })
+                })
+                it('prevents project from publishing to other broadcast topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/out/foo/bar'
+                    })
+                })
+                it('allows project to subscribe to own inbox', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/foo'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/foo/bar'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/in/#'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: '$share/xyz/ff/v1/abc/p/xyz/in/foo/bar'
+                    })
+                })
+                it('prevents project from subscribing to another projects inbox', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo/bar'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/#'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: '$share/xyz/ff/v1/abc/p/another-project/in/#'
+                    })
+                })
+                it('allows project to publish to another projects inbox', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/in/foo/bar'
+                    })
+                })
+                it('allows project to subscribe to own response topic', async function () {
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res'
+                    })
+                    await denyRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/foo'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/foo/bar'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res/#'
+                    })
+                    await allowRead({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/xyz/res-random/#'
+                    })
+                })
+                it('allows project to publish to another projects response topic', async function () {
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res'
+                    })
+                    await denyWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo/'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res/foo/bar'
+                    })
+                    await allowWrite({
+                        username: 'project:abc:xyz',
+                        topic: 'ff/v1/abc/p/another-project/res-random/foo/bar'
+                    })
+                })
+            })
+        })
+
+        describe('Device', async function () {
+            let deviceUsername
+            let deviceCommandTopic
+            let deviceStatusTopic
+            let deviceLogTopic
+            let frontendUsername
+            let frontendTopic
+            async function setupDeviceTestObjects () {
+                TestObjects.DeviceA = await factory.createDevice({ name: 'my device', type: 'test device' }, TestObjects.ATeam, null, null)
+                deviceUsername = `device:${TestObjects.ATeam.hashid}:${TestObjects.DeviceA.hashid}`
+                deviceCommandTopic = `ff/v1/${TestObjects.ATeam.hashid}/d/${TestObjects.DeviceA.hashid}/command`
+                deviceStatusTopic = `ff/v1/${TestObjects.ATeam.hashid}/d/${TestObjects.DeviceA.hashid}/status`
+                deviceLogTopic = `ff/v1/${TestObjects.ATeam.hashid}/d/${TestObjects.DeviceA.hashid}/logs`
+
+                TestObjects.DeviceB = await factory.createDevice({ name: 'my device b', type: 'test device' }, TestObjects.ATeam, null, null)
+                const applicaiton = await factory.createApplication({
+                    name: 'A-team Application',
+                    description: 'A-team Application description'
+                }, TestObjects.ATeam)
+                await TestObjects.DeviceB.setApplication(applicaiton)
+
+                frontendUsername = `frontend:${TestObjects.ATeam.hashid}:${TestObjects.DeviceB.hashid}`
+                frontendTopic = `ff/v1/${TestObjects.ATeam.hashid}/d/${TestObjects.DeviceB.hashid}/logs`
+
+                // Create a second project in the team
+                TestObjects.ProjectB = await app.db.models.Project.create({ name: 'project2', type: '', url: '' })
+                await TestObjects.ATeam.addProject(TestObjects.ProjectB)
+            }
+            describe('CE', async function () {
+                before(async function () {
+                    await setupCE()
+                    await setupDeviceTestObjects()
+                })
+                after(async function () {
+                    await app.close()
+                })
+
+                // Status Topic
+                it('allows device to publish to own status topic', async function () {
+                    await allowWrite({
+                        username: deviceUsername,
+                        topic: deviceStatusTopic
+                    })
+                })
+                it('prevents device from publishing to other status topic', async function () {
+                    await denyWrite({
+                        username: deviceUsername,
+                        topic: 'ff/v1/abc/d/other-device/status'
+                    })
+                    await denyWrite({
+                        username: deviceUsername,
+                        topic: 'ff/v1/other-team/d/xyz/status'
+                    })
+                })
+                it('prevents device from subscribing to status topic', async function () {
+                    await denyRead({
+                        username: deviceUsername,
+                        topic: deviceStatusTopic
+                    })
+                    await denyRead({
+                        username: deviceUsername,
+                        topic: 'ff/v1/abc/d/other-device/status'
+                    })
+                })
+
+                // Command topic
+                it('allows device to subscribe to own command topic', async function () {
+                    allowRead({
+                        username: deviceUsername,
+                        topic: deviceCommandTopic
+                    })
+                })
+                it('prevents device from subscribing to other command topic', async function () {
+                    await denyRead({
+                        username: deviceUsername,
+                        topic: 'ff/v1/abc/d/other-device/command'
+                    })
+                    await denyRead({
+                        username: deviceUsername,
+                        topic: 'ff/v1/other-team/d/ghi/command'
+                    })
+                })
+                it('prevents device from publishing to command topic', async function () {
+                    await denyWrite({
+                        username: deviceUsername,
+                        topic: deviceCommandTopic
+                    })
+                    await denyWrite({
+                        username: deviceUsername,
+                        topic: 'ff/v1/abc/d/other-device/command'
+                    })
+                })
+            })
+            describe('EE', async function () {
+                before(async function () {
+                    await setupEE()
+                    await setupDeviceTestObjects()
+                })
+                after(async function () {
+                    await app.close()
+                })
+                describe('unassigned', async function () {
+                    it('cannot subscribe to project command if unassigned', async function () {
+                        await denyRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/command`
+                        })
+                    })
+                    it('cannot subscribe to project inbox if unassigned', async function () {
+                        await denyRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/in/foo`
+                        })
+                    })
+                    it('cannot subscribe to project broadcast if unassigned', async function () {
+                        await denyRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/out/foo`
+                        })
+                    })
+                    it('cannot subscribe to application broadcast if unassigned', async function () {
+                        await denyRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/a/${TestObjects.ApplicationA.id}/out/foo`
+                        })
+                    })
+                    it('cannot subscribe to all broadcast if unassigned', async function () {
+                        await denyRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/+/out/foo`
+                        })
+                    })
+                    it('cannot publish to project inbox if unassigned', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/in/foo`
+                        })
+                    })
+                    it('cannot publish to project output if unassigned', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/out/foo`
+                        })
+                    })
+                    it('cannot publish to project response if unassigned', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/res/foo`
+                        })
+                    })
+                })
+                describe('assigned to instance', async function () {
+                    before(async function () {
+                        await app.inject({
+                            method: 'PUT',
+                            url: `/api/v1/devices/${TestObjects.DeviceA.hashid}`,
+                            body: {
+                                instance: TestObjects.ProjectA.id
+                            },
+                            cookies: { sid: TestObjects.tokens.alice }
+                        })
+                    })
+                    it('can subscribe to project command if assigned', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/command`
+                        })
+                    })
+                    it('can subscribe to project inbox if assigned', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/in/foo`
+                        })
+                    })
+                    it('can subscribe to project broadcast if assigned', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/out/foo`
+                        })
+                    })
+                    it('can subscribe to all broadcast if assigned', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/+/out/foo`
+                        })
+                    })
+                    it('can publish to project inbox if assigned', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/in/foo`
+                        })
+                    })
+                    it('can publish to project output if assigned', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/out/foo`
+                        })
+                    })
+                    it('can publish to project response if assigned', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/res/foo`
+                        })
+                    })
+                })
+                describe('assigned to application', async function () {
+                    before(async function () {
+                        // Assign device to application
+                        await app.inject({
+                            method: 'PUT',
+                            url: `/api/v1/devices/${TestObjects.DeviceA.hashid}`,
+                            body: {
+                                application: TestObjects.ApplicationA.hashid
+                            },
+                            cookies: { sid: TestObjects.tokens.alice }
+                        })
+                    })
+                    it('can subscribe to application command', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/a/${TestObjects.ApplicationA.hashid}/command`
+                        })
+                    })
+                    it('can subscribe to project inbox', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectA.id}/in/foo`
+                        })
+                    })
+                    it('can subscribe to project broadcast', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/out/foo`
+                        })
+                    })
+                    it('can subscribe to all broadcast', async function () {
+                        await allowRead({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/+/out/foo`
+                        })
+                    })
+                    it('can publish to project inbox', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/in/foo`
+                        })
+                    })
+                    it('can not publish broadcast without `dev:` topic prefix', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.DeviceA.hashid}/out/foo`
+                        })
+                    })
+                    it('can not publish broadcast with missing device id `dev:`', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/dev:/out/foo`
+                        })
+                    })
+                    it('can not publish broadcast with bad device id `dev:invalid dev id `', async function () {
+                        await denyWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/dev:invalid dev id/out/foo`
+                        })
+                    })
+                    it('can publish broadcast with `dev:` topic prefix', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/dev:${TestObjects.DeviceA.hashid}/out/foo`
+                        })
+                    })
+                    it('can publish to project response', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: `ff/v1/${TestObjects.ATeam.hashid}/p/${TestObjects.ProjectB.id}/res/foo`
+                        })
+                    })
+                })
+                describe('device log topics', async function () {
+                    it('can publish its logs', async function () {
+                        await allowWrite({
+                            username: deviceUsername,
+                            topic: deviceLogTopic
+                        })
+                    })
+                    it('frontend can subscribe to device logs', async function () {
+                        await allowRead({
+                            username: frontendUsername,
+                            topic: frontendTopic
+                        })
+                    })
+                    it('frontend can publish heartbeat', async function () {
+                        await allowWrite({
+                            username: frontendUsername,
+                            topic: `${frontendTopic}/heartbeat`
+                        })
+                    })
+                })
+            })
+        })
+    })
+})
diff --git a/test/unit/forge/ee/routes/teamBroker/index_spec.js b/test/unit/forge/ee/routes/teamBroker/index_spec.js
index 94f7764989..e36994151c 100644
--- a/test/unit/forge/ee/routes/teamBroker/index_spec.js
+++ b/test/unit/forge/ee/routes/teamBroker/index_spec.js
@@ -401,10 +401,6 @@ describe('Team Broker API', function () {
             const result = response.json()
             result.should.have.property('result', 'deny')
         })
-        /*
-         * Need tests for the project nodes and devices both
-         * Auth and ACL
-         */
         it('Test Authentication forge_platform pass', async function () {
             const response = await app.inject({
                 method: 'POST',