diff --git a/frontend/src/api/projectHistory.js b/frontend/src/api/projectHistory.js
new file mode 100644
index 0000000000..54ee13d1d6
--- /dev/null
+++ b/frontend/src/api/projectHistory.js
@@ -0,0 +1,16 @@
+import paginateUrl from '../utils/paginateUrl.js'
+
+import client from './client.js'
+
+const getHistory = async (instanceId, cursor = undefined, limit = 10) => {
+    const url = paginateUrl(`/api/v1/projects/${instanceId}/history`, cursor, limit)
+
+    return await client.get(url)
+        .then(res => {
+            return res.data
+        })
+}
+
+export default {
+    getHistory
+}
diff --git a/frontend/src/components/DevicesBrowser.vue b/frontend/src/components/DevicesBrowser.vue
index e078ba743b..df0db31e85 100644
--- a/frontend/src/components/DevicesBrowser.vue
+++ b/frontend/src/components/DevicesBrowser.vue
@@ -340,7 +340,7 @@ import DeviceLink from '../pages/application/components/cells/DeviceLink.vue'
 import Snapshot from '../pages/application/components/cells/Snapshot.vue'
 
 import DeviceLastSeenBadge from '../pages/device/components/DeviceLastSeenBadge.vue'
-import SnapshotAssignDialog from '../pages/instance/Snapshots/dialogs/SnapshotAssignDialog.vue'
+import SnapshotAssignDialog from '../pages/instance/VersionHistory/Snapshots/dialogs/SnapshotAssignDialog.vue'
 import InstanceStatusBadge from '../pages/instance/components/InstanceStatusBadge.vue'
 import DeviceAssignApplicationDialog from '../pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue'
 import DeviceAssignInstanceDialog from '../pages/team/Devices/dialogs/DeviceAssignInstanceDialog.vue'
diff --git a/frontend/src/components/SectionTopMenu.vue b/frontend/src/components/SectionTopMenu.vue
index df5a9e3bdc..9a651a450a 100644
--- a/frontend/src/components/SectionTopMenu.vue
+++ b/frontend/src/components/SectionTopMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="ff-section-header flex flex-nowrap border-b border-gray-400 mb-4 sm:mb-2 text-gray-500 justify-between h-12">
-        <div class="w-full wrapper flex items-center md:w-auto mb-2 gap-x-2">
+        <div class="w-full wrapper flex md:w-auto mb-2 gap-x-2">
             <div class="flex gap-2 items-center">
                 <slot name="hero">
                     <div class="flex">
@@ -9,7 +9,7 @@
                 </slot>
                 <InformationCircleIcon v-if="hasInfoDialog" class="min-w-[20px] ff-icon text-gray-800 cursor-pointer hover:text-blue-700" @click="openInfoDialog()" />
             </div>
-            <span v-if="info" class="hidden sm:block text-gray-400 info">{{ info }}</span>
+            <div v-if="info" class="hidden sm:block text-gray-400 info">{{ info }}</div>
             <div class="actions">
                 <ul v-if="options.length > 0" class="flex">
                     <li v-for="item in options" :key="item.name" class="mr-8 pt-1 flex">
@@ -88,12 +88,12 @@ export default {
 <style lang="scss">
 .wrapper {
     flex: 1;
-    align-items: baseline;
 
     .info {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        align-self:center;
     }
 
     .actions {
diff --git a/frontend/src/components/dialogs/SnapshotEditDialog.vue b/frontend/src/components/dialogs/SnapshotEditDialog.vue
index 46b6e6c4bd..550869f134 100644
--- a/frontend/src/components/dialogs/SnapshotEditDialog.vue
+++ b/frontend/src/components/dialogs/SnapshotEditDialog.vue
@@ -18,7 +18,7 @@
         </template>
         <template #actions>
             <ff-button kind="secondary" data-action="dialog-cancel" :disabled="submitted" @click="cancel()">Cancel</ff-button>
-            <ff-button :kind="kind" data-action="dialog-confirm" :disabled="!formValid" @click="confirm()">Update</ff-button>
+            <ff-button kind="primary" data-action="dialog-confirm" :disabled="!formValid" @click="confirm()">Update</ff-button>
         </template>
     </ff-dialog>
 </template>
diff --git a/frontend/src/composables/Ux.js b/frontend/src/composables/Ux.js
index 8d50a84c4c..772015725f 100644
--- a/frontend/src/composables/Ux.js
+++ b/frontend/src/composables/Ux.js
@@ -1,3 +1,18 @@
+/**
+ *
+ * @param {Element} $el
+ * @param {'auto' || 'instant' || 'smooth'} behavior
+ * @param {number}  top - Specifies the number of pixels along the Y axis to scroll the window or element.
+ * @param {number} left - Specifies the number of pixels along the X axis to scroll the window or element.
+ */
+export function scrollTo ($el, {
+    behavior = 'smooth',
+    top = 0,
+    left = 0
+} = {}) {
+    $el.scrollTo({ behavior, top, left })
+}
+
 /**
  *
  * @param {Element} $el
diff --git a/frontend/src/mixins/Features.js b/frontend/src/mixins/Features.js
index bd0d344f7b..fb8fe999a1 100644
--- a/frontend/src/mixins/Features.js
+++ b/frontend/src/mixins/Features.js
@@ -43,7 +43,7 @@ export default {
             return this.isStaticAssetFeatureEnabledForPlatform && this.isStaticAssetsFeatureEnabledForTeam
         },
         isHTTPBearerTokensFeatureEnabledForTeam () {
-            return this.settings.features.httpBearerTokens && this.team.type.properties.features.teamHttpSecurity
+            return this.settings?.features.httpBearerTokens && this.team.type.properties.features.teamHttpSecurity
         },
         isBOMFeatureEnabledForPlatform () {
             return !!this.features.bom
@@ -53,6 +53,15 @@ export default {
         },
         isBOMFeatureEnabled () {
             return this.isBOMFeatureEnabledForPlatform && this.isBOMFeatureEnabledForTeam
+        },
+        isTimelineFeatureEnabledForPlatform () {
+            return !!this.features.projectHistory
+        },
+        isTimelineFeatureEnabledForTeam () {
+            return !!this.team?.type?.properties?.features?.projectHistory
+        },
+        isTimelineFeatureEnabled () {
+            return this.isTimelineFeatureEnabledForPlatform && this.isTimelineFeatureEnabledForTeam
         }
     }
 }
diff --git a/frontend/src/mixins/Snapshots.js b/frontend/src/mixins/Snapshots.js
new file mode 100644
index 0000000000..2deb03a08b
--- /dev/null
+++ b/frontend/src/mixins/Snapshots.js
@@ -0,0 +1,116 @@
+import InstanceApi from '../api/instances.js'
+import SnapshotApi from '../api/projectSnapshots.js'
+import SnapshotsApi from '../api/snapshots.js'
+import { downloadData } from '../composables/Download.js'
+import Alerts from '../services/alerts.js'
+import Dialog from '../services/dialog.js'
+import Product from '../services/product.js'
+
+export default {
+    methods: {
+        showViewSnapshotDialog (snapshot) {
+            Product.capture('ff-snapshot-view', {
+                'snapshot-id': snapshot.id
+            }, {
+                instance: this.instance?.id
+            })
+            SnapshotsApi.getFullSnapshot(snapshot.id).then((data) => {
+                this.$refs.snapshotViewerDialog.show(data)
+            }).catch(err => {
+                console.error(err)
+                Alerts.emit('Failed to get snapshot.', 'warning')
+            })
+        },
+        // snapshot actions - rollback
+        showRollbackDialog (snapshot, alterLoadingState = false) {
+            return new Promise((resolve) => {
+                Dialog.show({
+                    header: 'Restore Snapshot',
+                    kind: 'danger',
+                    text: `This will overwrite the current instance.
+                       All changes to the flows, settings and environment variables made since the last snapshot will be lost.
+                       Are you sure you want to deploy to this snapshot?`,
+                    confirmLabel: 'Confirm'
+                }, async () => {
+                    if (alterLoadingState) this.loading = true
+                    return SnapshotApi.rollbackSnapshot(this.instance.id, snapshot.id)
+                        .then(() => {
+                            Alerts.emit('Successfully deployed snapshot.', 'confirmation')
+                            resolve()
+                        })
+                })
+            })
+        },
+        showCompareSnapshotDialog (snapshot) {
+            Product.capture('ff-snapshot-compare', {
+                'snapshot-id': snapshot.id
+            }, {
+                instance: this.instance?.id
+            })
+            SnapshotsApi.getFullSnapshot(snapshot.id)
+                .then((data) => this.$refs.snapshotCompareDialog.show(data, this.snapshotList))
+                .catch(err => {
+                    console.error(err)
+                    Alerts.emit('Failed to get snapshot.', 'warning')
+                })
+        },
+        showDownloadSnapshotDialog (snapshot) {
+            this.$refs.snapshotExportDialog.show(snapshot)
+        },
+        async downloadSnapshotPackage (snapshot) {
+            Product.capture('ff-snapshot-download', {
+                'snapshot-id': snapshot.id
+            }, {
+                instance: this.instance?.id
+            })
+            const ss = await SnapshotsApi.getSummary(snapshot.id)
+            const owner = ss.device || ss.project
+            const ownerType = ss.device ? 'device' : 'instance'
+            const packageJSON = {
+                name: `${owner.safeName || owner.name}`.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase(),
+                description: `${ownerType} snapshot, ${snapshot.name} - ${snapshot.description}`,
+                private: true,
+                version: '0.0.0-' + snapshot.id,
+                dependencies: ss.modules || {}
+            }
+            downloadData(packageJSON, 'package.json')
+        },
+        // snapshot actions - delete
+        showDeleteSnapshotDialog (snapshot) {
+            return new Promise((resolve) => {
+                Dialog.show({
+                    header: 'Delete Snapshot',
+                    text: 'Are you sure you want to delete this snapshot?',
+                    kind: 'danger',
+                    confirmLabel: 'Delete'
+                }, async () => {
+                    await SnapshotsApi.deleteSnapshot(snapshot.id)
+                    if (this.snapshots) {
+                        const index = this.snapshots.indexOf(snapshot)
+                        this.snapshots.splice(index, 1)
+                    }
+                    Alerts.emit('Successfully deleted snapshot.', 'confirmation')
+                    resolve()
+                })
+            })
+        },
+        showEditSnapshotDialog (snapshot) {
+            this.$refs.snapshotEditDialog.show(snapshot)
+        },
+        // snapshot actions - set as device target
+        showDeviceTargetDialog (snapshot) {
+            Dialog.show({
+                header: 'Set Device Target Snapshot',
+                text: `Are you sure you want to set this snapshot as the device target?
+                       All devices assigned to this instance will be restarted on this snapshot.`,
+                confirmLabel: 'Set Target'
+            }, async () => {
+                await InstanceApi.updateInstanceDeviceSettings(this.instance.id, {
+                    targetSnapshot: snapshot.id
+                })
+                Alerts.emit('Successfully set device target.', 'confirmation')
+                this.$emit('instance-updated')
+            })
+        }
+    }
+}
diff --git a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
index 0b8ce8bb41..32e1b2583c 100644
--- a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
+++ b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
@@ -116,8 +116,9 @@
                     <FormRow v-model="input.properties.features.staticAssets" type="checkbox">Static Assets</FormRow>
                     <FormRow v-model="input.properties.features.bom" type="checkbox">Bill of Materials / Dependencies</FormRow>
                     <FormRow v-model="input.properties.features.teamBroker" type="checkbox">Team Broker</FormRow>
+                    <FormRow v-model="input.properties.features.projectHistory" type="checkbox">Version History Timeline</FormRow>
                     <!-- to make the grid work nicely, only needed if there is an odd number of checkbox features above-->
-                    <span />
+                    <!--                    <span />-->
                     <FormRow v-model="input.properties.features.fileStorageLimit">Persistent File storage limit (Mb)</FormRow>
                     <FormRow v-model="input.properties.features.contextLimit">Persistent Context storage limit (Mb)</FormRow>
                 </div>
@@ -236,6 +237,9 @@ export default {
                     if (this.input.properties.features.customHostnames === undefined) {
                         this.input.properties.features.customHostnames = false
                     }
+                    if (this.input.properties.features.projectHistory === undefined) {
+                        this.input.properties.features.projectHistory = false
+                    }
                 } else {
                     this.editDisabled = false
                     this.input = {
diff --git a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
index b2aedb29f3..e45e9ac07c 100644
--- a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
+++ b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
@@ -131,7 +131,7 @@ export default {
                 snapshotsApi.exportSnapshot(this.snapshot.id, opts).then((data) => {
                     return data
                 }).then(data => {
-                    const snapshotDate = this.snapshot.updatedAt.replace(/[-:]/g, '').replace(/\..*$/, '').replace('T', '-')
+                    const snapshotDate = data.updatedAt.replace(/[-:]/g, '').replace(/\..*$/, '').replace('T', '-')
                     downloadData(data, `snapshot-${this.snapshot.id}-${snapshotDate}.json`)
                     alerts.emit('Snapshot exported.', 'confirmation')
                     this.$refs.dialog.close()
diff --git a/frontend/src/pages/instance/Editor/index.vue b/frontend/src/pages/instance/Editor/index.vue
index 8a17a20722..107b30ce8f 100644
--- a/frontend/src/pages/instance/Editor/index.vue
+++ b/frontend/src/pages/instance/Editor/index.vue
@@ -112,6 +112,18 @@ export default {
     computed: {
         navigation () {
             if (!this.instance.id) return []
+            let versionHistoryRoute
+            if (!this.isTimelineFeatureEnabled) {
+                versionHistoryRoute = {
+                    name: 'instance-editor-snapshots',
+                    params: { id: this.instance.id }
+                }
+            } else {
+                versionHistoryRoute = {
+                    name: 'instance-editor-version-history',
+                    params: { id: this.instance.id }
+                }
+            }
             return [
                 {
                     label: 'Overview',
@@ -124,9 +136,9 @@ export default {
                     tag: 'instance-remote'
                 },
                 {
-                    label: 'Snapshots',
-                    to: { name: 'instance-editor-snapshots', params: { id: this.instance.id } },
-                    tag: 'instance-snapshots'
+                    label: 'Version History',
+                    to: versionHistoryRoute,
+                    tag: 'instance-version-history'
                 },
                 {
                     label: 'Assets',
diff --git a/frontend/src/pages/instance/Editor/routes.js b/frontend/src/pages/instance/Editor/routes.js
index b214fd17f8..e806f37f9e 100644
--- a/frontend/src/pages/instance/Editor/routes.js
+++ b/frontend/src/pages/instance/Editor/routes.js
@@ -1,5 +1,7 @@
 import InstanceSettings from '../Settings/index.vue'
 import InstanceSettingsRoutes from '../Settings/routes.js'
+import VersionHistory from '../VersionHistory/index.vue'
+import VersionHistoryRoutes from '../VersionHistory/routes.js'
 import { children } from '../routes.js'
 
 import InstanceEditor from './index.vue'
@@ -17,7 +19,7 @@ export default [
             return { name: 'instance-editor-overview', params: { id: to.params.id } }
         },
         children: [
-            ...children.filter(child => !['settings'].includes(child.path)).map(child => {
+            ...children.filter(child => !['settings', 'version-history'].includes(child.path)).map(child => {
                 return {
                     ...child,
                     name: child.name.replace('instance-', 'instance-editor-')
@@ -33,12 +35,34 @@ export default [
                 redirect: to => {
                     return { name: 'instance-editor-settings-general', params: { id: to.params.id } }
                 },
-                children: [...InstanceSettingsRoutes.map(child => {
-                    return {
-                        ...child,
-                        name: child.name.replace('instance-settings', 'instance-editor-settings')
-                    }
-                })]
-            }]
+                children: [
+                    ...InstanceSettingsRoutes.map(child => {
+                        return {
+                            ...child,
+                            name: child.name.replace('instance-settings', 'instance-editor-settings')
+                        }
+                    })
+                ]
+            },
+            {
+                path: 'version-history',
+                name: 'instance-editor-version-history',
+                component: VersionHistory,
+                meta: {
+                    title: 'Instance - Version History'
+                },
+                redirect: to => {
+                    return { name: 'instance-editor-version-history-timeline', params: { id: to.params.id } }
+                },
+                children: [
+                    ...VersionHistoryRoutes.map(child => {
+                        return {
+                            ...child,
+                            name: child.name.replace('instance-', 'instance-editor-')
+                        }
+                    })
+                ]
+            }
+        ]
     }
 ]
diff --git a/frontend/src/pages/instance/Snapshots/index.vue b/frontend/src/pages/instance/Snapshots/index.vue
deleted file mode 100644
index ba725958c0..0000000000
--- a/frontend/src/pages/instance/Snapshots/index.vue
+++ /dev/null
@@ -1,343 +0,0 @@
-<template>
-    <div class="mb-3">
-        <SectionTopMenu hero="Snapshots" help-header="FlowFuse - Snapshots">
-            <template #helptext>
-                <p>Snapshots generate a point-in-time backup of your Node-RED flow, credentials and runtime settings.</p>
-                <p>Snapshots are also required for deploying to devices. In the Deployments page of a Project, you can define your “Target Snapshot”, which will then be deployed to all connected devices.</p>
-                <p>You can also generate Snapshots directly from any instance of Node-RED using the <a target="_blank" href="https://github.com/FlowFuse/nr-tools-plugin">FlowFuse NR Tools Plugin.</a></p>
-            </template>
-        </SectionTopMenu>
-    </div>
-    <div class="space-y-6">
-        <ff-loading v-if="loading" message="Loading Snapshots..." />
-        <template v-if="snapshots.length > 0">
-            <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
-            <ff-data-table data-el="snapshots" class="space-y-4 mb-14" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
-                <template v-if="hasPermission('project:snapshot:create')" #actions>
-                    <ff-button v-if="hasPermission('snapshot:import')" kind="secondary" data-action="import-snapshot" :disabled="busy" @click="showImportSnapshotDialog"><template #icon-left><UploadIcon /></template>Upload Snapshot</ff-button>
-                    <ff-button kind="primary" data-action="create-snapshot" :disabled="busy" @click="showCreateSnapshotDialog"><template #icon-left><PlusSmIcon /></template>Create Snapshot</ff-button>
-                </template>
-                <template #context-menu="{row}">
-                    <ff-list-item :disabled="!hasPermission('project:snapshot:rollback')" label="Restore Snapshot" @click="showRollbackDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('snapshot:edit')" label="Edit Snapshot" @click="showEditSnapshotDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('snapshot:full')" label="View Snapshot" @click="showViewSnapshotDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('snapshot:full')" label="Compare Snapshot..." @click="showCompareSnapshotDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('project:snapshot:export')" label="Download Snapshot" @click="showDownloadSnapshotDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('project:snapshot:read')" label="Download package.json" @click="downloadSnapshotPackage(row)" />
-                    <ff-list-item :disabled="!hasPermission('project:snapshot:set-target')" label="Set as Device Target" @click="showDeviceTargetDialog(row)" />
-                    <ff-list-item :disabled="!hasPermission('project:snapshot:delete')" label="Delete Snapshot" kind="danger" @click="showDeleteSnapshotDialog(row)" />
-                </template>
-            </ff-data-table>
-        </template>
-        <template v-else-if="!loading">
-            <EmptyState>
-                <template #img>
-                    <img src="../../../images/empty-states/instance-snapshots.png">
-                </template>
-                <template #header>Create your First Snapshot</template>
-                <template #message>
-                    <p>
-                        Snapshots are point-in-time backups of your Node-RED Instances
-                        and capture the flows, credentials and runtime settings.
-                    </p>
-                    <p>
-                        Snapshots are also used for deploying to your Devices. Devices have
-                        a set "Target Snapshot", which will roll out to all Devices connected
-                        to the respective Instance.
-                    </p>
-                </template>
-                <template v-if="hasPermission('project:snapshot:create')" #actions>
-                    <ff-button v-if="hasPermission('snapshot:import')" kind="secondary" data-action="import-snapshot" @click="showImportSnapshotDialog">
-                        <template #icon-left><UploadIcon /></template>Upload Snapshot
-                    </ff-button>
-                    <ff-button kind="primary" data-action="create-snapshot" @click="showCreateSnapshotDialog">
-                        <template #icon-left><PlusSmIcon /></template>Create Snapshot
-                    </ff-button>
-                </template>
-            </EmptyState>
-        </template>
-        <SnapshotCreateDialog ref="snapshotCreateDialog" data-el="dialog-create-snapshot" :project="instance" @snapshot-created="snapshotCreated" />
-        <SnapshotEditDialog ref="snapshotEditDialog" data-el="dialog-edit-snapshot" @snapshot-updated="onSnapshotEdit" />
-        <SnapshotExportDialog ref="snapshotExportDialog" data-el="dialog-export-snapshot" :project="instance" />
-        <SnapshotImportDialog ref="snapshotImportDialog" title="Upload Snapshot" data-el="dialog-import-snapshot" :owner="instance" owner-type="instance" @snapshot-import-success="onSnapshotImportSuccess" @snapshot-import-failed="onSnapshotImportFailed" @canceled="onSnapshotImportCancel" />
-        <AssetDetailDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
-        <AssetCompareDialog ref="snapshotCompareDialog" data-el="dialog-compare-snapshot" />
-    </div>
-</template>
-
-<script>
-import { PlusSmIcon, UploadIcon } from '@heroicons/vue/outline'
-import { markRaw } from 'vue'
-import { mapState } from 'vuex'
-
-import InstanceApi from '../../../api/instances.js'
-import SnapshotApi from '../../../api/projectSnapshots.js'
-import SnapshotsApi from '../../../api/snapshots.js'
-
-import EmptyState from '../../../components/EmptyState.vue'
-import SectionTopMenu from '../../../components/SectionTopMenu.vue'
-import AssetCompareDialog from '../../../components/dialogs/AssetCompareDialog.vue'
-import AssetDetailDialog from '../../../components/dialogs/AssetDetailDialog.vue'
-import SnapshotEditDialog from '../../../components/dialogs/SnapshotEditDialog.vue'
-import SnapshotImportDialog from '../../../components/dialogs/SnapshotImportDialog.vue'
-import UserCell from '../../../components/tables/cells/UserCell.vue'
-import { downloadData } from '../../../composables/Download.js'
-import permissionsMixin from '../../../mixins/Permissions.js'
-import Alerts from '../../../services/alerts.js'
-import Dialog from '../../../services/dialog.js'
-import Product from '../../../services/product.js'
-import { applySystemUserDetails } from '../../../transformers/snapshots.transformer.js'
-import DaysSince from '../../application/Snapshots/components/cells/DaysSince.vue'
-import DeviceCount from '../../application/Snapshots/components/cells/DeviceCount.vue'
-import SnapshotName from '../../application/Snapshots/components/cells/SnapshotName.vue'
-import SnapshotExportDialog from '../../application/Snapshots/components/dialogs/SnapshotExportDialog.vue'
-
-import SnapshotCreateDialog from './dialogs/SnapshotCreateDialog.vue'
-
-export default {
-    name: 'InstanceSnapshots',
-    components: {
-        SectionTopMenu,
-        EmptyState,
-        SnapshotCreateDialog,
-        SnapshotEditDialog,
-        SnapshotExportDialog,
-        SnapshotImportDialog,
-        PlusSmIcon,
-        UploadIcon,
-        AssetDetailDialog,
-        AssetCompareDialog
-    },
-    mixins: [permissionsMixin],
-    inheritAttrs: false,
-    props: {
-        instance: {
-            type: Object,
-            required: true
-        }
-    },
-    emits: ['instance-updated'],
-    data () {
-        return {
-            loading: false,
-            deviceCounts: {},
-            snapshots: [],
-            busyMakingSnapshot: false,
-            busyImportingSnapshot: false
-        }
-    },
-    computed: {
-        ...mapState('account', ['teamMembership']),
-        columns () {
-            const cols = [
-                {
-                    label: 'Snapshot',
-                    component: {
-                        is: markRaw(SnapshotName),
-                        extraProps: {
-                            targetSnapshot: this.instance.deviceSettings?.targetSnapshot
-                        }
-                    }
-                },
-                {
-                    label: '',
-                    component: {
-                        is: markRaw(DeviceCount),
-                        extraProps: {
-                            targetSnapshot: this.instance.deviceSettings?.targetSnapshot
-                        }
-                    }
-                },
-                {
-                    label: 'Created By',
-                    class: ['w-56'],
-                    component: {
-                        is: markRaw(UserCell),
-                        map: {
-                            avatar: 'user.avatar',
-                            name: 'user.name',
-                            username: 'user.username'
-                        }
-                    }
-                },
-                { label: 'Date Created', class: ['w-56'], component: { is: markRaw(DaysSince), map: { date: 'createdAt' } } }
-            ]
-            return cols
-        },
-        busy () {
-            return this.busyMakingSnapshot || this.busyImportingSnapshot
-        },
-        snapshotList () {
-            return this.snapshots.map(s => {
-                return {
-                    label: s.name,
-                    description: s.description || '',
-                    value: s.id
-                }
-            })
-        }
-    },
-    watch: {
-        'team.id': 'fetchData',
-        'instance.id': 'fetchData'
-    },
-    mounted () {
-        this.fetchData()
-    },
-    methods: {
-        fetchData: async function () {
-            if (this.instance.id) {
-                this.loading = true
-                const deviceCounts = await this.countDevices()
-                const data = await SnapshotApi.getInstanceSnapshots(this.instance.id) // TODO Move to instances?
-                this.snapshots = applySystemUserDetails(data.snapshots, this.instance).map((s) => {
-                    s.deviceCount = deviceCounts[s.id]
-                    return s
-                })
-                this.loading = false
-            }
-        },
-        async countDevices () {
-            // hardcoded device limit to ensure all are returned - feels dirty
-            const data = await InstanceApi.getInstanceDevices(this.instance.id, null, 10000000)
-            // map devices to snapshot deployed on that device
-            const deviceCounts = data.devices.reduce((acc, device) => {
-                const snapshot = device.activeSnapshot?.id
-                if (!acc[snapshot]) {
-                    acc[snapshot] = 1
-                } else {
-                    acc[snapshot]++
-                }
-                return acc
-            }, {})
-            return deviceCounts
-        },
-        // snapshot actions - delete
-        showDeleteSnapshotDialog (snapshot) {
-            Dialog.show({
-                header: 'Delete Snapshot',
-                text: 'Are you sure you want to delete this snapshot?',
-                kind: 'danger',
-                confirmLabel: 'Delete'
-            }, async () => {
-                await SnapshotsApi.deleteSnapshot(snapshot.id)
-                const index = this.snapshots.indexOf(snapshot)
-                this.snapshots.splice(index, 1)
-                Alerts.emit('Successfully deleted snapshot.', 'confirmation')
-            })
-        },
-        // snapshot actions - rollback
-        showRollbackDialog (snapshot) {
-            Dialog.show({
-                header: 'Restore Snapshot',
-                kind: 'danger',
-                text: `This will overwrite the current instance.
-                       All changes to the flows, settings and environment variables made since the last snapshot will be lost.
-                       Are you sure you want to deploy to this snapshot?`,
-                confirmLabel: 'Confirm'
-            }, async () => {
-                await SnapshotApi.rollbackSnapshot(this.instance.id, snapshot.id)
-                Alerts.emit('Successfully deployed snapshot.', 'confirmation')
-            })
-        },
-        // snapshot actions - set as device target
-        showDeviceTargetDialog (snapshot) {
-            Dialog.show({
-                header: 'Set Device Target Snapshot',
-                text: `Are you sure you want to set this snapshot as the device target?
-                       All devices assigned to this instance will be restarted on this snapshot.`,
-                confirmLabel: 'Set Target'
-            }, async () => {
-                await InstanceApi.updateInstanceDeviceSettings(this.instance.id, {
-                    targetSnapshot: snapshot.id
-                })
-                this.$emit('instance-updated')
-            })
-        },
-        showCreateSnapshotDialog () {
-            this.$refs.snapshotCreateDialog.show()
-        },
-        snapshotCreated (snapshot) {
-            this.snapshots.unshift(snapshot)
-            // on next tick, update the table data to ensure
-            // the new snapshot is shown and the correct status are shown
-            this.$emit('instance-updated')
-        },
-        async downloadSnapshotPackage (snapshot) {
-            Product.capture('ff-snapshot-download', {
-                'snapshot-id': snapshot.id
-            }, {
-                instance: this.instance?.id
-            })
-            const ss = await SnapshotsApi.getSummary(snapshot.id)
-            const owner = ss.device || ss.project
-            const ownerType = ss.device ? 'device' : 'instance'
-            const packageJSON = {
-                name: `${owner.safeName || owner.name}`.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase(),
-                description: `${ownerType} snapshot, ${snapshot.name} - ${snapshot.description}`,
-                private: true,
-                version: '0.0.0-' + snapshot.id,
-                dependencies: ss.modules || {}
-            }
-            downloadData(packageJSON, 'package.json')
-        },
-        showDownloadSnapshotDialog (snapshot) {
-            this.$refs.snapshotExportDialog.show(snapshot)
-        },
-        showViewSnapshotDialog (snapshot) {
-            Product.capture('ff-snapshot-view', {
-                'snapshot-id': snapshot.id
-            }, {
-                instance: this.instance?.id
-            })
-            SnapshotsApi.getFullSnapshot(snapshot.id).then((data) => {
-                this.$refs.snapshotViewerDialog.show(data)
-            }).catch(err => {
-                console.error(err)
-                Alerts.emit('Failed to get snapshot.', 'warning')
-            })
-        },
-        showCompareSnapshotDialog (snapshot) {
-            Product.capture('ff-snapshot-compare', {
-                'snapshot-id': snapshot.id
-            }, {
-                instance: this.instance?.id
-            })
-            SnapshotsApi.getFullSnapshot(snapshot.id)
-                .then((data) => this.$refs.snapshotCompareDialog.show(data, this.snapshotList))
-                .catch(err => {
-                    console.error(err)
-                    Alerts.emit('Failed to get snapshot.', 'warning')
-                })
-        },
-        // snapshot actions - import
-        showImportSnapshotDialog () {
-            this.busyImportingSnapshot = true
-            this.$refs.snapshotImportDialog.show()
-        },
-        onSnapshotImportSuccess (snapshot) {
-            this.snapshots.unshift(snapshot)
-            this.busyImportingSnapshot = false
-        },
-        onSnapshotImportFailed (err) {
-            console.error(err)
-            const message = err.response?.data?.error || 'Failed to import snapshot.'
-            Alerts.emit(message, 'warning')
-            this.busyImportingSnapshot = false
-        },
-        onSnapshotImportCancel () {
-            this.busyImportingSnapshot = false
-        },
-        showEditSnapshotDialog (snapshot) {
-            this.$refs.snapshotEditDialog.show(snapshot)
-        },
-        onSnapshotEdit (snapshot) {
-            const index = this.snapshots.findIndex(s => s.id === snapshot.id)
-            if (index >= 0) {
-                this.snapshots[index].name = snapshot.name
-                this.snapshots[index].description = snapshot.description
-            }
-        }
-    }
-}
-</script>
diff --git a/frontend/src/pages/instance/Snapshots/dialogs/SnapshotAssignDialog.vue b/frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotAssignDialog.vue
similarity index 94%
rename from frontend/src/pages/instance/Snapshots/dialogs/SnapshotAssignDialog.vue
rename to frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotAssignDialog.vue
index 6a10311b95..cbf32f92ee 100644
--- a/frontend/src/pages/instance/Snapshots/dialogs/SnapshotAssignDialog.vue
+++ b/frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotAssignDialog.vue
@@ -55,11 +55,11 @@
 </template>
 
 <script>
-import InstanceApi from '../../../../api/instances.js'
-import snapshotApi from '../../../../api/projectSnapshots.js'
+import InstanceApi from '../../../../../api/instances.js'
+import snapshotApi from '../../../../../api/projectSnapshots.js'
 
-import FormRow from '../../../../components/FormRow.vue'
-import alerts from '../../../../services/alerts.js'
+import FormRow from '../../../../../components/FormRow.vue'
+import alerts from '../../../../../services/alerts.js'
 
 export default {
     name: 'SnapshotAssignDialog',
diff --git a/frontend/src/pages/instance/Snapshots/dialogs/SnapshotCreateDialog.vue b/frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotCreateDialog.vue
similarity index 94%
rename from frontend/src/pages/instance/Snapshots/dialogs/SnapshotCreateDialog.vue
rename to frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotCreateDialog.vue
index 37b05480e8..4df56eb39e 100644
--- a/frontend/src/pages/instance/Snapshots/dialogs/SnapshotCreateDialog.vue
+++ b/frontend/src/pages/instance/VersionHistory/Snapshots/dialogs/SnapshotCreateDialog.vue
@@ -22,10 +22,10 @@
 
 import { QuestionMarkCircleIcon } from '@heroicons/vue/solid'
 
-import snapshotApi from '../../../../api/projectSnapshots.js'
+import snapshotApi from '../../../../../api/projectSnapshots.js'
 
-import FormRow from '../../../../components/FormRow.vue'
-import alerts from '../../../../services/alerts.js'
+import FormRow from '../../../../../components/FormRow.vue'
+import alerts from '../../../../../services/alerts.js'
 
 export default {
     name: 'SnapshotCreateDialog',
diff --git a/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
new file mode 100644
index 0000000000..47254ff605
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
@@ -0,0 +1,192 @@
+<template>
+    <div class="space-y-6">
+        <ff-loading v-if="loading" message="Loading Snapshots..." />
+        <template v-if="snapshots.length > 0 && !loading">
+            <!-- set mb-14 (~56px) on the form to permit access to kebab actions where hubspot chat covers it -->
+            <ff-data-table data-el="snapshots" class="space-y-4 mb-14" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
+                <template #context-menu="{row}">
+                    <ff-list-item :disabled="!hasPermission('project:snapshot:rollback')" label="Restore Snapshot" @click="showRollbackDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('snapshot:edit')" label="Edit Snapshot" @click="showEditSnapshotDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('snapshot:full')" label="View Snapshot" @click="showViewSnapshotDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('snapshot:full')" label="Compare Snapshot..." @click="showCompareSnapshotDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('project:snapshot:export')" label="Download Snapshot" @click="showDownloadSnapshotDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('project:snapshot:read')" label="Download package.json" @click="downloadSnapshotPackage(row)" />
+                    <ff-list-item :disabled="!hasPermission('project:snapshot:set-target')" label="Set as Device Target" @click="showDeviceTargetDialog(row)" />
+                    <ff-list-item :disabled="!hasPermission('project:snapshot:delete')" label="Delete Snapshot" kind="danger" @click="showDeleteSnapshotDialog(row)" />
+                </template>
+            </ff-data-table>
+        </template>
+        <template v-else-if="!loading">
+            <EmptyState>
+                <template #img>
+                    <img src="../../../../images/empty-states/instance-snapshots.png">
+                </template>
+                <template #header>Create your First Snapshot</template>
+                <template #message>
+                    <p>
+                        Snapshots are point-in-time backups of your Node-RED Instances
+                        and capture the flows, credentials and runtime settings.
+                    </p>
+                    <p>
+                        Snapshots are also used for deploying to your Devices. Devices have
+                        a set "Target Snapshot", which will roll out to all Devices connected
+                        to the respective Instance.
+                    </p>
+                </template>
+            </EmptyState>
+        </template>
+        <SnapshotEditDialog ref="snapshotEditDialog" data-el="dialog-edit-snapshot" @snapshot-updated="onSnapshotEdit" />
+        <SnapshotExportDialog ref="snapshotExportDialog" data-el="dialog-export-snapshot" :project="instance" />
+        <AssetDetailDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
+        <AssetCompareDialog ref="snapshotCompareDialog" data-el="dialog-compare-snapshot" />
+    </div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { mapState } from 'vuex'
+
+import InstanceApi from '../../../../api/instances.js'
+import SnapshotApi from '../../../../api/projectSnapshots.js'
+
+import EmptyState from '../../../../components/EmptyState.vue'
+import AssetCompareDialog from '../../../../components/dialogs/AssetCompareDialog.vue'
+import AssetDetailDialog from '../../../../components/dialogs/AssetDetailDialog.vue'
+import SnapshotEditDialog from '../../../../components/dialogs/SnapshotEditDialog.vue'
+import UserCell from '../../../../components/tables/cells/UserCell.vue'
+import permissionsMixin from '../../../../mixins/Permissions.js'
+import snapshotsMixin from '../../../../mixins/Snapshots.js'
+import { applySystemUserDetails } from '../../../../transformers/snapshots.transformer.js'
+import DaysSince from '../../../application/Snapshots/components/cells/DaysSince.vue'
+import DeviceCount from '../../../application/Snapshots/components/cells/DeviceCount.vue'
+import SnapshotName from '../../../application/Snapshots/components/cells/SnapshotName.vue'
+import SnapshotExportDialog from '../../../application/Snapshots/components/dialogs/SnapshotExportDialog.vue'
+
+export default {
+    name: 'InstanceSnapshots',
+    components: {
+        EmptyState,
+        SnapshotEditDialog,
+        SnapshotExportDialog,
+        AssetDetailDialog,
+        AssetCompareDialog
+    },
+    mixins: [permissionsMixin, snapshotsMixin],
+    inheritAttrs: false,
+    props: {
+        instance: {
+            type: Object,
+            required: true
+        }
+    },
+    emits: ['instance-updated', 'show-import-snapshot-dialog', 'show-create-snapshot-dialog'],
+    data () {
+        return {
+            loading: false,
+            deviceCounts: {},
+            snapshots: [],
+            busyMakingSnapshot: false,
+            busyImportingSnapshot: false
+        }
+    },
+    computed: {
+        ...mapState('account', ['teamMembership']),
+        columns () {
+            const cols = [
+                {
+                    label: 'Snapshot',
+                    component: {
+                        is: markRaw(SnapshotName),
+                        extraProps: {
+                            targetSnapshot: this.instance.deviceSettings?.targetSnapshot
+                        }
+                    }
+                },
+                {
+                    label: '',
+                    component: {
+                        is: markRaw(DeviceCount),
+                        extraProps: {
+                            targetSnapshot: this.instance.deviceSettings?.targetSnapshot
+                        }
+                    }
+                },
+                {
+                    label: 'Created By',
+                    class: ['w-56'],
+                    component: {
+                        is: markRaw(UserCell),
+                        map: {
+                            avatar: 'user.avatar',
+                            name: 'user.name',
+                            username: 'user.username'
+                        }
+                    }
+                },
+                { label: 'Date Created', class: ['w-56'], component: { is: markRaw(DaysSince), map: { date: 'createdAt' } } }
+            ]
+            return cols
+        },
+        busy () {
+            return this.busyMakingSnapshot || this.busyImportingSnapshot
+        },
+        snapshotList () {
+            return this.snapshots.map(s => {
+                return {
+                    label: s.name,
+                    description: s.description || '',
+                    value: s.id
+                }
+            })
+        }
+    },
+    watch: {
+        'team.id': 'fetchData',
+        instance: {
+            handler: function () {
+                this.fetchData(true)
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        this.fetchData()
+    },
+    methods: {
+        fetchData: async function (withoutAnimation = false) {
+            if (this.instance.id) {
+                if (!withoutAnimation) this.loading = true
+                const deviceCounts = await this.countDevices()
+                const data = await SnapshotApi.getInstanceSnapshots(this.instance.id) // TODO Move to instances?
+                this.snapshots = applySystemUserDetails(data.snapshots, this.instance).map((s) => {
+                    s.deviceCount = deviceCounts[s.id]
+                    return s
+                })
+                this.loading = false
+            }
+        },
+        async countDevices () {
+            // hardcoded device limit to ensure all are returned - feels dirty
+            const data = await InstanceApi.getInstanceDevices(this.instance.id, null, 10000000)
+            // map devices to snapshot deployed on that device
+            const deviceCounts = data.devices.reduce((acc, device) => {
+                const snapshot = device.activeSnapshot?.id
+                if (!acc[snapshot]) {
+                    acc[snapshot] = 1
+                } else {
+                    acc[snapshot]++
+                }
+                return acc
+            }, {})
+            return deviceCounts
+        },
+        onSnapshotEdit (snapshot) {
+            const index = this.snapshots.findIndex(s => s.id === snapshot.id)
+            if (index >= 0) {
+                this.snapshots[index].name = snapshot.name
+                this.snapshots[index].description = snapshot.description
+            }
+        }
+    }
+}
+</script>
diff --git a/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineEvent.vue b/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineEvent.vue
new file mode 100644
index 0000000000..a06b4e6b49
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineEvent.vue
@@ -0,0 +1,298 @@
+<template>
+    <div
+        class="event flex justify-between gap-1 items-center"
+        :class="{'is-snapshot': isSnapshot, 'load-more': isLoadMore}"
+        @click="loadMore"
+    >
+        <timeline-graph :event="event" :timeline="timeline" />
+
+        <template v-if="!isLoadMore">
+            <div class="body flex flex-1 justify-between gap-2 items-center">
+                <div class="content flex flex-1 flex-col justify-start">
+                    <component
+                        :is="title"
+                        class="title"
+                        @preview-snapshot="$emit('preview-snapshot', event.data.snapshot)"
+                        @preview-instance="openInstance"
+                    />
+                    <div class="details">
+                        <span>{{ shortTitle }}</span> | <span>{{ createdAt }}</span>
+                    </div>
+                </div>
+                <div class="username">
+                    {{ event.user.name }}
+                </div>
+            </div>
+            <div class="actions">
+                <ff-kebab-menu v-if="snapshotExists" ref="kebab" menu-align="right">
+                    <ff-list-item
+                        :disabled="!hasPermission('project:snapshot:rollback')"
+                        label="Restore Snapshot"
+                        @click="$emit('restore-snapshot', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        label="Edit Snapshot"
+                        :disabled="!hasPermission('snapshot:edit')"
+                        @click="$emit('edit-snapshot', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        :disabled="!hasPermission('snapshot:full')"
+                        label="View Snapshot"
+                        @click="$emit('preview-snapshot', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        :disabled="!hasPermission('project:snapshot:export')"
+                        label="Download Snapshot"
+                        @click="$emit('download-snapshot', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        :disabled="!hasPermission('project:snapshot:read')"
+                        label="Download package.json"
+                        @click="$emit('download-package-json', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        :disabled="!hasPermission('project:snapshot:set-target')"
+                        label="Set as Device Target"
+                        @click="$emit('set-device-target', event.data.snapshot)"
+                    />
+                    <ff-list-item
+                        :disabled="!hasPermission('project:snapshot:delete')"
+                        label="Delete Snapshot"
+                        kind="danger"
+                        @click="$emit('delete-snapshot', event.data.snapshot)"
+                    />
+                </ff-kebab-menu>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="body flex flex-1 justify-between gap-2 items-center cursor-pointer text-center">
+                <h5 class="w-full">Load More</h5>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import permissionsMixin from '../../../../../mixins/Permissions.js'
+
+import daysSince from '../../../../../utils/daysSince.js'
+
+import TimelineGraph from './TimelineGraph.vue'
+
+export default {
+    name: 'TimelineEvent',
+    components: { TimelineGraph },
+    mixins: [permissionsMixin],
+    props: {
+        event: {
+            type: Object,
+            required: true
+        },
+        timeline: {
+            type: Array,
+            required: true
+        }
+    },
+    emits: [
+        'preview-snapshot',
+        'restore-snapshot',
+        'compare-snapshot',
+        'download-snapshot',
+        'download-package-json',
+        'delete-snapshot',
+        'edit-snapshot',
+        'set-device-target',
+        'load-more'
+    ],
+    computed: {
+        createdAt () {
+            return daysSince(this.event.createdAt, true)
+        },
+        title () {
+            let name
+            const data = this.event.data
+
+            switch (true) {
+            case this.event.event === 'project.snapshot.imported':
+                name = data.snapshot.name.split(' - Deploy')[0] ?? ''
+
+                if (Object.prototype.hasOwnProperty.call(data ?? {}, 'sourceProject')) {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history event
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+
+                    return defineComponent({
+                        emits: ['preview-snapshot', 'preview-instance'],
+                        methods: {
+                            previewSnapshot () { this.$emit('preview-snapshot') },
+                            previewInstance () { this.$emit('preview-instance') }
+                        },
+                        template: `
+                        <span>
+                            <a href="#" @click.prevent.stop="previewSnapshot">
+                                ${name}
+                            </a>
+                            Snapshot deployed from
+                            <a href="#" @click.stop.prevent="previewInstance">${this.event.data.sourceProject.name}</a>
+                        </span>`
+                    })
+                }
+
+                return defineComponent({
+                    emits: ['preview-snapshot', 'preview-instance'],
+                    methods: {
+                        previewSnapshot () { this.$emit('preview-snapshot') },
+                        previewInstance () { this.$emit('preview-instance') }
+                    },
+                    template: `
+                        <span>
+                            Imported
+                            <a href="#" @click.prevent.stop="previewSnapshot">
+                                ${name}
+                            </a>
+                            snapshot
+                        </span>`
+                })
+
+            case this.event.event === 'project.snapshot.rolled-back':
+                return defineComponent({
+                    emits: ['preview-snapshot'],
+                    methods: {
+                        previewSnapshot () { this.$emit('preview-snapshot') }
+                    },
+                    template: `
+                        <span>
+                            Snapshot Restored:
+                            <a href="#" @click.stop.prevent="previewSnapshot">${data.snapshot.name}</a>
+                        </span>`
+                })
+            case this.event.event === 'project.snapshot.created':
+                return defineComponent({
+                    emits: ['preview-snapshot'],
+                    methods: {
+                        previewSnapshot () { this.$emit('preview-snapshot') }
+                    },
+                    template: `
+                        <span>
+                            Snapshot Captured:
+                            <i v-if="${!data.info?.snapshotExists}">${data.snapshot.name}</i>
+                            <a href="#" v-else @click.stop.prevent="previewSnapshot">${data.snapshot.name}</a>
+                        </span>`
+                })
+            case this.event.event === 'flows.set':
+                return defineComponent({
+                    template: '<span>Flows Deployed From Editor</span>'
+                })
+            case this.event.event === 'project.created':
+                return defineComponent({
+                    template: '<span>Instance Created</span>'
+                })
+            case this.event.event === 'project.settings.updated':
+                return defineComponent({
+                    template: '<span>Instance Settings Updated</span>'
+                })
+            default:
+                return defineComponent({
+                    template: `<span>${this.event.event}</span>`
+                })
+            }
+        },
+        shortTitle () {
+            switch (true) {
+            case this.event.event === 'project.snapshot.imported':
+                if (Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')) {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history events
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                    return 'Pipeline Stage Pushed'
+                } else return 'Snapshot Imported'
+            case this.event.event === 'project.snapshot.rolled-back':
+                return 'Snapshot Restored'
+            case this.event.event === 'flows.set':
+                return 'Flows Deployed'
+            case this.event.event === 'project.snapshot.created':
+                return 'Snapshot Created'
+            case this.event.event === 'project.created':
+                return 'Instance Created'
+            case this.event.event === 'project.settings.updated':
+                return 'Settings Updated'
+            default:
+                return this.event.event
+            }
+        },
+        isSnapshot () {
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isImportedSnapshot = this.event.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')
+
+            return this.event.event === 'project.snapshot.created' || isImportedSnapshot
+        },
+        snapshotExists () {
+            return this.isSnapshot && this.event.data?.info?.snapshotExists
+        },
+        isLoadMore () {
+            return this.event.event === 'load-more'
+        }
+    },
+    methods: {
+        openInstance () {
+            this.$router.push({ name: 'instance-overview', params: { id: this.event.data.sourceProject.id } })
+        },
+        loadMore () {
+            if (this.isLoadMore) this.$emit('load-more')
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.event {
+
+    .body {
+        padding: 15px 0;
+        overflow: hidden;
+
+        .content {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .title {
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                a {
+                    color: $ff-blue-600;
+                }
+            }
+
+            .details {
+                font-size: 70%;
+                opacity: 0.8;
+            }
+        }
+
+        .username {
+            color: $ff-grey-600;
+        }
+    }
+
+    .actions {
+        padding: 15px 10px;
+        min-width: 40px;
+    }
+
+    &.is-snapshot {
+        background: $ff-grey-100;
+        color: $ff-grey-500;
+    }
+
+    &.load-more {
+        background: $ff-grey-200;
+        color: $ff-blue-500;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineGraph.vue b/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineGraph.vue
new file mode 100644
index 0000000000..572b02db62
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineGraph.vue
@@ -0,0 +1,201 @@
+<template>
+    <div class="graph" :class="{'is-snapshot': isSnapshot}">
+        <span v-if="isSucceededBySnapshot && (!isSnapshot || isLoadMore)" class="connector top snapshot" />
+        <span
+            v-if="hasSomethingToChainTo || (isSnapshot && !hasSomethingToChainTo && !isLastTimelineEvent)"
+            class="connector top"
+        />
+        <span v-if="isSnapshot && isConnectedTo && hasSomethingToChainTo" class="connector through" />
+
+        <div class="icon-wrapper">
+            <component :is="icon" v-if="icon" class="ff-icon" />
+        </div>
+
+        <span v-if="isConnectedBy" class="connector bottom" />
+        <span v-if="isPrecededBySnapshot && !isSnapshot" class="connector bottom snapshot" />
+    </div>
+</template>
+
+<script>
+import { AdjustmentsIcon, CameraIcon, DotsHorizontalIcon, DownloadIcon, PlusIcon } from '@heroicons/vue/outline'
+
+import PipelinesIcon from '../../../../../components/icons/Pipelines.js'
+import ProjectsIcon from '../../../../../components/icons/Projects.js'
+import UndoIcon from '../../../../../components/icons/Undo.js'
+
+export default {
+    name: 'TimelineGraph',
+    props: {
+        event: {
+            type: Object,
+            required: true
+        },
+        timeline: {
+            type: Array,
+            required: true
+        }
+    },
+    computed: {
+        icon () {
+            switch (true) {
+            case this.event.event === 'project.snapshot.imported':
+                // we can only differentiate between a plain snapshot import and a devops deployment history events
+                // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                if (Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')) {
+                    return PipelinesIcon
+                } else return DownloadIcon
+            case this.event.event === 'project.snapshot.rolled-back':
+                return UndoIcon
+            case this.event.event === 'flows.set':
+                return ProjectsIcon
+            case this.event.event === 'project.snapshot.created':
+                return CameraIcon
+            case this.event.event === 'project.settings.updated':
+                return AdjustmentsIcon
+            case this.event.event === 'project.created':
+                return PlusIcon
+            case this.event.event === 'load-more':
+                return DotsHorizontalIcon
+            default:
+                return null
+            }
+        },
+        isConnectedBy () {
+            return this.event.event !== 'project.created'
+        },
+        isConnectedTo () {
+            return this.timeline[0].id !== this.event.id
+        },
+        isPrecededBy () {
+            const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
+            return this.timeline[currentIndex + 1]
+        },
+        isPrecededBySnapshot () {
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isPrecededByImportedSnapshot = this.isPrecededBy?.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.isPrecededBy?.data, 'sourceProject')
+
+            return this.isPrecededBy?.event === 'project.snapshot.created' || isPrecededByImportedSnapshot
+        },
+        isSucceededBy () {
+            const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
+            return this.timeline[currentIndex - 1]
+        },
+        isSucceededBySnapshot () {
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isSucceededByImportedSnapshot = this.isSucceededBy?.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.isSucceededBy?.data, 'sourceProject')
+
+            return this.isSucceededBy?.event === 'project.snapshot.created' || isSucceededByImportedSnapshot
+        },
+        isSnapshot () {
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isImportedSnapshot = this.event.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')
+
+            return this.event.event === 'project.snapshot.created' || isImportedSnapshot
+        },
+        hasSomethingToChainTo () {
+            const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
+            for (const id in this.timeline.slice(0, currentIndex)) {
+                if ((this.timeline[id]?.event) === 'project.snapshot.imported') {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history events
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                    const isPipelineDeployment = Object.prototype.hasOwnProperty.call(this.timeline[id]?.data, 'sourceProject')
+                    if (isPipelineDeployment) return true
+                } else if ([
+                    'project.snapshot.rolled-back',
+                    'flows.set',
+                    'project.created',
+                    'project.settings.updated'
+                ].includes(this.timeline[id]?.event)) return true
+            }
+
+            return false
+        },
+        isLastTimelineEvent () {
+            return this.isSucceededBy === undefined
+        },
+        isLoadMore () {
+            return this.event.event === 'load-more'
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.graph {
+    min-width: 64px;
+    padding: 15px;
+    position: relative;
+    overflow: hidden;
+
+    .icon-wrapper {
+        min-width: 34px;
+        min-height: 35px;
+        border: 2px solid $ff-blue-800;
+        border-radius: 50%;
+        padding: 5px;
+        background: #fff;
+        position: relative;
+        z-index: 10;
+        color: $ff-blue-800;
+    }
+
+    .connector {
+        border: 1px solid $ff-blue-800;
+        position: absolute;
+        left: 47%;  // compensates for border width
+        z-index: 5;
+
+        &.top {
+            top: -230px;
+            height: 250px;
+
+            &.snapshot {
+                transform: rotate(45deg);
+                top: -25%;
+                left: 80%;
+                height: 50px;
+                border-style: dashed;
+                border-color: $ff-grey-500;
+            }
+        }
+
+        &.bottom {
+            bottom: -200px;
+            height: 230px;
+            &.snapshot {
+                transform: rotate(-45deg);
+                top: 50%;
+                left: 83%;
+                height: 50px;
+                border-style: dashed;
+                border-color: $ff-grey-500;
+            }
+        }
+
+        &.through {
+            bottom: -100px;
+            height: 230px;
+            left: 30px;
+        }
+    }
+
+    &.is-snapshot {
+        padding-left: 45px;
+        min-width: 94px;
+
+        .connector {
+            &.top, &.bottom {
+                left: 65%;
+                border-color: $ff-grey-500;
+                border-style: dashed;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/instance/VersionHistory/Timeline/index.vue b/frontend/src/pages/instance/VersionHistory/Timeline/index.vue
new file mode 100644
index 0000000000..8b5a225d2b
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/Timeline/index.vue
@@ -0,0 +1,194 @@
+<template>
+    <div>
+        <FeatureUnavailable v-if="!isTimelineFeatureEnabledForPlatform" />
+        <FeatureUnavailableToTeam v-else-if="!isTimelineFeatureEnabledForTeam" />
+        <section
+            v-if="isTimelineFeatureEnabled" id="visual-timeline" class="relative"
+            :style="{height: listHeightCss}"
+        >
+            <transition-group name="fade">
+                <ff-loading v-if="loading" message="Loading Timeline..." class="absolute top-0" />
+                <ul v-else ref="timeline" data-el="timeline-list" class="timeline" :style="{'max-height': listHeightCss}">
+                    <li v-for="event in activeTimeline" :key="event.id">
+                        <timeline-event
+                            :event="event"
+                            :timeline="activeTimeline"
+                            @preview-snapshot="showViewSnapshotDialog"
+                            @restore-snapshot="forceRefresh(showRollbackDialog, $event, true)"
+                            @compare-snapshot="forceRefresh(showCompareSnapshotDialog, $event)"
+                            @delete-snapshot="forceRefresh(showDeleteSnapshotDialog, $event)"
+                            @edit-snapshot="showEditSnapshotDialog"
+                            @download-snapshot="showDownloadSnapshotDialog"
+                            @download-package-json="downloadSnapshotPackage"
+                            @set-device-target="showDeviceTargetDialog"
+                            @load-more="fetchData(true)"
+                        />
+                    </li>
+                </ul>
+            </transition-group>
+        </section>
+        <section v-else>
+            <empty-state>
+                <template #img>
+                    <img src="../../../../images/empty-states/application-pipelines.png" alt="pipelines-logo">
+                </template>
+                <template #header>
+                    <span>Timeline Not Available</span>
+                </template>
+                <template #message>
+                    <p>The Timeline provides a concise, chronological view of key activities within your Node-RED instance.</p>
+                    <p>It tracks various events such as pipeline stage deployments, snapshot restorations, flow deployments, snapshot creations, and updates to instance settings.</p>
+                    <p>This compact view helps you quickly understand the history of your instance, offering clear insight into when and what changes have been made.</p>
+                </template>
+            </empty-state>
+        </section>
+        <AssetDetailDialog ref="snapshotViewerDialog" data-el="dialog-view-snapshot" />
+        <SnapshotExportDialog ref="snapshotExportDialog" data-el="dialog-export-snapshot" :project="instance" />
+        <SnapshotEditDialog ref="snapshotEditDialog" data-el="dialog-edit-snapshot" @snapshot-updated="fetchData(false)" />
+    </div>
+</template>
+
+<script>
+import projectHistoryAPI from '../../../../api/projectHistory.js'
+import EmptyState from '../../../../components/EmptyState.vue'
+import FeatureUnavailable from '../../../../components/banners/FeatureUnavailable.vue'
+import FeatureUnavailableToTeam from '../../../../components/banners/FeatureUnavailableToTeam.vue'
+import AssetDetailDialog from '../../../../components/dialogs/AssetDetailDialog.vue'
+import SnapshotEditDialog from '../../../../components/dialogs/SnapshotEditDialog.vue'
+import { scrollTo } from '../../../../composables/Ux.js'
+import featuresMixin from '../../../../mixins/Features.js'
+import snapshotsMixin from '../../../../mixins/Snapshots.js'
+import SnapshotExportDialog from '../../../application/Snapshots/components/dialogs/SnapshotExportDialog.vue'
+
+import TimelineEvent from './components/TimelineEvent.vue'
+export default {
+    name: 'HistoryTimeline',
+    components: {
+        EmptyState,
+        FeatureUnavailableToTeam,
+        FeatureUnavailable,
+        SnapshotEditDialog,
+        SnapshotExportDialog,
+        AssetDetailDialog,
+        TimelineEvent
+    },
+    mixins: [snapshotsMixin, featuresMixin],
+    inheritAttrs: false,
+    props: {
+        instance: {
+            type: Object,
+            required: true
+        },
+        reloadHooks: {
+            type: Array,
+            required: false,
+            default: () => []
+        }
+    },
+    data () {
+        return {
+            timeline: [],
+            loading: false,
+            listHeight: 0,
+            next_cursor: undefined
+        }
+    },
+    computed: {
+        canLoadMore () {
+            return this.next_cursor !== undefined
+        },
+        activeTimeline () {
+            if (this.canLoadMore) {
+                return [...this.timeline, {
+                    event: 'load-more',
+                    id: 'load-more'
+                }]
+            } else return this.timeline
+        },
+        listHeightCss () {
+            return this.listHeight ? `${this.listHeight}px` : '800px'
+        }
+    },
+    watch: {
+        reloadHooks: {
+            handler: function () {
+                this.fetchData(false)
+            },
+            deep: true
+        },
+        'instance.id': 'fetchData'
+    },
+    mounted () {
+        this.fetchData()
+        this.computeTimelineListMaxHeight()
+        window.addEventListener('resize', this.computeTimelineListMaxHeight)
+    },
+    beforeUnmount () {
+        window.removeEventListener('resize', this.computeTimelineListMaxHeight)
+    },
+    methods: {
+        async fetchData (loadMore = false) {
+            if (this.isTimelineFeatureEnabled) {
+                if (!loadMore) {
+                    this.loading = true
+                }
+
+                // handling a specific scenario where users can navigate to the source snapshot instance, and when they click back,
+                // we retrieve the timeline for that instance and display it for a short period of time
+                if (this.instance.id && this.instance.id === this.$route.params.id) {
+                    const nextCursor = loadMore ? this.next_cursor : undefined
+                    projectHistoryAPI.getHistory(this.instance.id, nextCursor, 10)
+                        .then((response) => {
+                            this.loading = false
+                            if (loadMore) {
+                                response.timeline.forEach(ev => {
+                                    this.timeline.push(ev)
+                                    if (this.$refs.timeline) {
+                                        this.$nextTick(() => scrollTo(this.$refs.timeline, {
+                                            top: this.$refs.timeline.scrollHeight,
+                                            behavior: 'smooth'
+                                        }))
+                                    }
+                                })
+                            } else this.timeline = response.timeline
+                            this.next_cursor = response.meta.next_cursor
+                        })
+                        .catch(e => e)
+                }
+            }
+        },
+        async forceRefresh (callback, ...payload) {
+            callback(...payload)
+                .then(() => this.fetchData(false))
+                .catch(e => console.warn(e))
+        },
+        computeTimelineListMaxHeight () {
+            if (!this.$route.path.includes('editor')) {
+                const sectionHeader = document.querySelector('.ff-section-header')
+
+                if (sectionHeader) {
+                    const rect = sectionHeader.getBoundingClientRect()
+                    const heightToBottom = window.innerHeight - rect.bottom
+
+                    // also deduct the <main> tag padding and .ff-section-header's margin-bottom
+                    this.listHeight = heightToBottom - 24.5 - 7
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+#visual-timeline {
+    .timeline {
+        border: 1px solid $ff-grey-300;
+        border-radius: 3px;
+        overflow: auto;
+
+        li {
+
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/instance/VersionHistory/index.vue b/frontend/src/pages/instance/VersionHistory/index.vue
new file mode 100644
index 0000000000..ff824f6087
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/index.vue
@@ -0,0 +1,178 @@
+<template>
+    <SectionTopMenu>
+        <template #hero>
+            <div class="page-toggle" data-nav="page-toggle">
+                <div class="title">
+                    <span>View:</span>
+                </div>
+                <div class="toggle">
+                    <template v-if="$route.name.includes('editor')">
+                        <router-link :to="{path: './snapshots'}">Snapshots</router-link>
+                        <router-link :to="{path: './timeline'}">Timeline</router-link>
+                    </template>
+                    <template v-else>
+                        <router-link :to="{name: 'instance-snapshots'}">Snapshots</router-link>
+                        <router-link :to="{name: 'instance-version-history-timeline'}">Timeline</router-link>
+                    </template>
+                </div>
+            </div>
+        </template>
+        <template #helptext>
+            <template v-if="$route.name.includes('timeline')">
+                <p>The <b>Timeline</b> provides a concise, chronological view of key activities within your Node-RED instance.</p>
+                <p>It tracks various events such as pipeline stage deployments, snapshot restorations, flow deployments, snapshot creations, and updates to instance settings.</p>
+                <p>This compact view helps you quickly understand the history of your instance, offering clear insight into when and what changes have been made.</p>
+            </template>
+            <template v-else-if="$route.name.includes('snapshots')">
+                <p><b>Snapshots</b> generate a point-in-time backup of your Node-RED flow, credentials and runtime settings.</p>
+                <p>Snapshots are also required for deploying to devices. In the Deployments page of a Project, you can define your “Target Snapshot”, which will then be deployed to all connected devices.</p>
+                <p>You can also generate Snapshots directly from any instance of Node-RED using the <a target="_blank" href="https://github.com/FlowFuse/nr-tools-plugin">FlowFuse NR Tools Plugin.</a></p>
+            </template>
+        </template>
+        <template #tools>
+            <section class="flex gap-2 items-center self-center">
+                <ff-button
+                    v-if="hasPermission('snapshot:import')"
+                    kind="secondary"
+                    data-action="import-snapshot"
+                    @click="showImportSnapshotDialog"
+                >
+                    <template #icon-left><UploadIcon /></template>Upload Snapshot
+                </ff-button>
+                <ff-button
+                    kind="primary"
+                    data-action="create-snapshot"
+                    @click="showCreateSnapshotDialog"
+                >
+                    <template #icon-left><PlusSmIcon /></template>Create Snapshot
+                </ff-button>
+            </section>
+        </template>
+    </SectionTopMenu>
+
+    <router-view v-slot="{ Component }">
+        <transition name="page-fade" mode="out-in">
+            <component
+                :is="Component"
+                :instance="instance"
+                :reloadHooks="reloadHooks"
+                @show-import-snapshot-dialog="showImportSnapshotDialog"
+                @show-create-snapshot-dialog="showCreateSnapshotDialog"
+                @instance-updated="$emit('instance-updated')"
+            />
+        </transition>
+    </router-view>
+
+    <SnapshotCreateDialog
+        ref="snapshotCreateDialog"
+        data-el="dialog-create-snapshot"
+        :project="instance"
+        @snapshot-created="snapshotCreated"
+    />
+    <SnapshotImportDialog
+        ref="snapshotImportDialog"
+        title="Upload Snapshot"
+        data-el="dialog-import-snapshot"
+        :owner="instance"
+        owner-type="instance"
+        @snapshot-import-success="onSnapshotImportSuccess"
+        @snapshot-import-failed="onSnapshotImportFailed"
+    />
+</template>
+
+<script>
+import { PlusSmIcon, UploadIcon } from '@heroicons/vue/outline'
+
+import SectionTopMenu from '../../../components/SectionTopMenu.vue'
+import SnapshotImportDialog from '../../../components/dialogs/SnapshotImportDialog.vue'
+
+import permissionsMixin from '../../../mixins/Permissions.js'
+import Alerts from '../../../services/alerts.js'
+
+import SnapshotCreateDialog from './Snapshots/dialogs/SnapshotCreateDialog.vue'
+
+export default {
+    name: 'VersionHistory',
+    components: {
+        SnapshotImportDialog,
+        SnapshotCreateDialog,
+        PlusSmIcon,
+        UploadIcon,
+        SectionTopMenu
+    },
+    mixins: [permissionsMixin],
+    inheritAttrs: false,
+    props: {
+        instance: {
+            type: Object,
+            required: true
+        }
+    },
+    emits: ['instance-updated'],
+    data () {
+        return {
+            reloadHooks: []
+        }
+    },
+    methods: {
+        showCreateSnapshotDialog () {
+            this.$refs.snapshotCreateDialog.show()
+        },
+        showImportSnapshotDialog () {
+            this.busyImportingSnapshot = true
+            this.$refs.snapshotImportDialog.show()
+        },
+        snapshotCreated (snapshot) {
+            this.$emit('instance-updated')
+            this.reloadHooks.push({ event: 'snapshot-created', payload: snapshot })
+        },
+        onSnapshotImportSuccess (snapshot) {
+            this.$emit('instance-updated')
+            this.reloadHooks.push({ event: 'snapshot-imported', payload: snapshot })
+        },
+        onSnapshotImportFailed (err) {
+            const message = err.response?.data?.error || 'Failed to import snapshot.'
+            Alerts.emit(message, 'warning')
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.page-toggle {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+
+    .title {
+        color: $ff-black;
+        font-weight: 400;
+    }
+
+    .toggle {
+        border: 1px solid $ff-blue-800;
+        display: flex;
+        gap: 10px;
+        border-radius: 5px;
+
+        a {
+            padding: 5px 10px;
+            margin: 1px;
+            border-radius: 5px;
+            transition: ease-in-out .2s;
+
+            &.router-link-active {
+                background: $ff-blue-800;
+                color: $ff-white;
+            }
+        }
+    }
+}
+.page-fade-enter-active, .page-fade-leave-active {
+    transition: opacity .2s ease-in-out;
+}
+
+.page-fade-enter, .page-fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/frontend/src/pages/instance/VersionHistory/routes.js b/frontend/src/pages/instance/VersionHistory/routes.js
new file mode 100644
index 0000000000..be5067cb69
--- /dev/null
+++ b/frontend/src/pages/instance/VersionHistory/routes.js
@@ -0,0 +1,21 @@
+import InstanceSnapshots from './Snapshots/index.vue'
+import HistoryTimeline from './Timeline/index.vue'
+
+export default [
+    {
+        path: 'timeline',
+        name: 'instance-version-history-timeline',
+        component: HistoryTimeline,
+        meta: {
+            title: 'Instance - Version History Timeline'
+        }
+    },
+    {
+        path: 'snapshots',
+        name: 'instance-snapshots',
+        component: InstanceSnapshots,
+        meta: {
+            title: 'Instance - Snapshots'
+        }
+    }
+]
diff --git a/frontend/src/pages/instance/index.vue b/frontend/src/pages/instance/index.vue
index c33b8e2af6..dcbca7bef6 100644
--- a/frontend/src/pages/instance/index.vue
+++ b/frontend/src/pages/instance/index.vue
@@ -74,6 +74,7 @@ import SubscriptionExpiredBanner from '../../components/banners/SubscriptionExpi
 import TeamTrialBanner from '../../components/banners/TeamTrial.vue'
 import InstanceActionsButton from '../../components/instance/ActionButton.vue'
 
+import featuresMixin from '../../mixins/Features.js'
 import instanceMixin from '../../mixins/Instance.js'
 import permissionsMixin from '../../mixins/Permissions.js'
 import { Roles } from '../../utils/roles.js'
@@ -96,7 +97,7 @@ export default {
         TeamTrialBanner,
         InstanceEditorLink
     },
-    mixins: [permissionsMixin, instanceMixin],
+    mixins: [permissionsMixin, instanceMixin, featuresMixin],
     data: function () {
         return {
             mounted: false,
@@ -109,11 +110,22 @@ export default {
         ...mapState('account', ['teamMembership', 'team']),
         navigation () {
             if (!this.instance.id) return []
-
+            let versionHistoryRoute
+            if (!this.isTimelineFeatureEnabled) {
+                versionHistoryRoute = {
+                    name: 'instance-snapshots',
+                    params: { id: this.instance.id }
+                }
+            } else {
+                versionHistoryRoute = {
+                    name: 'instance-version-history',
+                    params: { id: this.instance.id }
+                }
+            }
             return [
                 { label: 'Overview', to: { name: 'instance-overview', params: { id: this.instance.id } }, tag: 'instance-overview' },
                 { label: 'Devices', to: { name: 'instance-devices', params: { id: this.instance.id } }, tag: 'instance-remote' },
-                { label: 'Snapshots', to: { name: 'instance-snapshots', params: { id: this.instance.id } }, tag: 'instance-snapshots' },
+                { label: 'Version History', to: versionHistoryRoute, tag: 'instance-version-history' },
                 { label: 'Assets', to: { name: 'instance-assets', params: { id: this.instance.id } }, tag: 'instance-assets', hidden: !this.hasAMinimumTeamRoleOf(Roles.Member) },
                 { label: 'Audit Log', to: { name: 'instance-audit-log', params: { id: this.instance.id } }, tag: 'instance-activity' },
                 { label: 'Node-RED Logs', to: { name: 'instance-logs', params: { id: this.instance.id } }, tag: 'instance-logs' },
diff --git a/frontend/src/pages/instance/routes.js b/frontend/src/pages/instance/routes.js
index 7d2d08adaf..83561322b3 100644
--- a/frontend/src/pages/instance/routes.js
+++ b/frontend/src/pages/instance/routes.js
@@ -9,7 +9,8 @@ import InstanceLogs from './Logs.vue'
 import InstanceOverview from './Overview.vue'
 import InstanceSettings from './Settings/index.vue'
 import InstanceSettingsRoutes from './Settings/routes.js'
-import InstanceSnapshots from './Snapshots/index.vue'
+import VersionHistory from './VersionHistory/index.vue'
+import VersionHistoryRoutes from './VersionHistory/routes.js'
 import Instance from './index.vue'
 
 const children = [
@@ -64,12 +65,16 @@ const children = [
         children: [...InstanceSettingsRoutes]
     },
     {
-        path: 'snapshots',
-        name: 'instance-snapshots',
-        component: InstanceSnapshots,
+        path: 'version-history',
+        name: 'instance-version-history',
+        component: VersionHistory,
         meta: {
-            title: 'Instance - Snapshots'
-        }
+            title: 'Instance - Version History'
+        },
+        redirect: to => {
+            return { name: 'instance-version-history-timeline', params: { id: to.params.id } }
+        },
+        children: [...VersionHistoryRoutes]
     }
 ]
 
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/device-snapshots.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/device-snapshots.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/device-snapshots.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/device2-full-snapshot1.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/device2-full-snapshot1.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/device2-full-snapshot1.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance-snapshots.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance-snapshots.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance2-full-snapshot2.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance2-full-snapshot2.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance2-snapshot2.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/instance2-snapshot2.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/snapshot-with-credentials.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/snapshot-with-credentials.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload-for-download.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload-for-download.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload1.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload1.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload1.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload1.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload2.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload2.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload2.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload2.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload3.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload3.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload3.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload3.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload4.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload4.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload4.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload4.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload5.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload5.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload5.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload5.json
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload6.json b/test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload6.json
similarity index 100%
rename from test/e2e/frontend/cypress/fixtures/snapshots/upload6.json
rename to test/e2e/frontend/cypress/fixtures/version-history/snapshots/upload6.json
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/flows-set.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/flows-set.json
new file mode 100644
index 0000000000..b7aef8d7fb
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/flows-set.json
@@ -0,0 +1,15 @@
+{
+  "id": "QKPYbJQle7",
+  "createdAt": "2024-10-18T09:41:28.786Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "lando_00",
+    "name": "Lando Calrissian"
+  },
+  "event": "flows.set",
+  "data": {
+    "flowsSet": {
+      "type": "full"
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-created.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-created.json
new file mode 100644
index 0000000000..d1675e0ee7
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-created.json
@@ -0,0 +1,18 @@
+{
+  "id": "kGP6N0pPj8",
+  "createdAt": "2024-07-12T09:00:28.031Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "monmot",
+    "name": "Mon Mothma"
+  },
+  "event": "project.created",
+  "data": {
+    "team": {
+      "id": "9BJDyKnA7Q",
+      "name": "ATeam",
+      "slug": "ateam",
+      "type": null
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-settings-updated.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-settings-updated.json
new file mode 100644
index 0000000000..410766602b
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-settings-updated.json
@@ -0,0 +1,20 @@
+{
+  "id": "7VP4ANKl2q",
+  "createdAt": "2024-10-16T12:58:53.121Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "ahso_t",
+    "name": "Ahsoka Tano"
+  },
+  "event": "project.settings.updated",
+  "data": {
+    "updates": [
+      {
+        "key": "emailAlerts.recipients",
+        "old": "owners",
+        "new": "both",
+        "dif": "updated"
+      }
+    ]
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-created.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-created.json
new file mode 100644
index 0000000000..b6ef20e470
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-created.json
@@ -0,0 +1,20 @@
+{
+  "id": "zQ5g2EoDpr",
+  "createdAt": "2024-10-18T09:41:28.819Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "windu_m",
+    "name": "Mace Windu"
+  },
+  "event": "project.snapshot.created",
+  "data": {
+    "snapshot": {
+      "id": "6p38g0e5qJ",
+      "name": "Auto Snapshot - 2024-10-18 12:41:28",
+      "description": "Instance Auto Snapshot taken following a Full deployment"
+    },
+    "info": {
+      "snapshotExists": true
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_manual.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_manual.json
new file mode 100644
index 0000000000..70e431794a
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_manual.json
@@ -0,0 +1,21 @@
+
+{
+  "id": "neDdr7bvYy",
+  "createdAt": "2024-10-18T09:37:09.936Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "amidala",
+    "name": "Princess Amidala"
+  },
+  "event": "project.snapshot.imported",
+  "data": {
+    "snapshot": {
+      "id":"6pq5Wbx81W",
+      "name": "Tatooine CNC Shop",
+      "description": "Snapshot created for pipeline deployment from first stage to another stage as part of pipeline From somewhere else to cautios"
+    },
+    "info": {
+      "snapshotExists": true
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_pipeline.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_pipeline.json
new file mode 100644
index 0000000000..5ac9b95b28
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-imported_pipeline.json
@@ -0,0 +1,23 @@
+
+{
+  "id": "neDkr7blYy",
+  "createdAt": "2024-10-18T09:37:09.936Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "amidala",
+    "name": "Princess Amidala"
+  },
+  "event": "project.snapshot.imported",
+  "data": {
+    "sourceProject": {
+      "name": "instance-1-1"
+    },
+    "snapshot": {
+      "name": "Tatooine CNC Shop",
+      "description": "Snapshot created for pipeline deployment from first stage to another stage as part of pipeline From somewhere else to cautios"
+    },
+    "info": {
+      "snapshotExists": true
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-rolled-back.json b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-rolled-back.json
new file mode 100644
index 0000000000..3e40144077
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/version-history/timeline/project-snapshot-rolled-back.json
@@ -0,0 +1,20 @@
+{
+  "id": "fzlxuz683b",
+  "createdAt": "2024-10-17T15:09:18.579Z",
+  "user": {
+    "id": "qMN5ng9xYv",
+    "username": "mr_jinn",
+    "name": "Qui-Gon Jinn"
+  },
+  "event": "project.snapshot.rolled-back",
+  "data": {
+    "snapshot": {
+      "id": "b9xyBD18pa",
+      "name": "Auto Snapshot - 2024-10-16 10:59:38",
+      "description": "Instance Auto Snapshot taken following a Full deployment"
+    },
+    "info": {
+      "snapshotExists": true
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
index 0bd42c018b..a13862a38b 100644
--- a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
 
-import deviceSnapshots from '../../fixtures/snapshots/device-snapshots.json'
-import deviceFullSnapshot from '../../fixtures/snapshots/device2-full-snapshot1.json'
-import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
+import deviceSnapshots from '../../fixtures/version-history/snapshots/device-snapshots.json'
+import deviceFullSnapshot from '../../fixtures/version-history/snapshots/device2-full-snapshot1.json'
+import instanceSnapshots from '../../fixtures/version-history/snapshots/instance-snapshots.json'
 const snapshots = {
     count: 2,
     snapshots: [deviceSnapshots.snapshots[0], instanceSnapshots.snapshots[0]]
@@ -244,7 +244,7 @@ describe('FlowForge - Devices - With Billing', () => {
     })
 
     it('upload snapshot with credentials', () => {
-        cy.fixture('snapshots/snapshot-with-credentials.json', null).as('snapshot')
+        cy.fixture('version-history/snapshots/snapshot-with-credentials.json', null).as('snapshot')
         cy.intercept('POST', '/api/*/snapshots/import').as('importSnapshot')
 
         cy.contains('span', 'application-device-a').click()
@@ -294,7 +294,7 @@ describe('FlowForge - Devices - With Billing', () => {
     })
 
     it('upload snapshot without credentials', () => {
-        cy.fixture('snapshots/instance2-full-snapshot2.json', null).as('snapshot')
+        cy.fixture('version-history/snapshots/instance2-full-snapshot2.json', null).as('snapshot')
         cy.intercept('POST', '/api/*/snapshots/import').as('importSnapshot')
 
         cy.contains('span', 'application-device-a').click()
diff --git a/test/e2e/frontend/cypress/tests-ee/instances/version-history/timeline.spec.js b/test/e2e/frontend/cypress/tests-ee/instances/version-history/timeline.spec.js
new file mode 100644
index 0000000000..653eee891d
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests-ee/instances/version-history/timeline.spec.js
@@ -0,0 +1,291 @@
+import fullSnapshot from '../../../fixtures/version-history/snapshots/instance2-full-snapshot2.json'
+import flowsSetEvent from '../../../fixtures/version-history/timeline/flows-set.json'
+import projectCreatedEvent from '../../../fixtures/version-history/timeline/project-created.json'
+import projectSettingsUpdated from '../../../fixtures/version-history/timeline/project-settings-updated.json'
+import projectSnapshotCreated from '../../../fixtures/version-history/timeline/project-snapshot-created.json'
+import projectSnapshotImportedManual
+    from '../../../fixtures/version-history/timeline/project-snapshot-imported_manual.json'
+import projectSnapshotImportedPipeline
+    from '../../../fixtures/version-history/timeline/project-snapshot-imported_pipeline.json'
+import projectSnapshotRolledBack from '../../../fixtures/version-history/timeline/project-snapshot-rolled-back.json'
+
+describe('FlowForge - Version History', () => {
+    let projectId
+
+    beforeEach(() => {
+        cy.login('alice', 'aaPassword')
+        cy.home()
+
+        cy.request('GET', '/api/v1/teams/')
+            .then((response) => {
+                const team = response.body.teams[0]
+                return cy.request('GET', `/api/v1/teams/${team.id}/projects`)
+            })
+            .then((response) => {
+                projectId = response.body.projects[0].id
+            })
+    })
+
+    it('has the version history tab and can access the timeline and snapshots pages', () => {
+        cy.intercept('GET', '/api/*/projects/*/snapshots', {
+            meta: {},
+            count: 0,
+            snapshots: []
+        }).as('getProjectSnapshots')
+        cy.visit(`/instance/${projectId}/overview`)
+
+        cy.get('[data-nav="instance-version-history"]').click()
+
+        // check that the snapshots tab is default, data not important
+        cy.contains('Create your First Snapshot')
+
+        // manually switch to the timeline tab
+        cy.get('[data-nav="page-toggle"]').contains('Timeline').click()
+
+        cy.contains('Timeline Not Available')
+
+        cy.get('[data-action="import-snapshot"]').should('exist').should('not.be.disabled')
+        cy.get('[data-action="create-snapshot"]').should('exist').should('not.be.disabled')
+
+        cy.get('[data-nav="page-toggle"]').within(() => {
+            cy.contains('Timeline').should('exist').should('not.be.disabled')
+            cy.contains('Snapshots').should('exist').should('not.be.disabled')
+
+            cy.contains('Snapshots').click()
+        })
+
+        cy.wait('@getProjectSnapshots')
+
+        cy.contains('Create your First Snapshot')
+    })
+
+    it('The Timeline is not available for teams without the timeline feature enabled', () => {
+        const spy = cy.spy().as('historyRequest')
+        cy.intercept('GET', '/api/*/projects/*/history', spy)
+        cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+        cy.contains('This feature is not available for your current Team. Please upgrade your Team in order to use it.')
+        cy.contains('Timeline Not Available')
+
+        cy.get('@historyRequest').should('not.have.been.called')
+    })
+
+    describe('Timeline Feature enabled teams', () => {
+        beforeEach(() => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 50 }).as('getTeamRole')
+            cy.intercept('GET', '/api/*/teams/*', (req) => {
+                req.reply((response) => {
+                    // ensure we keep bom enabled
+                    response.body.type.properties.features.projectHistory = true
+                    return response
+                })
+            }).as('getTeam')
+
+            cy.login('alice', 'aaPassword')
+            cy.home()
+        })
+
+        it('have access to the timeline feature and correctly renders timeline events', () => {
+            cy.intercept('GET', '/api/*/projects/*/history?*', {
+                meta: {},
+                count: 0,
+                timeline: [
+                    projectSnapshotRolledBack,
+                    projectSnapshotImportedPipeline,
+                    projectSettingsUpdated,
+                    projectSnapshotCreated,
+                    flowsSetEvent,
+                    projectSnapshotImportedManual,
+                    projectCreatedEvent
+                ]
+            }).as('getHistory')
+
+            cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+            cy.wait('@getTeam')
+            cy.wait('@getHistory')
+
+            cy.get('[data-el="timeline-list"]').children().should('have.length', 7)
+
+            cy.get('[data-el="timeline-list"] li').contains('Snapshot Restored: Auto Snapshot - 2024-10-16 10:59:38')
+            cy.get('[data-el="timeline-list"] li').contains('Qui-Gon Jinn')
+
+            cy.get('[data-el="timeline-list"] li').contains('Tatooine CNC Shop Snapshot deployed from instance-1-1')
+            cy.get('[data-el="timeline-list"] li').contains('Princess Amidala')
+
+            cy.get('[data-el="timeline-list"] li').contains('Instance Settings Updated')
+            cy.get('[data-el="timeline-list"] li').contains('Ahsoka Tano')
+
+            cy.get('[data-el="timeline-list"] li').contains('Snapshot Captured: Auto Snapshot - 2024-10-18 12:41:28')
+            cy.get('[data-el="timeline-list"] li').contains('Mace Windu')
+
+            cy.get('[data-el="timeline-list"] li').contains('Flows Deployed From Editor')
+            cy.get('[data-el="timeline-list"] li').contains('Lando Calrissian')
+
+            cy.get('[data-el="timeline-list"] li').contains('Imported Tatooine CNC Shop snapshot')
+            cy.get('[data-el="timeline-list"] li').contains('Princess Amidala')
+
+            cy.get('[data-el="timeline-list"] li').contains('Instance Created')
+            cy.get('[data-el="timeline-list"] li').contains('Mon Mothma')
+        })
+
+        it('can interact with timeline events', () => {
+            cy.intercept('GET', '/api/*/projects/*/history?*', {
+                meta: {},
+                count: 0,
+                timeline: [
+                    projectSnapshotRolledBack,
+                    projectSnapshotImportedPipeline,
+                    projectSettingsUpdated,
+                    projectSnapshotCreated,
+                    flowsSetEvent,
+                    projectSnapshotImportedManual,
+                    projectCreatedEvent
+                ]
+            }).as('getHistory')
+
+            cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+            cy.wait('@getTeam')
+            cy.wait('@getHistory')
+
+            // it can view restored snapshots
+            cy.intercept('GET', '/api/v1/snapshots/*/full', fullSnapshot).as('getSnapshot')
+            cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
+            cy.contains('Auto Snapshot - 2024-10-16 10:59:38').click()
+            cy.wait('@getSnapshot')
+            cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+                .within(() => {
+                    cy.get('[data-action="dialog-confirm"]').click()
+                })
+
+            // it can view the pipeline deployed snapshot
+            cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
+            cy.get('[data-el="timeline-list"]')
+                .contains('Tatooine CNC Shop Snapshot deployed from instance-1-1')
+                .within(() => {
+                    cy.contains('Tatooine CNC Shop').click()
+                })
+            cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+                .within(() => {
+                    cy.get('[data-action="dialog-confirm"]').click()
+                })
+
+            // it can view the pipeline source instance
+            cy.get('[data-el="timeline-list"]')
+                .contains('Tatooine CNC Shop Snapshot deployed from instance-1-1')
+                .within(() => {
+                    cy.contains('instance-1-1').click()
+                    cy.url().should('match', /^.*\/instance\/.*\/overview/)
+                })
+            cy.go('back')
+
+            // it can view created snapshots
+            cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
+            cy.get('[data-el="timeline-list"]')
+                .contains('Snapshot Captured: Auto Snapshot - 2024-10-18 12:41:28')
+                .within(() => {
+                    cy.contains('Auto Snapshot - 2024-10-18 12:41:28').click()
+                })
+            cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+                .within(() => {
+                    cy.get('[data-action="dialog-confirm"]').click()
+                })
+
+            // auto snapshots have the kebab menu available
+            cy.get('[data-el="timeline-list"]')
+                .contains('Snapshot Captured: Auto Snapshot - 2024-10-18 12:41:28')
+                .parent()
+                .parent()
+                .parent()
+                .within(() => {
+                    cy.get('[data-el="kebab-menu"]').should('exist')
+                })
+
+            // it can view manually imported snapshots
+            cy.get('[data-el="dialog-view-snapshot"]').should('not.be.visible')
+            cy.get('[data-el="timeline-list"]')
+                .contains('Imported Tatooine CNC Shop snapshot')
+                .within(() => {
+                    cy.contains('Tatooine CNC Shop').click()
+                })
+            cy.get('[data-el="dialog-view-snapshot"]').should('be.visible')
+                .within(() => {
+                    cy.get('[data-action="dialog-confirm"]').click()
+                })
+
+            // manual snapshots have the kebab menu available
+            cy.get('[data-el="timeline-list"]')
+                .contains('Imported Tatooine CNC Shop snapshot')
+                .parent()
+                .parent()
+                .parent()
+                .within(() => {
+                    cy.get('[data-el="kebab-menu"]').should('exist')
+                })
+        })
+
+        it('uploading a snapshot from the timeline page reloads the timeline', () => {
+            cy.fixture('version-history/snapshots/snapshot-with-credentials.json', null).as('snapshot')
+            cy.intercept('GET', '/api/*/projects/*/history?*', {
+                meta: {},
+                count: 0,
+                timeline: [
+                    projectSnapshotRolledBack,
+                    projectSnapshotImportedPipeline,
+                    projectSettingsUpdated,
+                    projectSnapshotCreated,
+                    flowsSetEvent,
+                    projectSnapshotImportedManual,
+                    projectCreatedEvent
+                ]
+            }).as('getHistory')
+
+            cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+            cy.wait('@getTeam')
+            cy.wait('@getHistory')
+
+            cy.get('[data-el="dialog-import-snapshot"]').should('not.be.visible')
+            cy.get('[data-action="import-snapshot"]').click()
+            cy.get('[data-el="dialog-import-snapshot"]').should('be.visible')
+            // upload the snapshot file that has credentials (the credentials secret field should become visible)
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-filename"] input[type="file"]').selectFile({ contents: '@snapshot' }, { force: true }) // force because the input is hidden
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"] input').type('correct secret')
+            cy.get('[data-el="dialog-import-snapshot"] [data-action="dialog-confirm"]').click()
+
+            cy.wait('@getHistory') // waiting for the getHistory call is enough
+        })
+
+        it('creating a snapshot from the timeline page reloads the timeline', () => {
+            cy.intercept('GET', '/api/*/projects/*/history?*', {
+                meta: {},
+                count: 0,
+                timeline: [
+                    projectSnapshotRolledBack,
+                    projectSnapshotImportedPipeline,
+                    projectSettingsUpdated,
+                    projectSnapshotCreated,
+                    flowsSetEvent,
+                    projectSnapshotImportedManual,
+                    projectCreatedEvent
+                ]
+            }).as('getHistory')
+
+            cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+            cy.wait('@getTeam')
+            cy.wait('@getHistory')
+
+            cy.get('[data-el="dialog-create-snapshot"]').should('not.be.visible')
+            cy.get('[data-action="create-snapshot"]').click()
+            cy.get('[data-el="dialog-create-snapshot"]').should('be.visible')
+
+            cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-name"] input[type="text"]').type('snapshot1')
+            cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-description"] textarea').type('snapshot1 description')
+            cy.get('[data-el="dialog-create-snapshot"] [data-action="dialog-confirm"]').click()
+
+            cy.wait('@getHistory') // waiting for the getHistory call is enough
+        })
+    })
+})
diff --git a/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js b/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js
index 55090e30ad..397ca11583 100644
--- a/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/applications/snapshots.spec.js
@@ -1,9 +1,9 @@
 /// <reference types="cypress" />
 
-import deviceSnapshots from '../../fixtures/snapshots/device-snapshots.json'
-import deviceFullSnapshot from '../../fixtures/snapshots/device2-full-snapshot1.json'
-import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
-import instanceFullSnapshot from '../../fixtures/snapshots/instance2-full-snapshot2.json'
+import deviceSnapshots from '../../fixtures/version-history/snapshots/device-snapshots.json'
+import deviceFullSnapshot from '../../fixtures/version-history/snapshots/device2-full-snapshot1.json'
+import instanceSnapshots from '../../fixtures/version-history/snapshots/instance-snapshots.json'
+import instanceFullSnapshot from '../../fixtures/version-history/snapshots/instance2-full-snapshot2.json'
 const snapshots = {
     count: 2,
     snapshots: [deviceSnapshots.snapshots[0], instanceSnapshots.snapshots[0]]
diff --git a/test/e2e/frontend/cypress/tests/instances/editor.spec.js b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
index 74c3d322d4..27107baffa 100644
--- a/test/e2e/frontend/cypress/tests/instances/editor.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
@@ -41,7 +41,7 @@ describe('FlowForge - Instance editor', () => {
             'GET',
             '/api/*/projects/*',
             (req) => req.reply(res => {
-                res.body = { ...res.body, ...{ meta: { versions: { launcher: '2.3.1' } } } }
+                res.body = { ...res.body, ...{ meta: { versions: { launcher: '2.6.0', 'node-red': '4.0.2' } } } }
                 return res
             })).as('getProjects')
 
@@ -54,12 +54,12 @@ describe('FlowForge - Instance editor', () => {
 
         cy.get('[data-action="open-editor"]')
             .children()
-            .should('exist') // todo revert when the editor is ready
+            .should('exist')
+
+        cy.get('[data-action="open-editor"]').click()
 
-        // cy.get('[data-action="open-editor"]').click()
-        //
-        // cy.get('[data-el="editor-iframe"]').should('exist')
-        // cy.get('[data-el="tabs-drawer"]').should('exist')
+        cy.get('[data-el="editor-iframe"]').should('exist')
+        cy.get('[data-el="tabs-drawer"]').should('exist')
     })
 
     it('has working drawer navigation tabs', () => {
@@ -101,10 +101,9 @@ describe('FlowForge - Instance editor', () => {
         cy.get('@tabs-wrapper').contains('Devices')
         cy.get('@tabs-wrapper').contains('A list of all edge devices registered to this instance.')
 
-        cy.get('[data-nav="instance-snapshots"]').as('snapshots-tab').should('exist')
+        cy.get('[data-nav="instance-version-history"]').as('snapshots-tab').should('exist')
         cy.get('@snapshots-tab').click()
-        cy.get('@tabs-wrapper').contains('Snapshots')
-        cy.get('@tabs-wrapper').contains('Create your First Snapshot')
+        cy.url().should('match', /^.*\/instance\/.*\/version-history\/snapshots/) // defaults to snapshots if no feature/team enabled
 
         cy.get('[data-nav="instance-activity"]').as('activity-tab').should('exist')
         cy.get('@activity-tab').click()
diff --git a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js b/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
similarity index 96%
rename from test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
rename to test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
index ab01f0ff3a..0abb7dd330 100644
--- a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/version-history/snapshots.spec.js
@@ -1,9 +1,9 @@
 /// <reference types="cypress" />
 import should from 'should'
 
-import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
-import instanceFullSnapshot from '../../fixtures/snapshots/instance2-full-snapshot2.json'
-import instanceSnapshot from '../../fixtures/snapshots/instance2-snapshot2.json'
+import instanceSnapshots from '../../../fixtures/version-history/snapshots/instance-snapshots.json'
+import instanceFullSnapshot from '../../../fixtures/version-history/snapshots/instance2-full-snapshot2.json'
+import instanceSnapshot from '../../../fixtures/version-history/snapshots/instance2-snapshot2.json'
 // import instanceFullSnapshot from '../../fixtures/snapshots/snapshot-with-credentials.json'
 let idx = 0
 const IDX_DEPLOY_SNAPSHOT = idx++
@@ -31,21 +31,21 @@ describe('FlowForge - Instance Snapshots', () => {
             })
             .then((response) => {
                 projectId = response.body.projects[0].id
-                cy.visit(`/instance/${projectId}/snapshots`)
+                cy.visit(`/instance/${projectId}/version-history/snapshots`)
                 cy.wait('@getProjectSnapshots')
             })
     })
 
     it('shows a placeholder message when no snapshots have been created', () => {
         cy.intercept('GET', '/api/*/projects/*/snapshots', { count: 0, snapshots: [] }).as('getEmptyProjectSnapshots')
-        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@getEmptyProjectSnapshots')
         cy.get('main').contains('Create your First Snapshot')
     })
 
     it('provides functionality to create a snapshot', () => {
         cy.intercept('GET', '/api/*/projects/*/snapshots', { count: 0, snapshots: [] }).as('snapshotData')
-        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@snapshotData')
 
         cy.get('button[data-action="create-snapshot"]').click()
@@ -60,6 +60,13 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="dialog-create-snapshot"] button.ff-btn.ff-btn--primary').should('not.be.disabled')
         cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-description"] textarea').type('snapshot1 description')
 
+        cy.intercept('GET', '/api/*/projects/*/snapshots', {
+            count: 1,
+            snapshots: [{
+                ...instanceSnapshot,
+                name: 'snapshot1'
+            }]
+        }).as('snapshotData')
         // click "Create"
         cy.get('[data-el="dialog-create-snapshot"] button.ff-btn.ff-btn--primary').click()
         cy.get('[data-el="snapshots"] tbody').find('tr').should('have.length', 1)
@@ -68,7 +75,7 @@ describe('FlowForge - Instance Snapshots', () => {
 
     it('offers correct options in snapshot table kebab menu', () => {
         cy.intercept('GET', '/api/*/projects/*/snapshots', instanceSnapshots).as('snapshotData')
-        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@snapshotData')
 
         // click kebab menu in row 1
@@ -175,7 +182,7 @@ describe('FlowForge - Instance Snapshots', () => {
         // if (!testSnapshotUploaded) {
         // first upload a known snapshot so that download tests can be run against it
         // directly POST to api/v1/snapshots/import the upload1.json snapshot
-        cy.fixture('snapshots/upload-for-download.json').then((snapshot) => {
+        cy.fixture('version-history/snapshots/upload-for-download.json').then((snapshot) => {
             snapshot.name = name
             cy.request('POST', '/api/v1/snapshots/import', {
                 ownerId: projectId,
@@ -188,7 +195,7 @@ describe('FlowForge - Instance Snapshots', () => {
         // ensure the downloads folder is empty before the test
         cy.task('clearDownloads')
         cy.intercept('GET', '/api/*/projects/*/snapshots').as('snapshotData')
-        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@snapshotData')
         // click kebab menu in row 1
         cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
@@ -385,7 +392,7 @@ describe('FlowForge - Instance Snapshots', () => {
     it('download snapshot package.json', () => {
         cy.intercept('GET', '/api/*/projects/*/snapshots', instanceSnapshots).as('snapshotData')
         cy.intercept('GET', '/api/*/snapshots/*', instanceSnapshot).as('instanceSnapshot')
-        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.visit(`/instance/${projectId}/version-history/snapshots`)
         cy.wait('@snapshotData')
 
         // ensure package.json does not exist in the downloads folder before the test
@@ -448,7 +455,7 @@ describe('FlowForge - Instance Snapshots', () => {
         // - Excluding all components should disable the upload & a validation message should appear
         // - Excluding env should disable the radio buttons
 
-        cy.fixture('snapshots/snapshot-with-credentials.json', null).as('snapshot')
+        cy.fixture('version-history/snapshots/snapshot-with-credentials.json', null).as('snapshot')
         cy.intercept('POST', '/api/*/snapshots/import').as('importSnapshot')
 
         // click data-action="import-snapshot" to open the dialog
@@ -644,27 +651,27 @@ describe('FlowForge - Instance Snapshots', () => {
     }
 
     it('upload full snapshot, include all', () => {
-        uploadWithComponentOptionsTest(false, false, false, false, 'snapshots/upload1.json')
+        uploadWithComponentOptionsTest(false, false, false, false, 'version-history/snapshots/upload1.json')
     })
 
     it('upload full snapshot, exclude flows', () => {
-        uploadWithComponentOptionsTest(true, false, false, false, 'snapshots/upload2.json')
+        uploadWithComponentOptionsTest(true, false, false, false, 'version-history/snapshots/upload2.json')
     })
 
     it('upload full snapshot, exclude credentials', () => {
-        uploadWithComponentOptionsTest(false, true, false, false, 'snapshots/upload3.json')
+        uploadWithComponentOptionsTest(false, true, false, false, 'version-history/snapshots/upload3.json')
     })
 
     it('upload full snapshot, exclude env', () => {
-        uploadWithComponentOptionsTest(false, false, true, false, 'snapshots/upload4.json')
+        uploadWithComponentOptionsTest(false, false, true, false, 'version-history/snapshots/upload4.json')
     })
 
     it('upload full snapshot, env keys only', () => {
-        uploadWithComponentOptionsTest(false, false, false, true, 'snapshots/upload5.json')
+        uploadWithComponentOptionsTest(false, false, false, true, 'version-history/snapshots/upload5.json')
     })
 
     it('upload snapshot which has no credentials', () => {
-        uploadWithComponentOptionsTest(false, null, false, false, 'snapshots/upload6.json')
+        uploadWithComponentOptionsTest(false, null, false, false, 'version-history/snapshots/upload6.json')
     })
 
     it('Can rollback a snapshot', () => {
diff --git a/test/e2e/frontend/cypress/tests/instances/version-history/timeline.spec.js b/test/e2e/frontend/cypress/tests/instances/version-history/timeline.spec.js
new file mode 100644
index 0000000000..47195ca152
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/instances/version-history/timeline.spec.js
@@ -0,0 +1,62 @@
+describe('FlowForge - Version History', () => {
+    let projectId
+
+    beforeEach(() => {
+        cy.login('alice', 'aaPassword')
+        cy.home()
+
+        cy.request('GET', '/api/v1/teams/')
+            .then((response) => {
+                const team = response.body.teams[0]
+                return cy.request('GET', `/api/v1/teams/${team.id}/projects`)
+            })
+            .then((response) => {
+                projectId = response.body.projects[0].id
+            })
+    })
+
+    it('has the version history tab and can access the timeline and snapshots pages', () => {
+        cy.intercept('GET', '/api/*/projects/*/snapshots', {
+            meta: {},
+            count: 0,
+            snapshots: []
+        }).as('getProjectSnapshots')
+        cy.visit(`/instance/${projectId}/overview`)
+
+        cy.get('[data-nav="instance-version-history"]').click()
+
+        // check that the snapshots tab is default, data not important
+        cy.contains('Create your First Snapshot')
+
+        // manually switch to the timeline tab
+        cy.get('[data-nav="page-toggle"]').contains('Timeline').click()
+
+        // check that the timeline tab is default, data not important
+        cy.contains('Timeline Not Available')
+
+        cy.get('[data-action="import-snapshot"]').should('exist').should('not.be.disabled')
+        cy.get('[data-action="create-snapshot"]').should('exist').should('not.be.disabled')
+
+        cy.get('[data-nav="page-toggle"]').within(() => {
+            cy.contains('Timeline').should('exist').should('not.be.disabled')
+            cy.contains('Snapshots').should('exist').should('not.be.disabled')
+
+            cy.contains('Snapshots').click()
+        })
+
+        cy.wait('@getProjectSnapshots')
+
+        cy.contains('Create your First Snapshot')
+    })
+
+    it('The Timeline is not available for non licensed users', () => {
+        const spy = cy.spy().as('historyRequest')
+        cy.intercept('GET', '/api/*/projects/*/history', spy)
+        cy.visit(`/instance/${projectId}/version-history/timeline`)
+
+        cy.contains('This is a FlowFuse Enterprise feature. Please upgrade your instance of FlowFuse in order to use it.')
+        cy.contains('Timeline Not Available')
+
+        cy.get('@historyRequest').should('not.have.been.called')
+    })
+})