diff --git a/forge/db/views/BOM.js b/forge/db/views/BOM.js
index 36bf642a05..8bd4f7e447 100644
--- a/forge/db/views/BOM.js
+++ b/forge/db/views/BOM.js
@@ -33,7 +33,8 @@ module.exports = {
                     nullable: true
                 },
                 ownerId: { type: 'string', nullable: true },
-                dependencies: { type: 'array', items: { $ref: 'dependency' } }
+                dependencies: { type: 'array', items: { $ref: 'dependency' } },
+                state: { type: 'string', nullable: true }
             }
         })
     },
@@ -54,17 +55,17 @@ module.exports = {
         if (type !== null) {
             const dependenciesArray = Object.entries(dependencies || {}).map(([name, version]) => app.db.views.BOM.dependency(name, version?.wanted, version?.current))
             if (type === 'device') {
-                const { hashid, name, ownerType } = model
+                const { hashid, name, ownerType, state } = model
                 let ownerId = null
                 if (ownerType === 'instance') {
                     ownerId = model.ProjectId
                 } else if (ownerType === 'application') {
                     ownerId = model.Application ? model.Application.id : app.db.models.Application.encodeHashid(model.ApplicationId)
                 }
-                return { id: hashid, name, type, ownerType, ownerId, dependencies: dependenciesArray }
+                return { id: hashid, name, type, ownerType, ownerId, dependencies: dependenciesArray, state }
             } else if (type === 'instance') {
-                const { id, name } = model
-                return { id, name, type, dependencies: dependenciesArray }
+                const { id, name, state } = model
+                return { id, name, type, dependencies: dependenciesArray, state }
             }
         }
         return null
diff --git a/frontend/src/api/team.js b/frontend/src/api/team.js
index 6d4c08b342..4932eac1fe 100644
--- a/frontend/src/api/team.js
+++ b/frontend/src/api/team.js
@@ -422,6 +422,16 @@ const bulkDeviceMove = async (teamId, devices, moveTo, id = undefined) => {
     return res.data
 }
 
+/**
+ * Get a list of Dependencies / Bill of Materials
+ * @param teamId
+ * @returns {Promise<axios.AxiosResponse<any>>}
+ */
+const getDependencies = (teamId) => {
+    return client.get(`/api/v1/teams/${teamId}/bom`)
+        .then(res => res.data)
+}
+
 /**
  * Calls api routes in team.js
  * See [routes/api/team.js](../../../forge/routes/api/team.js)
@@ -453,5 +463,6 @@ export default {
     updateTeamDeviceProvisioningToken,
     deleteTeamDeviceProvisioningToken,
     bulkDeviceDelete,
-    bulkDeviceMove
+    bulkDeviceMove,
+    getDependencies
 }
diff --git a/frontend/src/components/Accordion.vue b/frontend/src/components/Accordion.vue
index c90b028b7c..cf7c54be4a 100644
--- a/frontend/src/components/Accordion.vue
+++ b/frontend/src/components/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="ff-accordion" :class="{'open': isOpen}" data-el="accordion">
+    <div class="ff-accordion" data-el="accordion">
         <button class="ff-accordion--button" :disabled="disabled" @click="toggle()">
             <slot name="label">
                 <label>{{ label }}</label>
@@ -9,7 +9,7 @@
                 <ChevronLeftIcon v-if="!disabled" class="ff-icon chevron" />
             </div>
         </button>
-        <div ref="content" class="ff-accordion--content">
+        <div v-if="isOpen" ref="content" class="ff-accordion--content">
             <slot name="content" />
         </div>
     </div>
@@ -38,6 +38,7 @@ export default {
             default: false
         }
     },
+    emits: ['state-changed'],
     data () {
         return {
             isOpen: false
@@ -51,6 +52,7 @@ export default {
                     const content = this.$refs.content
                     return (2 * content.scrollHeight) + 'px'
                 })
+                this.$emit('state-changed', value)
             } else {
                 return null
             }
@@ -72,7 +74,7 @@ export default {
                 }
             }
         },
-        // externally facing open function so we can call all accordians open/close at once
+        // externally facing open function so we can call all accordions open/close at once
         open: function () {
             this.isOpen = true
         },
diff --git a/frontend/src/components/bill-of-materials/BomDependencies.vue b/frontend/src/components/bill-of-materials/BomDependencies.vue
new file mode 100644
index 0000000000..b14017482a
--- /dev/null
+++ b/frontend/src/components/bill-of-materials/BomDependencies.vue
@@ -0,0 +1,81 @@
+<template>
+    <div v-if="Object.keys(dependencies).length > 0" class="dependencies" data-el="dependencies">
+        <dependency-item
+            v-for="(versions, dependencyTitle) in dependencies"
+            :key="dependencyTitle"
+            :title="dependencyTitle"
+            :versions="versions"
+            :start-closed="startClosed"
+        />
+    </div>
+    <div v-else class="empty text-center opacity-60">
+        <p>Oops! We couldn't find any matching results.</p>
+    </div>
+</template>
+
+<script>
+import DependencyItem from './DependencyItem.vue'
+
+export default {
+    name: 'BomDependencies',
+    components: { DependencyItem },
+    props: {
+        payload: {
+            required: true,
+            type: Object
+        },
+        searchTerm: {
+            required: false,
+            type: String,
+            default: ''
+        },
+        startClosed: {
+            required: false,
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        dependencies () {
+            return this.payload.children
+                .reduce((acc, currentInstance) => {
+                    currentInstance.dependencies.forEach(dep => {
+                        const searchTerm = this.searchTerm.trim()
+                        const installedDependencyVersion = dep.version?.current ?? dep.version?.wanted ?? 'N/A'
+                        const dependencyNameMatchesSearch = dep.name.toLowerCase().includes(searchTerm.toLowerCase())
+                        const dependencyVersionMatchesSearch = installedDependencyVersion.toLowerCase().includes(searchTerm.toLowerCase())
+                        const matchesInstanceName = currentInstance.name.toLowerCase().includes(searchTerm.toLowerCase())
+                        const includeDependency = () => {
+                            if (!Object.prototype.hasOwnProperty.call(acc, dep.name)) {
+                                acc[dep.name] = {}
+                            }
+                            if (!Object.prototype.hasOwnProperty.call(acc[dep.name], installedDependencyVersion)) {
+                                acc[dep.name][installedDependencyVersion] = []
+                            }
+                            acc[dep.name][installedDependencyVersion].push(currentInstance)
+                        }
+
+                        switch (true) {
+                        case !searchTerm.length:
+                            includeDependency()
+                            break
+                        case matchesInstanceName:
+                            includeDependency()
+                            break
+                        case dependencyVersionMatchesSearch || dependencyNameMatchesSearch:
+                            includeDependency()
+                            break
+                        default:
+                            break
+                        }
+                    })
+                    return acc
+                }, {})
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/components/bill-of-materials/DependencyItem.vue b/frontend/src/components/bill-of-materials/DependencyItem.vue
new file mode 100644
index 0000000000..d4a8ba2f6f
--- /dev/null
+++ b/frontend/src/components/bill-of-materials/DependencyItem.vue
@@ -0,0 +1,179 @@
+<template>
+    <section class="dependency-item" data-el="dependency-item" :data-item="title">
+        <div class="dependency-header" :class="{open: isOpen}" @click="toggleOpenState">
+            <ChevronRightIcon class="ff-icon-sm ff-toggle" />
+            <div class="title truncate">
+                <h3 class="truncate">{{ title }}</h3>
+                <p class="truncate">({{ versionsCount }} {{ pluralize('Version', versionsCount) }})</p>
+            </div>
+            <div class="details truncate">
+                <span class="truncate">Latest: {{ externalLatest }}</span>
+                <span class="truncate">Released: {{ externalLastModified }}</span>
+            </div>
+        </div>
+        <template v-if="isOpen">
+            <versions-list
+                v-for="(entry, key) in sortedVersions" :key="key"
+                :instances="entry[1]"
+                :version="entry[0]"
+            />
+        </template>
+    </section>
+</template>
+
+<script>
+import { ChevronRightIcon } from '@heroicons/vue/outline'
+
+import ExternalClient from '../../api/external.js'
+import { pluralize } from '../../composables/String.js'
+import daysSince from '../../utils/daysSince.js'
+
+import VersionsList from './VersionsList.vue'
+
+export default {
+    name: 'DependencyItem',
+    components: {
+        VersionsList,
+        ChevronRightIcon
+    },
+    props: {
+        title: {
+            required: true,
+            type: String
+        },
+        versions: {
+            required: true,
+            type: Object
+        },
+        startClosed: {
+            required: false,
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            externalDependency: null,
+            isOpen: true
+        }
+    },
+    computed: {
+        sortedVersions () {
+            return Object.entries(this.versions).sort((a, b) => {
+                return b[0].localeCompare(a[0])
+            })
+        },
+        externalLatest () {
+            if (
+                !this.externalDependency ||
+                (
+                    !Object.prototype.hasOwnProperty.call(this.externalDependency, 'dist-tags') &&
+                    !Object.prototype.hasOwnProperty.call(this.externalDependency['dist-tags'], 'latest') &&
+                    !Object.prototype.hasOwnProperty.call(this.externalDependency, 'versions') &&
+                    !Object.prototype.hasOwnProperty.call(
+                        this.externalDependency.versions,
+                        this.externalDependency['dist-tags'].latest
+                    )
+                )
+            ) {
+                return 'N/A'
+            }
+
+            return this.externalDependency.versions[this.externalDependency['dist-tags'].latest].version
+        },
+        externalLastModified () {
+            if (
+                !this.externalDependency ||
+                (
+                    !Object.prototype.hasOwnProperty.call(this.externalDependency, 'time') &&
+                    !Object.prototype.hasOwnProperty.call(this.externalDependency.time, 'modified')
+                )
+            ) {
+                return 'N/A'
+            }
+
+            return daysSince(this.externalDependency.time.modified, true)
+        },
+        versionsCount () {
+            return Object.keys(this.versions).length
+        }
+    },
+    created () {
+        this.isOpen = !this.startClosed
+    },
+    mounted () {
+        this.getExternalDependency()
+    },
+    methods: {
+        pluralize,
+        async getExternalDependency () {
+            this.externalDependency = await ExternalClient.getNpmDependency(this.title)
+        },
+        toggleOpenState () {
+            this.isOpen = !this.isOpen
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.dependency-item {
+    border: 1px solid $ff-grey-300;
+    margin-bottom: 12px;
+
+    .dependency-header {
+        cursor: pointer;
+        background: $ff-grey-100;
+        display: flex;
+        padding: 6px 9px;
+        align-items: center;
+        gap: 15px;
+
+        .title {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+
+            h3, p {
+                margin: 0;
+                line-height: 1;
+            }
+
+            p {
+                color: $ff-grey-500;
+                font-weight: 400;
+                font-size: 80%;
+            }
+        }
+
+        .details {
+            display: flex;
+            flex-direction: column;
+            text-align: right;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .ff-toggle {
+            transition: ease-in-out .3s;
+        }
+
+        &.open {
+            border-bottom: 1px solid $ff-grey-300;
+
+            .ff-toggle {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    &:last-of-type {
+        .ff-accordion {
+            button {
+                border-bottom: none;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/bill-of-materials/InstancesItem.vue b/frontend/src/components/bill-of-materials/InstancesItem.vue
new file mode 100644
index 0000000000..485c81bf6e
--- /dev/null
+++ b/frontend/src/components/bill-of-materials/InstancesItem.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="instance-item" data-el="instance-item" :data-item="instance.name">
+        <div class="title truncate">
+            <h6 v-if="isDevice">
+                <IconDeviceSolid class="ff-icon text-teal-700" />
+                <router-link :to="{name: 'DeviceOverview', params: {id: instance.id}}" class="ff-link">
+                    {{ instance.name }}
+                </router-link>
+            </h6>
+            <h6 v-else>
+                <IconNodeRedSolid class="ff-icon text-red-700" />
+                <router-link :to="{name: 'instance-overview', params: {id: instance.id}}" class="ff-link truncate">
+                    {{ instance.name }}
+                </router-link>
+            </h6>
+            <h6 v-if="instance.app">
+                <router-link :to="{name: 'Application', params: {id: instance.app.id}}" class="ff-link truncate">
+                    {{ instance.app.name }}
+                </router-link>
+            </h6>
+        </div>
+        <div class="actions">
+            <status-badge v-if="instance.state" :status="instance.state" />
+        </div>
+    </div>
+</template>
+
+<script>
+import StatusBadge from '../StatusBadge.vue'
+import IconDeviceSolid from '../icons/DeviceSolid.js'
+import IconNodeRedSolid from '../icons/NodeRedSolid.js'
+
+export default {
+    name: 'InstancesItem',
+    components: {
+        StatusBadge,
+        IconNodeRedSolid,
+        IconDeviceSolid
+    },
+    props: {
+        instance: {
+            required: true,
+            type: Object
+        }
+    },
+    computed: {
+        isDevice () {
+            return this.instance.type === 'device'
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.instance-item {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 15px;
+    background: $ff-grey-50;
+    border-bottom: 1px solid $ff-grey-300;
+    justify-content: space-between;
+    padding: 6px;
+    align-items: center;
+
+    .title {
+        grid-column-start: 2;
+        grid-column-end: 6;
+        display: flex;
+        gap: 15px;
+        justify-content: space-between;
+
+        h6 {
+            display: flex;
+            gap: 6px;
+        }
+    }
+
+    .actions {
+        grid-column-start: 6;
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>
diff --git a/frontend/src/components/bill-of-materials/VersionsList.vue b/frontend/src/components/bill-of-materials/VersionsList.vue
new file mode 100644
index 0000000000..3840dcfb2b
--- /dev/null
+++ b/frontend/src/components/bill-of-materials/VersionsList.vue
@@ -0,0 +1,144 @@
+<template>
+    <ff-accordion class="versions-list" data-el="versions-list" :data-item="version" @state-changed="resetCounter">
+        <template #label>
+            <div class="version">
+                <span class="truncate">{{ version }}</span>
+            </div>
+            <div class="counter truncate">
+                <span class="truncate">
+                    <span v-if="instancesCount > 0" class="instance-counter">{{ instancesCount }} x Instances</span>
+                    <span v-if="hasInstances & hasDevices" class="delimiter">, </span>
+                    <span v-if="devicesCount > 0" class="devices-counter">{{ devicesCount }} x Devices</span>
+                </span>
+            </div>
+        </template>
+        <template #content>
+            <ul class="instances-list">
+                <li v-for="instance in truncatedInstances" :key="instance.id">
+                    <instances-item :instance="instance" />
+                </li>
+                <li v-if="hasMore" class="ff-show-more" @click="showMore">
+                    <ChevronDoubleDownIcon class="ff-icon-sm" />
+                    <p>Show More</p>
+                    <ChevronDoubleDownIcon class="ff-icon-sm" />
+                </li>
+            </ul>
+        </template>
+    </ff-accordion>
+</template>
+
+<script>
+import { ChevronDoubleDownIcon } from '@heroicons/vue/outline'
+
+import FfAccordion from '../Accordion.vue'
+
+import InstancesItem from './InstancesItem.vue'
+
+const DISPLAY_LIMIT = 15
+
+export default {
+    name: 'VersionsList',
+    components: { FfAccordion, InstancesItem, ChevronDoubleDownIcon },
+    props: {
+        version: {
+            required: true, type: String
+        },
+        instances: {
+            required: true, type: Array
+        }
+    },
+    data () {
+        return {
+            displayLimit: DISPLAY_LIMIT
+        }
+    },
+    computed: {
+        instancesCount () {
+            return this.instances.filter(instance => instance.type === 'instance').length
+        },
+        hasInstances () {
+            return this.instancesCount > 0
+        },
+        devicesCount () {
+            return this.instances.filter(instance => instance.type === 'device').length
+        },
+        hasDevices () {
+            return this.devicesCount > 0
+        },
+        truncatedInstances () {
+            return this.instances.slice(0, this.displayLimit)
+        },
+        hasMore () {
+            return this.truncatedInstances.length < (this.instancesCount + this.devicesCount)
+        }
+    },
+    methods: {
+        showMore () {
+            this.displayLimit += DISPLAY_LIMIT
+        },
+        resetCounter () {
+            this.displayLimit = DISPLAY_LIMIT
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.versions-list.ff-accordion {
+    margin: 0;
+
+    button {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        background: $ff-white;
+        gap: 15px;
+        border: none;
+        border-bottom: 1px solid $ff-grey-300;
+
+        .version {
+            grid-column-start: 2;
+            display: flex;
+            justify-content: flex-start;
+            span {
+                color: $ff-black;
+                font-weight: 500;
+            }
+        }
+
+        .counter {
+            grid-column-start: 3;
+            grid-column-end: 6;
+            display: flex;
+            justify-content: flex-start;
+            gap: 2px;
+        }
+
+        .toggle {
+            grid-column-start: 12;
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+
+    &:last-child button {
+        border-bottom: none;
+    }
+
+    .instances-list {
+        .ff-show-more {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            justify-content: center;
+            color: $ff-grey-500;
+            line-height: 30px;
+            cursor: pointer;
+            transition: ease-in-out .3s;
+
+            &:hover {
+                    color: $ff-color--action
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/application/Dependencies/Dependencies.vue b/frontend/src/pages/application/Dependencies/Dependencies.vue
index f79fa6f358..499f22c867 100644
--- a/frontend/src/pages/application/Dependencies/Dependencies.vue
+++ b/frontend/src/pages/application/Dependencies/Dependencies.vue
@@ -9,7 +9,7 @@
             </template>
         </SectionTopMenu>
 
-        <div class="space-y-6 mb-12">
+        <div class="space-y-6">
             <div class="banner-wrapper mt-5">
                 <FeatureUnavailable v-if="!isBOMFeatureEnabledForPlatform" />
                 <FeatureUnavailableToTeam v-else-if="!isBOMFeatureEnabledForTeam" />
@@ -26,17 +26,8 @@
                 >
                     <template #icon><SearchIcon /></template>
                 </ff-text-input>
-                <div v-if="Object.keys(dependencies).length > 0" class="dependencies" data-el="dependencies">
-                    <dependency-item
-                        v-for="(versions, dependencyTitle) in dependencies"
-                        :key="dependencyTitle"
-                        :title="dependencyTitle"
-                        :versions="versions"
-                    />
-                </div>
-                <div v-else class="empty text-center opacity-60">
-                    <p>Oops! We couldn't find any matching results.</p>
-                </div>
+
+                <BomDependencies :payload="payload" :search-term="searchTerm" />
             </div>
             <EmptyState v-else>
                 <template #img>
@@ -64,21 +55,20 @@ import EmptyState from '../../../components/EmptyState.vue'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
 import FeatureUnavailable from '../../../components/banners/FeatureUnavailable.vue'
 import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
+import BomDependencies from '../../../components/bill-of-materials/BomDependencies.vue'
 
 import featuresMixin from '../../../mixins/Features.js'
 import permissionsMixin from '../../../mixins/Permissions.js'
 
-import DependencyItem from './components/DependencyItem.vue'
-
 export default {
     name: 'ApplicationDependencies',
     components: {
+        BomDependencies,
         FeatureUnavailable,
         FeatureUnavailableToTeam,
         EmptyState,
         SectionTopMenu,
-        SearchIcon,
-        DependencyItem
+        SearchIcon
     },
     mixins: [featuresMixin, permissionsMixin],
     inheritAttrs: false,
@@ -86,10 +76,6 @@ export default {
         application: {
             type: Object,
             required: true
-        },
-        instances: {
-            type: Array,
-            required: true
         }
     },
     data () {
@@ -100,60 +86,11 @@ export default {
         }
     },
     computed: {
-        extendedInstances () {
-            if (!this.payload?.children) {
-                return []
-            }
-
-            return this.payload.children.map(instance => {
-                const fullInstanceData = this.instances.find(ins => ins.id === instance.id)
-                if (fullInstanceData && Object.prototype.hasOwnProperty.call(fullInstanceData, 'meta')) {
-                    instance.meta = fullInstanceData.meta
-                }
-                return instance
-            })
-        },
-        dependencies () {
-            return this.extendedInstances
-                .reduce((acc, currentInstance) => {
-                    currentInstance.dependencies.forEach(dep => {
-                        const searchTerm = this.searchTerm.trim()
-                        const installedDependencyVersion = dep.version?.current ?? dep.version?.wanted ?? 'N/A'
-                        const dependencyNameMatchesSearch = dep.name.toLowerCase().includes(searchTerm.toLowerCase())
-                        const dependencyVersionMatchesSearch = installedDependencyVersion.toLowerCase().includes(searchTerm.toLowerCase())
-                        const matchesInstanceName = currentInstance.name.toLowerCase().includes(searchTerm.toLowerCase())
-                        const includeDependency = () => {
-                            if (!Object.prototype.hasOwnProperty.call(acc, dep.name)) {
-                                acc[dep.name] = {}
-                            }
-                            if (!Object.prototype.hasOwnProperty.call(acc[dep.name], installedDependencyVersion)) {
-                                acc[dep.name][installedDependencyVersion] = []
-                            }
-                            acc[dep.name][installedDependencyVersion].push(currentInstance)
-                        }
-
-                        switch (true) {
-                        case !searchTerm.length:
-                            includeDependency()
-                            break
-                        case matchesInstanceName:
-                            includeDependency()
-                            break
-                        case dependencyVersionMatchesSearch || dependencyNameMatchesSearch:
-                            includeDependency()
-                            break
-                        default:
-                            break
-                        }
-                    })
-                    return acc
-                }, {})
+        hasTeamPermission () {
+            return this.hasPermission('application:bom')
         },
         hasInstances () {
             return !(!this.payload || this.payload.children.length === 0)
-        },
-        hasTeamPermission () {
-            return this.hasPermission('application:bom')
         }
     },
     mounted () {
@@ -184,10 +121,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.dependencies-wrapper {
-  .dependencies {
-    display: grid;
-    gap: 12px;
-  }
-}
+
 </style>
diff --git a/frontend/src/pages/application/Dependencies/components/DependencyItem.vue b/frontend/src/pages/application/Dependencies/components/DependencyItem.vue
deleted file mode 100644
index 96d9860368..0000000000
--- a/frontend/src/pages/application/Dependencies/components/DependencyItem.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <section class="dependency-item" data-el="dependency-item">
-        <div class="dependency-header">
-            <div class="title">
-                <h3>{{ title }}</h3>
-            </div>
-            <div class="details">
-                <span>Latest: {{ externalLatest }}</span>
-                <span>Released: {{ externalLastModified }}</span>
-            </div>
-        </div>
-        <versions-list
-            v-for="(entry, key) in Object.entries(versions)" :key="key"
-            :instances="entry[1]"
-            :version="entry[0]"
-        />
-    </section>
-</template>
-
-<script>
-
-import ExternalClient from '../../../../api/external.js'
-import daysSince from '../../../../utils/daysSince.js'
-
-import VersionsList from './VersionsList.vue'
-
-export default {
-    name: 'DependencyItem',
-    components: { VersionsList },
-    props: {
-        title: {
-            required: true,
-            type: String
-        },
-        versions: {
-            required: true,
-            type: Object
-        }
-    },
-    data () {
-        return {
-            externalDependency: null
-        }
-    },
-    computed: {
-        externalLatest () {
-            if (
-                !this.externalDependency ||
-                (
-                    !Object.prototype.hasOwnProperty.call(this.externalDependency, 'dist-tags') &&
-                    !Object.prototype.hasOwnProperty.call(this.externalDependency['dist-tags'], 'latest') &&
-                    !Object.prototype.hasOwnProperty.call(this.externalDependency, 'versions') &&
-                    !Object.prototype.hasOwnProperty.call(
-                        this.externalDependency.versions,
-                        this.externalDependency['dist-tags'].latest
-                    )
-                )
-            ) {
-                return 'N/A'
-            }
-
-            return this.externalDependency.versions[this.externalDependency['dist-tags'].latest].version
-        },
-        externalLastModified () {
-            if (
-                !this.externalDependency ||
-            (
-                !Object.prototype.hasOwnProperty.call(this.externalDependency, 'time') &&
-                !Object.prototype.hasOwnProperty.call(this.externalDependency.time, 'modified')
-            )
-            ) {
-                return 'N/A'
-            }
-
-            return daysSince(this.externalDependency.time.modified, true)
-        }
-    },
-    mounted () {
-        this.getExternalDependency()
-    },
-    methods: {
-        async getExternalDependency () {
-            this.externalDependency = await ExternalClient.getNpmDependency(this.title)
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.dependency-item {
-  border: 1px solid $ff-grey-300;
-  .dependency-header {
-    background: $ff-grey-100;
-    display: flex;
-    border-bottom: 1px solid $ff-grey-300;
-    padding: 6px 9px;
-    align-items: center;
-
-    .title {
-      flex: 1;
-
-      h3 {
-        margin: 0;
-      }
-    }
-
-    .details {
-      display: flex;
-      flex-direction: column;
-      text-align: right;
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-  }
-
-  &:last-of-type {
-    .ff-accordion {
-      button {
-        border-bottom: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/frontend/src/pages/application/Dependencies/components/InstancesItem.vue b/frontend/src/pages/application/Dependencies/components/InstancesItem.vue
deleted file mode 100644
index d6b7bd16de..0000000000
--- a/frontend/src/pages/application/Dependencies/components/InstancesItem.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <div class="instance-item" data-el="instance-item">
-        <div class="title">
-            <h6 v-if="isDevice">
-                <IconDeviceSolid class="ff-icon text-teal-700" />
-                <router-link :to="{name: 'DeviceOverview', params: {id: instance.id}}" class="ff-link">
-                    {{ instance.name }}
-                </router-link>
-            </h6>
-            <h6 v-else>
-                <IconNodeRedSolid class="ff-icon text-red-700" />
-                <router-link :to="{name: 'instance-overview', params: {id: instance.id}}" class="ff-link">
-                    {{ instance.name }}
-                </router-link>
-            </h6>
-        </div>
-        <div class="actions">
-            <status-badge v-if="!isDevice" :status="instance.meta?.state" />
-        </div>
-    </div>
-</template>
-
-<script>
-import StatusBadge from '../../../../components/StatusBadge.vue'
-import IconDeviceSolid from '../../../../components/icons/DeviceSolid.js'
-import IconNodeRedSolid from '../../../../components/icons/NodeRedSolid.js'
-
-export default {
-    name: 'InstancesItem',
-    components: { StatusBadge, IconNodeRedSolid, IconDeviceSolid },
-    props: {
-        instance: {
-            required: true,
-            type: Object
-        }
-    },
-    computed: {
-        isDevice () {
-            return this.instance.type === 'device'
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.instance-item {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 15px;
-  background: $ff-grey-50;
-  border-bottom: 1px solid $ff-grey-300;
-  justify-content: space-between;
-  padding: 6px;
-  align-items: center;
-
-  .title {
-    grid-column-start: 2;
-    grid-column-end: 4;
-
-    h6 {
-      display: flex;
-      gap: 6px;
-    }
-  }
-
-  .actions {
-    grid-column-start: 6;
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-</style>
diff --git a/frontend/src/pages/application/Dependencies/components/VersionsList.vue b/frontend/src/pages/application/Dependencies/components/VersionsList.vue
deleted file mode 100644
index f6c65afb1d..0000000000
--- a/frontend/src/pages/application/Dependencies/components/VersionsList.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <ff-accordion class="versions-list" data-el="versions-list">
-        <template #label>
-            <span class="version">{{ version }}</span>
-            <div class="counter">
-                <span v-if="instancesCount > 0" class="instance-counter">{{ instancesCount }} x Instances</span>
-                <span v-if="hasInstances & hasDevices" class="delimiter">, </span>
-                <span v-if="devicesCount > 0" class="devices-counter">{{ devicesCount }} x Devices</span>
-            </div>
-        </template>
-        <template #content>
-            <ul class="instances-list">
-                <li v-for="instance in instances" :key="instance.id">
-                    <instances-item :instance="instance" />
-                </li>
-            </ul>
-        </template>
-    </ff-accordion>
-</template>
-
-<script>
-import FfAccordion from '../../../../components/Accordion.vue'
-
-import InstancesItem from './InstancesItem.vue'
-
-export default {
-    name: 'VersionsList',
-    components: { FfAccordion, InstancesItem },
-    props: {
-        version: {
-            required: true, type: String
-        },
-        instances: {
-            required: true, type: Array
-        }
-    },
-    computed: {
-        instancesCount () {
-            return this.instances.filter(instance => instance.type === 'instance').length
-        },
-        hasInstances () {
-            return this.instancesCount > 0
-        },
-        devicesCount () {
-            return this.instances.filter(instance => instance.type === 'device').length
-        },
-        hasDevices () {
-            return this.devicesCount > 0
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.versions-list.ff-accordion {
-  margin: 0;
-
-  button {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    background: $ff-white;
-    gap: 15px;
-    border: none;
-    border-bottom: 1px solid $ff-grey-300;
-
-    .version {
-      grid-column-start: 2;
-      display: flex;
-      justify-content: flex-start;
-      color: $ff-black;
-      font-weight: 500;
-    }
-
-    .counter {
-      grid-column-start: 3;
-      grid-column-end: 6;
-      display: flex;
-      justify-content: flex-start;
-    }
-
-    .toggle {
-      grid-column-start: 12;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-  &:last-child button {
-    border-bottom: none;
-  }
-}
-</style>
diff --git a/frontend/src/pages/team/BOM/index.vue b/frontend/src/pages/team/BOM/index.vue
new file mode 100644
index 0000000000..298d2edb17
--- /dev/null
+++ b/frontend/src/pages/team/BOM/index.vue
@@ -0,0 +1,151 @@
+<template>
+    <ff-page>
+        <template #header>
+            <ff-page-header title="Bill Of Materials">
+                <template #context>
+                    Single view of all libraries and dependencies running within your Node-RED flows
+                </template>
+                <template #pictogram>
+                    <img alt="logo" src="../../../images/pictograms/instance_red.png">
+                </template>
+                <template #helptext>
+                    <p>Bill of Dependencies provides a comprehensive overview of all libraries and dependencies used within your Node-RED flows.</p>
+                    <p>This allows you to easily track the packages your flows rely on, identify outdated or vulnerable dependencies, and ensure compatibility across your flows.</p>
+                </template>
+            </ff-page-header>
+        </template>
+
+        <div id="team-bom">
+            <template v-if="!featuresCheck.isBOMFeatureEnabled">
+                <div class="banner-wrapper">
+                    <FeatureUnavailable v-if="!featuresCheck.isBOMFeatureEnabledForPlatform" />
+                    <FeatureUnavailableToTeam v-else-if="!featuresCheck.isBOMFeatureEnabledForTeam" />
+                </div>
+
+                <EmptyState>
+                    <template #img>
+                        <img alt="empty-state-logo" src="../../../images/empty-states/application-instances.png">
+                    </template>
+                    <template #header>Bill Of Materials not available!</template>
+                    <template #message>
+                        <p>
+                            This feature isn’t supported for your team tier or platform settings. Explore upgrade options to enable it.
+                        </p>
+                    </template>
+                </EmptyState>
+            </template>
+
+            <template v-else>
+                <ff-loading v-if="loading" message="Loading Dependencies..." />
+
+                <div v-else-if="hasInstances">
+                    <ff-text-input
+                        v-model="searchTerm"
+                        class="ff-data-table--search mb-5"
+                        data-form="search"
+                        placeholder="Search Package Dependency, Instance or Device"
+                    >
+                        <template #icon><SearchIcon /></template>
+                    </ff-text-input>
+
+                    <BomDependencies :payload="payload" :search-term="searchTerm" :start-closed="true" />
+                </div>
+
+                <EmptyState v-else>
+                    <template #img>
+                        <img alt="empty-state-logo" src="../../../images/empty-states/application-instances.png">
+                    </template>
+                    <template #header>No Dependencies Here... Yet!</template>
+                    <template #message>
+                        <p>
+                            It looks like there are no Instances or Devices assigned to this team yet.
+                        </p>
+                        <p>
+                            Once you assign an Instance or Device to an application belonging to this team, you'll be able to view a complete list of their dependencies.
+                        </p>
+                    </template>
+                </EmptyState>
+            </template>
+        </div>
+    </ff-page>
+</template>
+
+<script>
+import { SearchIcon } from '@heroicons/vue/outline'
+import { mapGetters } from 'vuex'
+
+import teamApi from '../../../api/team.js'
+
+import EmptyState from '../../../components/EmptyState.vue'
+import FeatureUnavailable from '../../../components/banners/FeatureUnavailable.vue'
+import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
+import BomDependencies from '../../../components/bill-of-materials/BomDependencies.vue'
+import usePermissions from '../../../composables/Permissions.js'
+
+export default {
+    name: 'TeamBOM',
+    components: {
+        BomDependencies,
+        FeatureUnavailableToTeam,
+        FeatureUnavailable,
+        SearchIcon,
+        EmptyState
+    },
+    setup () {
+        const { hasPermission } = usePermissions()
+        return {
+            hasPermission
+        }
+    },
+    data () {
+        return {
+            intermediaryPayload: [],
+            loading: false,
+            searchTerm: ''
+        }
+    },
+    computed: {
+        ...mapGetters('account', ['featuresCheck', 'team']),
+        payload () {
+            const payload = { children: [] }
+            this.intermediaryPayload.forEach(app => {
+                const { id, name } = app
+                payload.children.push(...app.children.map(child => ({
+                    ...child,
+                    app: { id, name }
+                })))
+            })
+
+            return payload
+        },
+        hasInstances () {
+            return !(!this.payload || this.payload.children.length === 0)
+        }
+    },
+    mounted () {
+        if (!this.hasPermission('team:bom')) {
+            this.$router.push({ name: 'Applications' })
+        }
+        if (this.featuresCheck.isBOMFeatureEnabled) {
+            this.getTeamDependencies()
+        }
+    },
+    methods: {
+        getTeamDependencies () {
+            this.loading = true
+            teamApi.getDependencies(this.team.id)
+                .then(res => {
+                    this.intermediaryPayload = res
+                })
+                .catch(e => e)
+                .finally(() => {
+                    this.loading = false
+                })
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 9dfefbbdec..fc611521e6 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -2,6 +2,7 @@ import ensurePermission from '../../utils/ensurePermission.js'
 
 import TeamApplications from './Applications/index.vue'
 import TeamAuditLog from './AuditLog.vue'
+import TeamBillOfMaterials from './BOM/index.vue'
 import TeamBilling from './Billing.vue'
 import TeamDevices from './Devices/index.vue'
 import TeamInstances from './Instances.vue'
@@ -200,7 +201,18 @@ export default [
                     {
                         name: 'team-pipelines',
                         path: 'pipelines',
-                        component: TeamPipelines
+                        component: TeamPipelines,
+                        meta: {
+                            title: 'Team - DevOps Pipelines'
+                        }
+                    },
+                    {
+                        name: 'team-bom',
+                        path: 'bill-of-materials',
+                        component: TeamBillOfMaterials,
+                        meta: {
+                            title: 'Team - Bill of Materials'
+                        }
                     }
                 ]
             },
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index fd19705e70..2d521fd797 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -2,7 +2,7 @@ import {
     BookOpenIcon, ChatIcon, ChipIcon, CogIcon, CollectionIcon,
     ColorSwatchIcon, CurrencyDollarIcon, DatabaseIcon,
     DesktopComputerIcon, LockClosedIcon, RssIcon,
-    TemplateIcon, UserGroupIcon, UsersIcon
+    TableIcon, TemplateIcon, UserGroupIcon, UsersIcon
 } from '@heroicons/vue/outline'
 
 import PipelinesIcon from '../components/icons/Pipelines.js'
@@ -81,6 +81,24 @@ const getters = {
                     title: 'Operations',
                     hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
+                        {
+                            label: 'Pipelines',
+                            to: { name: 'team-pipelines', params: { team_slug: team.slug } },
+                            tag: 'team-pipelines',
+                            icon: PipelinesIcon,
+                            disabled: noBilling,
+                            featureUnavailable: !features.devOpsPipelinesFeatureEnabled,
+                            hidden: hasALowerOrEqualTeamRoleThan(Roles.Member)
+                        },
+                        {
+                            label: 'Bill Of Materials',
+                            to: { name: 'team-bom', params: { team_slug: team.slug } },
+                            tag: 'team-bom',
+                            icon: TableIcon,
+                            disabled: noBilling,
+                            featureUnavailable: !features.isBOMFeatureEnabled,
+                            hidden: hasALowerOrEqualTeamRoleThan(Roles.Owner)
+                        },
                         {
                             label: 'Broker',
                             to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
@@ -89,15 +107,6 @@ const getters = {
                             disabled: noBilling,
                             featureUnavailable: !features.isMqttBrokerFeatureEnabled,
                             hidden: hasALowerOrEqualTeamRoleThan(Roles.Member) && features.isMqttBrokerFeatureEnabledForPlatform
-                        },
-                        {
-                            label: 'Pipelines',
-                            to: { name: 'team-pipelines', params: { team_slug: team.slug } },
-                            tag: 'team-pipelines',
-                            icon: PipelinesIcon,
-                            disabled: noBilling,
-                            featureUnavailable: !features.devOpsPipelinesFeatureEnabled,
-                            hidden: hasALowerOrEqualTeamRoleThan(Roles.Member) && features.devOpsPipelinesFeatureEnabled
                         }
                     ]
                 },
diff --git a/frontend/src/stylesheets/components/accordion.scss b/frontend/src/stylesheets/components/accordion.scss
index 0ec11a8fde..22c35243b3 100644
--- a/frontend/src/stylesheets/components/accordion.scss
+++ b/frontend/src/stylesheets/components/accordion.scss
@@ -27,8 +27,6 @@
         }
     }
     &--content {
-        display: none;
-        // max-height: 0;
         transition: max-height 0.6s ease-out;
         .ff-audit-entry {
             padding: 12px;
@@ -37,9 +35,6 @@
         }
     }
     &.open {
-        .ff-accordion--content {
-            display: block;
-        }
         .ff-accordion--button .ff-icon.chevron {
             transform: rotate(-90deg);
         }
diff --git a/test/e2e/frontend/cypress/fixtures/applications/dependencies.json b/test/e2e/frontend/cypress/fixtures/applications/dependencies.json
deleted file mode 100644
index 89808c58ef..0000000000
--- a/test/e2e/frontend/cypress/fixtures/applications/dependencies.json
+++ /dev/null
@@ -1,174 +0,0 @@
-{
-  "instances": [
-    {
-      "id": "1",
-      "name": "instance-1"
-    },
-    {
-      "id": "2",
-      "name": "instance-2"
-    },
-    {
-      "id": "3",
-      "name": "instance-3"
-    }
-  ],
-  "statuses": [
-    {
-      "id": "1",
-      "name": "instance-1",
-      "meta": {
-        "state": "running"
-      }
-    },
-    {
-      "id": "2",
-      "name": "instance-2",
-      "meta": {
-        "state": "suspended"
-      }
-    },
-    {
-      "id": "3",
-      "name": "instance-3",
-      "meta": {
-        "state": "running"
-      }
-    }
-  ],
-  "dependencies": [
-    {
-      "id": "1",
-      "name": "instance-1",
-      "type": "instance",
-      "dependencies": [
-        {
-          "name": "@package/dep-1",
-          "version": {
-            "wanted": "1.1.1",
-            "current": "1.1.1"
-          }
-        },
-        {
-          "name": "@package/var-2",
-          "version": {
-            "wanted": "~1.15.0",
-            "current": "1.15.0"
-          }
-        },
-        {
-          "name": "@external/sem-3",
-          "version": {
-            "wanted": "~2.1.1",
-            "current": "2.1.1"
-          }
-        }
-      ]
-    },
-    {
-      "id": "2",
-      "name": "instance-2",
-      "type": "instance",
-      "dependencies": [
-        {
-          "name": "@package/dep-1",
-          "version": {
-            "wanted": "2.2.2",
-            "current": "2.2.2"
-          }
-        },
-        {
-          "name": "@package/var-2",
-          "version": {
-            "wanted": "3.3.3",
-            "current": "3.3.3"
-          }
-        },
-        {
-          "name": "@external/sem-3",
-          "version": {
-            "wanted": "4.4.4",
-            "current": "4.4.4"
-          }
-        }
-      ]
-    },
-    {
-      "id": "3",
-      "name": "instance-3",
-      "type": "instance",
-      "dependencies": [
-        {
-          "name": "@package/dep-1",
-          "version": {
-            "wanted": "5.5.5",
-            "current": "5.5.5"
-          }
-        },
-        {
-          "name": "@package/var-2",
-          "version": {
-            "wanted": "6.6.6",
-            "current": "7.7.7"
-          }
-        },
-        {
-          "name": "@external/sem-3",
-          "version": {
-            "wanted": "8.8.8",
-            "current": "8.8.8"
-          }
-        },
-        {
-          "name": "@lonely/package-1",
-          "version": {
-            "wanted": "1.0.0",
-            "current": "1.0.0"
-          }
-        }
-      ]
-    },
-    {
-      "id": "4",
-      "name": "device-1",
-      "type": "device",
-      "dependencies": [
-        {
-          "name": "@package/var-2",
-          "version": {
-            "wanted": "6.6.6",
-            "current": "7.7.7"
-          }
-        }
-      ]
-    },
-    {
-      "id": "5",
-      "name": "device-2",
-      "type": "device",
-      "dependencies": [
-        {
-          "name": "@external/sem-3",
-          "version": {
-            "wanted": "8.8.8",
-            "current": "8.8.8"
-          }
-        }
-      ]
-    },
-    {
-      "id": "6",
-      "name": "device-3",
-      "type": "device",
-      "dependencies": [
-        {
-          "name": "@some-package/var",
-          "version": {
-            "wanted": "1.2.0",
-            "current": "1.1.1"
-          }
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/bill-of-materials/application-dependencies.json b/test/e2e/frontend/cypress/fixtures/bill-of-materials/application-dependencies.json
new file mode 100644
index 0000000000..8494303a44
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/bill-of-materials/application-dependencies.json
@@ -0,0 +1,169 @@
+[
+  {
+    "id": "1",
+    "name": "instance-1",
+    "type": "instance",
+    "state": "running",
+    "dependencies": [
+      {
+        "name": "@package/dep-1",
+        "version": {
+          "wanted": "1.1.1",
+          "current": "1.1.1"
+        }
+      },
+      {
+        "name": "@package/var-2",
+        "version": {
+          "wanted": "~1.15.0",
+          "current": "1.15.0"
+        }
+      },
+      {
+        "name": "@external/sem-3",
+        "version": {
+          "wanted": "~2.1.1",
+          "current": "2.1.1"
+        }
+      }
+    ]
+  },
+  {
+    "id": "2",
+    "name": "instance-2",
+    "type": "instance",
+    "dependencies": [
+      {
+        "name": "@package/dep-1",
+        "version": {
+          "wanted": "2.2.2",
+          "current": "2.2.2"
+        }
+      },
+      {
+        "name": "@package/var-2",
+        "version": {
+          "wanted": "3.3.3",
+          "current": "3.3.3"
+        }
+      },
+      {
+        "name": "@external/sem-3",
+        "version": {
+          "wanted": "4.4.4",
+          "current": "4.4.4"
+        }
+      }
+    ]
+  },
+  {
+    "id": "3",
+    "name": "instance-3",
+    "type": "instance",
+    "state": "suspended",
+    "dependencies": [
+      {
+        "name": "@package/dep-1",
+        "version": {
+          "wanted": "5.5.5",
+          "current": "5.5.5"
+        }
+      },
+      {
+        "name": "@package/var-2",
+        "version": {
+          "wanted": "6.6.6",
+          "current": "7.7.7"
+        }
+      },
+      {
+        "name": "@external/sem-3",
+        "version": {
+          "wanted": "8.8.8",
+          "current": "8.8.8"
+        }
+      },
+      {
+        "name": "@lonely/package-1",
+        "version": {
+          "wanted": "1.0.0",
+          "current": "1.0.0"
+        }
+      }
+    ]
+  },
+  {
+    "id": "4",
+    "name": "device-1",
+    "type": "device",
+    "state": "running",
+    "dependencies": [
+      {
+        "name": "@package/var-2",
+        "version": {
+          "wanted": "6.6.6",
+          "current": "7.7.7"
+        }
+      }
+    ]
+  },
+  {
+    "id": "5",
+    "name": "device-2",
+    "type": "device",
+    "state": "suspended",
+    "dependencies": [
+      {
+        "name": "@external/sem-3",
+        "version": {
+          "wanted": "8.8.8",
+          "current": "8.8.8"
+        }
+      }
+    ]
+  },
+  {
+    "id": "6",
+    "name": "device-3",
+    "type": "device",
+    "dependencies": [
+      {
+        "name": "@some-package/var",
+        "version": {
+          "wanted": "1.2.0",
+          "current": "1.1.1"
+        }
+      }
+    ]
+  },
+  {
+    "id": "7",
+    "name": "device-4",
+    "type": "device",
+    "state": "suspended",
+    "dependencies": [
+      {
+        "name": "@some-package/var",
+        "version": {
+          "wanted": "1.2.0",
+          "current": "1.1.1"
+        }
+      }
+    ]
+  },
+  {
+    "id": "8",
+    "name": "instance-4",
+    "type": "instance",
+    "dependencies": [
+      {
+        "name": "@some-package/var",
+        "version": {
+          "wanted": "1.2.0",
+          "current": "1.1.1"
+        }
+      }
+    ]
+  }
+]
+
diff --git a/test/e2e/frontend/cypress/fixtures/bill-of-materials/team-dependencies.json b/test/e2e/frontend/cypress/fixtures/bill-of-materials/team-dependencies.json
new file mode 100644
index 0000000000..5cec491cb9
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/bill-of-materials/team-dependencies.json
@@ -0,0 +1,186 @@
+[
+  {
+    "id": "abc",
+    "name": "My First App",
+    "children": [
+      {
+        "id": "1",
+        "name": "instance-1",
+        "type": "instance",
+        "state": "running",
+        "dependencies": [
+          {
+            "name": "@package/dep-1",
+            "version": {
+              "wanted": "1.1.1",
+              "current": "1.1.1"
+            }
+          },
+          {
+            "name": "@package/var-2",
+            "version": {
+              "wanted": "~1.15.0",
+              "current": "1.15.0"
+            }
+          },
+          {
+            "name": "@external/sem-3",
+            "version": {
+              "wanted": "~2.1.1",
+              "current": "2.1.1"
+            }
+          }
+        ]
+      },
+      {
+        "id": "2",
+        "name": "instance-2",
+        "type": "instance",
+        "state": "running",
+        "dependencies": [
+          {
+            "name": "@package/dep-1",
+            "version": {
+              "wanted": "2.2.2",
+              "current": "2.2.2"
+            }
+          },
+          {
+            "name": "@package/var-2",
+            "version": {
+              "wanted": "3.3.3",
+              "current": "3.3.3"
+            }
+          },
+          {
+            "name": "@external/sem-3",
+            "version": {
+              "wanted": "4.4.4",
+              "current": "4.4.4"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "def",
+    "name": "Another App",
+    "children": [
+      {
+        "id": "3",
+        "name": "instance-3",
+        "type": "instance",
+        "state": "suspended",
+        "dependencies": [
+          {
+            "name": "@package/dep-1",
+            "version": {
+              "wanted": "5.5.5",
+              "current": "5.5.5"
+            }
+          },
+          {
+            "name": "@package/var-2",
+            "version": {
+              "wanted": "6.6.6",
+              "current": "7.7.7"
+            }
+          },
+          {
+            "name": "@external/sem-3",
+            "version": {
+              "wanted": "8.8.8",
+              "current": "8.8.8"
+            }
+          },
+          {
+            "name": "@lonely/package-1",
+            "version": {
+              "wanted": "1.0.0",
+              "current": "1.0.0"
+            }
+          }
+        ]
+      },
+      {
+        "id": "4",
+        "name": "device-1",
+        "type": "device",
+        "state": "running",
+        "dependencies": [
+          {
+            "name": "@package/var-2",
+            "version": {
+              "wanted": "6.6.6",
+              "current": "7.7.7"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "ghi",
+    "name": "Acme App",
+    "children": [
+      {
+        "id": "5",
+        "name": "device-2",
+        "type": "device",
+        "dependencies": [
+          {
+            "name": "@external/sem-3",
+            "version": {
+              "wanted": "8.8.8",
+              "current": "8.8.8"
+            }
+          }
+        ]
+      },
+      {
+        "id": "6",
+        "name": "device-3",
+        "type": "device",
+        "dependencies": [
+          {
+            "name": "@some-package/var",
+            "version": {
+              "wanted": "1.2.0",
+              "current": "1.1.1"
+            }
+          }
+        ]
+      },
+      {
+        "id": "7",
+        "name": "device-4",
+        "type": "device",
+        "state": "suspended",
+        "dependencies": [
+          {
+            "name": "@some-package/var",
+            "version": {
+              "wanted": "1.2.0",
+              "current": "1.1.1"
+            }
+          }
+        ]
+      },
+      {
+        "id": "8",
+        "name": "instance-4",
+        "type": "instance",
+        "dependencies": [
+          {
+            "name": "@some-package/var",
+            "version": {
+              "wanted": "1.2.0",
+              "current": "1.1.1"
+            }
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/test/e2e/frontend/cypress/tests-ee/applications/dependencies.spec.js b/test/e2e/frontend/cypress/tests-ee/applications/dependencies.spec.js
index da37c69712..f0a035389c 100644
--- a/test/e2e/frontend/cypress/tests-ee/applications/dependencies.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/applications/dependencies.spec.js
@@ -1,4 +1,4 @@
-import dependencies from '../../fixtures/applications/dependencies.json'
+import dependencies from '../../fixtures/bill-of-materials/application-dependencies.json'
 const interceptBom = (dependencies = []) => {
     cy.intercept('GET', '/api/*/applications/*/bom', {
         id: 'app-id',
@@ -6,6 +6,7 @@ const interceptBom = (dependencies = []) => {
         children: [...dependencies]
     }).as('getBom')
 }
+
 describe('FlowForge - Application - Dependencies', () => {
     let application
     function navigateToApplication (teamName, projectName, instances = [], statuses = []) {
@@ -88,6 +89,15 @@ describe('FlowForge - Application - Dependencies', () => {
                     return response
                 })
             }).as('getTeam')
+            cy.intercept('GET', 'https://registry.npmjs.com/**', {
+                'dist-tags': {
+                    latest: 'x.x.x'
+                },
+                time: {
+                    modified: new Date()
+                }
+            }
+            ).as('getExternalDependency')
 
             cy.intercept('GET', '/api/*/applications/*').as('getApplication')
 
@@ -98,7 +108,7 @@ describe('FlowForge - Application - Dependencies', () => {
             cy.wait('@getTeam')
         })
 
-        it('have access to the dependencies tab and get an empty page when the application doesn\'t have instances or devices assigned', () => {
+        it('should have access to the dependencies tab and get an empty page when the application doesn\'t have instances or devices assigned', () => {
             interceptBom()
             cy.get('[data-nav="application-dependencies"]').click()
 
@@ -106,17 +116,8 @@ describe('FlowForge - Application - Dependencies', () => {
             cy.get('[data-el="empty-state"]').contains('Your application doesn\'t contain any Instances or Devices')
         })
 
-        it('have access to the dependencies tab and can search by name', () => {
-            cy.intercept('GET', 'https://registry.npmjs.com/**', {
-                'dist-tags': {
-                    latest: 'x.x.x'
-                },
-                time: {
-                    modified: new Date()
-                }
-            }
-            ).as('getExternalDependency')
-            interceptBom(dependencies.dependencies)
+        it('should have access to the dependencies tab and can search by name', () => {
+            interceptBom(dependencies)
 
             cy.get('[data-nav="application-dependencies"]').click()
             cy.wait('@getExternalDependency')
@@ -172,17 +173,8 @@ describe('FlowForge - Application - Dependencies', () => {
                 })
         })
 
-        it('have access to the dependencies tab and can search by instance type', () => {
-            cy.intercept('GET', 'https://registry.npmjs.com/**', {
-                'dist-tags': {
-                    latest: 'x.x.x'
-                },
-                time: {
-                    modified: new Date()
-                }
-            }
-            ).as('getExternalDependency')
-            interceptBom(dependencies.dependencies)
+        it('should have access to the dependencies tab and can search by instance type', () => {
+            interceptBom(dependencies)
 
             cy.get('[data-nav="application-dependencies"]').click()
             cy.wait('@getExternalDependency')
@@ -191,7 +183,7 @@ describe('FlowForge - Application - Dependencies', () => {
 
             // can search by instance type
             cy.get('[data-form="search"] input').type('instance')
-            cy.get('[data-el="dependency-item"]').should('have.length', 4)
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
 
             cy.contains('x Devices').should('not.exist')
 
@@ -203,17 +195,8 @@ describe('FlowForge - Application - Dependencies', () => {
             cy.contains('x Instances').should('not.exist')
         })
 
-        it('have access to the dependencies tab and can search by package name', () => {
-            cy.intercept('GET', 'https://registry.npmjs.com/**', {
-                'dist-tags': {
-                    latest: 'x.x.x'
-                },
-                time: {
-                    modified: new Date()
-                }
-            }
-            ).as('getExternalDependency')
-            interceptBom(dependencies.dependencies)
+        it('should have access to the dependencies tab and can search by package name', () => {
+            interceptBom(dependencies)
 
             cy.get('[data-nav="application-dependencies"]').click()
             cy.wait('@getExternalDependency')
@@ -229,17 +212,8 @@ describe('FlowForge - Application - Dependencies', () => {
             cy.get('[data-el="dependency-item"]').should('have.length', 2)
         })
 
-        it('have access to the dependencies tab and can search by package version', () => {
-            cy.intercept('GET', 'https://registry.npmjs.com/**', {
-                'dist-tags': {
-                    latest: 'x.x.x'
-                },
-                time: {
-                    modified: new Date()
-                }
-            }
-            ).as('getExternalDependency')
-            interceptBom(dependencies.dependencies)
+        it('should have access to the dependencies tab and can search by package version', () => {
+            interceptBom(dependencies)
 
             cy.get('[data-nav="application-dependencies"]').click()
             cy.wait('@getExternalDependency')
@@ -254,5 +228,42 @@ describe('FlowForge - Application - Dependencies', () => {
             cy.get('[data-form="search"] input').type('1.1.1')
             cy.get('[data-el="dependency-item"]').should('have.length', 2)
         })
+
+        it('should correctly display the status pill for devices and instances', () => {
+            interceptBom(dependencies)
+
+            cy.get('[data-nav="application-dependencies"]').click()
+            cy.wait('@getExternalDependency')
+
+            // check that we have an instance running status
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="1.1.1"] [data-el="status-badge-running"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="1.1.1"] [data-el="status-badge-running"]').contains('running')
+
+            // check that we have an instance suspended status
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-el="versions-list"][data-item="5.5.5"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="5.5.5"] [data-el="status-badge-suspended"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="5.5.5"] [data-el="status-badge-suspended"]').contains('suspended')
+
+            // check that we don't have an instance status pill of we don't receive it in the payload
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="instance-4"] [data-el="status-badge-suspended"]').should('not.exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="instance-4"] [data-el="status-badge-running"]').should('not.exist')
+
+            // check that we have a device running status
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-el="versions-list"][data-item="7.7.7"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-item="device-1"] [data-el="status-badge-running"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-item="device-1"] [data-el="status-badge-running"]').contains('running')
+
+            // check that we have a device suspended status
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-4"] [data-el="status-badge-suspended"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-4"] [data-el="status-badge-suspended"]').contains('suspended')
+
+            // check that we don't have a device status pill of we don't receive it in the payload
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-3"] [data-el="status-badge-suspended"]').should('not.exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-3"] [data-el="status-badge-suspended"]').should('not.exist')
+        })
     })
 })
diff --git a/test/e2e/frontend/cypress/tests-ee/team/bill-of-materials.spec.js b/test/e2e/frontend/cypress/tests-ee/team/bill-of-materials.spec.js
new file mode 100644
index 0000000000..a22424cc7e
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests-ee/team/bill-of-materials.spec.js
@@ -0,0 +1,300 @@
+import dependencies from '../../fixtures/bill-of-materials/team-dependencies.json'
+const interceptBom = (dependencies = []) => {
+    cy.intercept('GET', '/api/*/teams/*/bom', [...dependencies]).as('getBom')
+}
+
+describe('Team - Bill Of Materials', () => {
+    describe('Bill of Materials disabled teams', () => {
+        it('should have access to the team bill of materials menu entry and page', () => {
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').should('exist')
+            cy.get('[data-nav="team-bom"] [data-el="premium-feature"]').should('exist')
+
+            cy.get('[data-nav="team-bom"]').click()
+
+            cy.url().should('include', 'bill-of-materials')
+
+            cy.get('[data-el="page-name"]').contains('Bill Of Materials')
+
+            cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
+
+            cy.contains('Bill Of Materials not available!')
+        })
+    })
+
+    describe('Bill of Materials enabled teams', () => {
+        beforeEach(() => {
+            cy.intercept('GET', '/api/*/teams/*', req => req.reply(res => {
+                res.send({
+                    ...res.body,
+                    type: {
+                        ...res.body.type,
+                        properties: {
+                            ...res.body.type.properties,
+                            features: {
+                                ...res.body.type.properties.features,
+                                bom: true
+                            }
+                        }
+                    }
+                })
+            }))
+            cy.intercept('GET', 'https://registry.npmjs.com/**', {
+                statusCode: 200,
+                body: {
+                    'dist-tags': {
+                        latest: 'x.x.x'
+                    },
+                    time: {
+                        modified: new Date()
+                    },
+                    versions: {
+                        'x.x.x': {
+                            version: 'N/A'
+                        }
+                    }
+                }
+            }).as('getExternalDependency')
+        })
+
+        it('should display the bom menu entry, not redirect for team owners', () => {
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').should('exist')
+            cy.get('[data-nav="team-bom"] [data-el="premium-feature"]').should('not.exist')
+
+            cy.get('[data-nav="team-bom"]').click()
+
+            cy.url().should('include', 'bill-of-materials')
+
+            cy.get('[data-el="page-name"]').contains('Bill Of Materials')
+
+            cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('not.exist')
+
+            cy.contains('No Dependencies Here... Yet!')
+        })
+
+        it('should redirect member users away and not display the menu entry for the bom page', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 30 })
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            // navigate away from applications page to verify redirect
+            cy.get('[data-nav="team-instances"]').click()
+
+            cy.get('[data-nav="team-bom"]').should('not.exist')
+
+            cy.visit('/team/ateam/bill-of-materials')
+
+            cy.url().should('include', 'applications')
+        })
+
+        it('should redirect viewer users away and not display the menu entry for the bom page', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 10 })
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            // navigate away from applications page to verify redirect
+            cy.get('[data-nav="team-instances"]').click()
+
+            cy.get('[data-nav="team-bom"]').should('not.exist')
+
+            cy.visit('/team/ateam/bill-of-materials')
+
+            cy.url().should('include', 'applications')
+        })
+
+        it('should redirect dashboard users away and not display the menu entry for the bom page', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 5 })
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').should('not.exist')
+        })
+
+        it('should have access to the dependencies tab and can search by name', () => {
+            interceptBom(dependencies)
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').click()
+
+            cy.wait('@getExternalDependency')
+
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
+
+            // can search by instance name
+            cy.get('[data-form="search"] input').type('instance-x')
+            cy.get('[data-el="dependency-item"]').should('have.length', 0)
+            cy.contains('Oops! We couldn\'t find any matching results.')
+
+            cy.get('[data-form="search"] input').clear()
+            cy.get('[data-form="search"] input').type('instance-1')
+            cy.get('[data-el="dependency-item"]').should('have.length', 3)
+
+            cy.get('[data-el="dependency-item"]').contains('@package/dep-1').click()
+            cy.get('[data-el="dependency-item"]').contains('@package/dep-1')
+                .parent()
+                .parent()
+                .parent()
+                .within(() => {
+                    cy.get('[data-el="versions-list"] button').click()
+                    cy.get('[data-el="versions-list"] button').contains('1 x Instances')
+                    cy.get('[data-el="versions-list"]')
+                        .within(() => {
+                            cy.get('[data-el="instance-item"]').should('have.length', 1)
+                            cy.contains('instance-1')
+                            cy.contains('My First App')
+                        })
+                })
+
+            cy.get('[data-el="dependency-item"]').contains('@package/var-2').click()
+            cy.get('[data-el="dependency-item"]').contains('@package/var-2').parent()
+                .parent()
+                .parent()
+                .within(() => {
+                    cy.get('[data-el="versions-list"] button').click()
+                    cy.get('[data-el="versions-list"] button').contains('1 x Instances')
+                    cy.get('[data-el="versions-list"]')
+                        .within(() => {
+                            cy.get('[data-el="instance-item"]').should('have.length', 1)
+                            cy.contains('instance-1')
+                            cy.contains('My First App')
+                        })
+                })
+
+            cy.get('[data-el="dependency-item"]').contains('@external/sem-3').click()
+            cy.get('[data-el="dependency-item"]').contains('@external/sem-3')
+                .parent()
+                .parent()
+                .parent()
+                .within(() => {
+                    cy.get('[data-el="versions-list"] button').click()
+                    cy.get('[data-el="versions-list"] button').contains('1 x Instances')
+                    cy.get('[data-el="versions-list"]')
+                        .within(() => {
+                            cy.get('[data-el="instance-item"]').should('have.length', 1)
+                            cy.contains('instance-1')
+                            cy.contains('My First App')
+                        })
+                })
+        })
+
+        it('should have access to the dependencies tab and can search by instance type', () => {
+            interceptBom(dependencies)
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').click()
+            cy.wait('@getExternalDependency')
+
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
+
+            // can search by instance type
+            cy.get('[data-form="search"] input').type('instance')
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
+
+            cy.contains('x Devices').should('not.exist')
+
+            // can search by instance type
+            cy.get('[data-form="search"] input').clear()
+            cy.get('[data-form="search"] input').type('device')
+            cy.get('[data-el="dependency-item"]').should('have.length', 3)
+
+            cy.contains('x Instances').should('not.exist')
+        })
+
+        it('should have access to the dependencies tab and can search by package name', () => {
+            interceptBom(dependencies)
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').click()
+            cy.wait('@getExternalDependency')
+
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
+
+            // can search by package name
+            cy.get('[data-form="search"] input').type('@lonely/package-1')
+            cy.get('[data-el="dependency-item"]').should('have.length', 1)
+
+            cy.get('[data-form="search"] input').clear()
+            cy.get('[data-form="search"] input').type('var')
+            cy.get('[data-el="dependency-item"]').should('have.length', 2)
+        })
+
+        it('should have access to the dependencies tab and can search by package version', () => {
+            interceptBom(dependencies)
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').click()
+            cy.wait('@getExternalDependency')
+
+            cy.get('[data-el="dependency-item"]').should('have.length', 5)
+
+            // can search by package version
+            cy.get('[data-form="search"] input').type('4.4.4')
+            cy.get('[data-el="dependency-item"]').should('have.length', 1)
+
+            cy.get('[data-form="search"] input').clear()
+            cy.get('[data-form="search"] input').type('1.1.1')
+            cy.get('[data-el="dependency-item"]').should('have.length', 2)
+        })
+
+        it('should correctly display the status pill for devices and instances', () => {
+            interceptBom(dependencies)
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-bom"]').click()
+            cy.wait('@getExternalDependency')
+
+            // cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] .dependency-header').click()
+
+            // check that we have an instance running status
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] .dependency-header').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="1.1.1"] [data-el="status-badge-running"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="1.1.1"] [data-el="status-badge-running"]').contains('running')
+
+            // check that we have an instance suspended status
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-el="versions-list"][data-item="5.5.5"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="5.5.5"] [data-el="status-badge-suspended"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/dep-1"] [data-item="5.5.5"] [data-el="status-badge-suspended"]').contains('suspended')
+
+            // check that we don't have an instance status pill of we don't receive it in the payload
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] .dependency-header').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="instance-4"] [data-el="status-badge-suspended"]').should('not.exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="instance-4"] [data-el="status-badge-running"]').should('not.exist')
+
+            // check that we have a device running status
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] .dependency-header').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-el="versions-list"][data-item="7.7.7"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-item="device-1"] [data-el="status-badge-running"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@package/var-2"] [data-item="device-1"] [data-el="status-badge-running"]').contains('running')
+
+            // check that we have a device suspended status
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-4"] [data-el="status-badge-suspended"]').should('exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-4"] [data-el="status-badge-suspended"]').contains('suspended')
+
+            // check that we don't have a device status pill of we don't receive it in the payload
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-el="versions-list"][data-item="1.1.1"]').click()
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-3"] [data-el="status-badge-suspended"]').should('not.exist')
+            cy.get('[data-el="dependency-item"][data-item="@some-package/var"] [data-item="device-3"] [data-el="status-badge-suspended"]').should('not.exist')
+        })
+    })
+})
diff --git a/test/e2e/frontend/cypress/tests/components/accordian.spec.js b/test/e2e/frontend/cypress/tests/components/accordian.spec.js
index b93236d79b..0871fed4bc 100644
--- a/test/e2e/frontend/cypress/tests/components/accordian.spec.js
+++ b/test/e2e/frontend/cypress/tests/components/accordian.spec.js
@@ -32,9 +32,9 @@ describe('FlowForge - Accordion Component', () => {
 
         cy.get('[data-el="accordion"]').should('exist')
         cy.get('[data-el="accordion"] span').contains('1 Event')
-        cy.get('[data-el="accordion"] .ff-accordion--content').should('be.visible')
+        cy.get('[data-el="accordion"] .ff-accordion--content').should('exist')
         cy.get('[data-el="accordion"] button').click()
-        cy.get('[data-el="accordion"] .ff-accordion--content').should('not.be.visible')
+        cy.get('[data-el="accordion"] .ff-accordion--content').should('not.exist')
         // cy.get('[data-el="accordion"] .ff-accordion--content').should('have.css', 'max-height').should('equal', '0px')
     })
 })
diff --git a/test/e2e/frontend/cypress/tests/team/bill-of-materials.spec.js b/test/e2e/frontend/cypress/tests/team/bill-of-materials.spec.js
new file mode 100644
index 0000000000..b800c7bb19
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/team/bill-of-materials.spec.js
@@ -0,0 +1,19 @@
+describe('Team - Bill Of Materials', () => {
+    it('should have access to the team bill of materials menu entry and page', () => {
+        cy.login('alice', 'aaPassword')
+        cy.home()
+
+        cy.get('[data-nav="team-bom"]').should('exist')
+        cy.get('[data-nav="team-bom"] [data-el="premium-feature"]').should('exist')
+
+        cy.get('[data-nav="team-bom"]').click()
+
+        cy.url().should('include', 'bill-of-materials')
+
+        cy.get('[data-el="page-name"]').contains('Bill Of Materials')
+
+        cy.get('[data-el="page-banner-feature-unavailable"]').should('exist')
+
+        cy.contains('Bill Of Materials not available!')
+    })
+})