diff --git a/frontend/src/components/FormRow.vue b/frontend/src/components/FormRow.vue
index ea1b6514ae..9e844c030f 100644
--- a/frontend/src/components/FormRow.vue
+++ b/frontend/src/components/FormRow.vue
@@ -48,11 +48,13 @@
             <div :class="(wrapperClass ? wrapperClass : 'flex flex-col sm:flex-row relative items-center')">
                 <!-- Dropdown -->
                 <template v-if="options && type !== 'uneditable'">
-                    <ff-dropdown v-model="localModelValue" class="w-full" :disabled="disabled" :placeholder="placeholder" data-el="dropdown">
-                        <ff-dropdown-option v-for="option in options" :value="option.value" :label="option.label" :key="option.label" class="text-sm">
-                            {{ option.label }}
-                        </ff-dropdown-option>
-                    </ff-dropdown>
+                    <ff-listbox
+                        v-model="localModelValue"
+                        :options="options"
+                        :disabled="disabled"
+                        :placeholder="placeholder"
+                        data-el="dropdown"
+                    />
                 </template>
                 <!-- Custom Input -->
                 <template v-else-if="hasCustomInput">
diff --git a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
index 9034dd55e9..9768c32187 100644
--- a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
+++ b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
@@ -19,7 +19,6 @@
                 </div>
                 <hr>
                 <p>Select the Node-RED application you want to {{ bulkOp ? 'move' : 'add' }} the device{{ selection.length > 1 ? 's' : '' }} to.</p>
-
                 <FormRow
                     v-model="input.application"
                     :options="options.applications"
diff --git a/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js b/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
index 6c2a0442af..cab422f473 100644
--- a/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
@@ -58,15 +58,15 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
         // First stage should not have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('not.exist')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('not.exist')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -77,15 +77,18 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options .ff-option').click()
+
         // Last stage should have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('exist')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('exist')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -131,13 +134,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type(`Stage 1 for ${PIPELINE_NAME}`)
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -154,17 +157,20 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
             expect(stageName).to.equal(`Stage 1 for ${PIPELINE_NAME}`)
         })
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown-selected').should('contain', 'instance-2-1')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-option-content.active').should('contain', 'instance-2-1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:last').click()
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown-selected').should('contain', 'instance-2-with-devices')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-option-content.active').should('contain', 'instance-2-with-devices')
 
         // First stage should not have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('not.exist')
-        cy.get('[data-form="stage-action"] .ff-dropdown-selected').should('contain', 'Prompt to select instance snapshot')
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('not.exist')
+        cy.get('[data-form="stage-action"] .ff-option-content.active').should('contain', 'Prompt to select instance snapshot')
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -200,14 +206,14 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
         // Select Instance for Stage 1
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
         // Select "Create new Snapshot"
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -218,13 +224,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -288,13 +294,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Prompt")').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Prompt")').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -325,13 +331,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
             cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-            cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-            cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-            cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+            cy.get('[data-form="stage-instance"] .ff-listbox').click()
+            cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+            cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-            cy.get('[data-form="stage-action"] .ff-dropdown').click()
-            cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-            cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+            cy.get('[data-form="stage-action"] .ff-listbox').click()
+            cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+            cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
             cy.get('[data-action="add-stage"]').click()
 
@@ -399,13 +405,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-device"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device"] .ff-listbox').click()
+        cy.get('[data-form="stage-device"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("active")').click() // Use active snapshot
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("active")').click() // Use active snapshot
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -416,13 +422,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -504,13 +510,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -522,13 +528,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-device"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device"] .ff-listbox').click()
+        cy.get('[data-form="stage-device"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("active")').click() // Use active snapshot
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("active")').click() // Use active snapshot
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -619,13 +625,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -641,9 +647,9 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-action"]').should('not.exist')
 
         // select 1st element for stage-device-group
-        cy.get('[data-form="stage-device-group"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device-group"] .ff-listbox').click()
+        cy.get('[data-form="stage-device-group"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device-group"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -680,13 +686,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -705,9 +711,9 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device-group"]').click()
 
         // Select create new
-        cy.get('[data-form="stage-device-group"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options > .ff-dropdown-option:contains("Create")').click()
+        cy.get('[data-form="stage-device-group"] .ff-listbox').click()
+        cy.get('[data-form="stage-device-group"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device-group"] .ff-options > .ff-option:contains("Create")').click()
 
         // Device groups field hidden to start
         cy.get('[data-form="stage-device-group-name"]').type(GROUP_NAME)
@@ -767,13 +773,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -784,13 +790,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click()
 
         cy.get('[data-action="add-stage"]').click()
 
diff --git a/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js b/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
index 6193857d60..8366efe95c 100644
--- a/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
@@ -169,8 +169,8 @@ describe('FlowForge - Blueprints', () => {
 
                 // select application
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option').first().click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option').first().click()
 
                 // give instance a name
                 cy.get('[data-form="project-name"] input').clear()
diff --git a/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js b/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
index ef2a7ceb1e..c0588590e1 100644
--- a/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
+++ b/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
@@ -72,8 +72,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -103,8 +103,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -135,8 +135,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                         cy.get('[data-el="page-name"]').contains(`Deploy ${predefinedBlueprint.name}`)
 
                         cy.get('[data-form="application-id"]').click()
-                        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                        cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                         cy.get('[data-action="click-small-blueprint-tile"]').contains(predefinedBlueprint.name)
                         cy.get('[data-form="project-type"]').children().first().click()
@@ -170,8 +170,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -205,8 +205,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -240,8 +240,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                         cy.get('[data-el="page-name"]').contains(`Deploy ${predefinedBlueprint.name}`)
 
                         cy.get('[data-form="application-id"]').click()
-                        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                        cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                         cy.get('[data-action="click-small-blueprint-tile"]').contains(predefinedBlueprint.name)
                         cy.get('[data-form="project-type"]').children().first().click()
diff --git a/test/e2e/frontend/cypress/tests/devices.spec.js b/test/e2e/frontend/cypress/tests/devices.spec.js
index ea5acd2a60..15a3c5452b 100644
--- a/test/e2e/frontend/cypress/tests/devices.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices.spec.js
@@ -298,27 +298,31 @@ describe('FlowForge - Team Devices', () => {
             // Dialog
             cy.get('[data-el="assign-device-to-instance-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="assign-device-to-instance-dialog"]')
                 .within(() => {
                     // Application dropdown
                     cy.get('[data-form="application"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('[data-el="dropdown"]').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Click first Application
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
 
                     // Instance dropdown
                     cy.get('[data-form="instance"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('.ff-listbox').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Grab name of first instance
-                        cy.get('.ff-dropdown-options').should('be.visible')
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').invoke('text').then((text) => {
+                        cy.get('.ff-options').should('be.visible')
+                        cy.get('.ff-options > .ff-option:first').invoke('text').then((text) => {
                             selectedInstance = text
                         })
 
                         // Click first instance
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
 
                     cy.get('.ff-btn--primary').click()
@@ -340,6 +344,8 @@ describe('FlowForge - Team Devices', () => {
             // Remove dialog
             cy.get('[data-el="platform-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="platform-dialog"]')
                 .within(() => {
                     cy.get('.ff-btn--danger').click()
                 })
@@ -379,17 +385,20 @@ describe('FlowForge - Team Devices', () => {
             // Dialog
             cy.get('[data-el="assign-device-to-application-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="assign-device-to-application-dialog"]')
                 .within(() => {
                     // Instance dropdown
                     cy.get('[data-form="application"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('.ff-listbox').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Grab name of first application
-                        cy.get('.ff-dropdown-options').should('be.visible')
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').invoke('text').then((text) => {
+                        cy.get('.ff-options').should('be.visible')
+                        cy.get('.ff-options > .ff-option:first').invoke('text').then((text) => {
                             selectedApplication = text
                         })
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
                     // chose the first application by clicking the primary button within the dialog
                     cy.get('.ff-btn--primary').click()
@@ -411,6 +420,8 @@ describe('FlowForge - Team Devices', () => {
             // Remove dialog
             cy.get('[data-el="platform-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="platform-dialog"]')
                 .within(() => {
                     cy.get('.ff-btn--danger').click()
                 })
diff --git a/test/e2e/frontend/cypress/tests/devices/assignment.spec.js b/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
index 0db18c2788..765e6a5bd1 100644
--- a/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
@@ -94,11 +94,12 @@ describe('FlowForge - Team - Devices - Create', () => {
 
             cy.get('[data-form="application"]').within(() => {
                 // eslint-disable-next-line cypress/require-data-selectors
-                cy.get('.ff-dropdown[disabled=false]').click()
+                cy.get('.ff-listbox').should('not.be.disabled')
+                cy.get('.ff-listbox').click()
 
                 // Click item with label 'application-2'
                 // eslint-disable-next-line cypress/require-data-selectors
-                cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('application-2').click()
+                cy.get('.ff-options > .ff-option').contains('application-2').click()
             })
 
             // click the "Add" button
@@ -210,11 +211,11 @@ describe('FlowForge - Devices - Assign', () => {
         cy.get('[data-el="assignment-dialog"]').should('not.be.visible')
         cy.get('[data-el="assignment-dialog-instance"]').should('be.visible')
 
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-options > .ff-option').eq(0).click()
 
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-options > .ff-option').eq(0).click()
 
         cy.get('[data-el="assignment-dialog-instance"] [data-action="dialog-confirm"]').click()
 
@@ -260,8 +261,8 @@ describe('FlowForge - Devices - Assign', () => {
         cy.get('[data-el="assignment-dialog"]').should('not.be.visible')
         cy.get('[data-el="assignment-dialog-application"]').should('be.visible')
 
-        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-options > .ff-option').eq(0).click()
 
         cy.get('[data-el="assignment-dialog-application"] [data-action="dialog-confirm"]').click()
 
diff --git a/test/e2e/frontend/cypress/tests/devices/bulk.spec.js b/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
index 424d67bea9..15dfdd5cf1 100644
--- a/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
@@ -114,20 +114,22 @@ describe('FlowForge - Devices', () => {
 
                         if (kind === 'application' || kind === 'instance') {
                             // select 'application-2'
-                            cy.get('[data-form="application"] .ff-dropdown').should('be.visible')
+                            cy.get('[data-form="application"] .ff-listbox').should('be.visible')
                             cy.get('[data-form="application"]').within(() => {
                                 // eslint-disable-next-line cypress/require-data-selectors
-                                cy.get('.ff-dropdown[disabled=false]').click()
+                                cy.get('.ff-listbox').should('not.be.disabled')
+                                cy.get('.ff-listbox').click()
                                 // eslint-disable-next-line cypress/require-data-selectors
-                                cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('application-2').click()
+                                cy.get('.ff-options > .ff-option').contains('application-2').click()
                             })
                             if (kind === 'instance') {
                                 // Select 'instance-2-1'
-                                cy.get('[data-form="instance"] .ff-dropdown').should('be.visible')
+                                cy.get('[data-form="instance"] .ff-listbox').should('be.visible')
                                 cy.get('[data-form="instance"]').within(() => {
-                                    cy.get('.ff-dropdown[disabled=false]').click()
+                                    cy.get('.ff-listbox').should('not.be.disabled')
+                                    cy.get('.ff-listbox').click()
                                     // eslint-disable-next-line cypress/require-data-selectors
-                                    cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('instance-2-1').click()
+                                    cy.get('.ff-options > .ff-option').contains('instance-2-1').click()
                                 })
                             }
                         }
diff --git a/test/e2e/frontend/cypress/tests/instances.spec.js b/test/e2e/frontend/cypress/tests/instances.spec.js
index e49655c867..8786ef1b35 100644
--- a/test/e2e/frontend/cypress/tests/instances.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances.spec.js
@@ -259,9 +259,9 @@ describe('FlowForge - Instances', () => {
         cy.get('[data-action="create-project"]').should('be.disabled')
 
         // select application
-        cy.get('[data-form="application-id"]').click()
-        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="application-id"] [data-el="dropdown"]').click()
+        cy.get('[data-form="application-id"] [data-el="dropdown"] .ff-options').should('be.visible')
+        cy.get('[data-form="application-id"] [data-el="dropdown"] .ff-options > .ff-option:first').click()
 
         // give instance a name
         cy.get('[data-form="project-name"] input').clear()
diff --git a/test/unit/frontend/components/form-row.spec.js b/test/unit/frontend/components/form-row.spec.js
index d0a4d9c00a..b67c80f059 100644
--- a/test/unit/frontend/components/form-row.spec.js
+++ b/test/unit/frontend/components/form-row.spec.js
@@ -50,8 +50,7 @@ describe('FormRow', () => {
 
         expect(wrapper.find('ff-checkbox').exists()).toBe(false)
         expect(wrapper.find('input[type="file"]').exists()).toBe(false)
-        expect(wrapper.find('ff-dropdown').exists()).toBe(true)
-        expect(wrapper.findAll('ff-dropdown-option').length).toBe(2)
+        expect(wrapper.find('ff-listbox').exists()).toBe(true)
         expect(wrapper.find('ff-text-input').exists()).toBe(false)
         expect(wrapper.find('[data-el="form-row-uneditable"]').exists()).toBe(false)
     })