diff --git a/assets/components/versionx/js/mgr/grid.deltas.js b/assets/components/versionx/js/mgr/grid.deltas.js
index 1d238ae..7a15bef 100644
--- a/assets/components/versionx/js/mgr/grid.deltas.js
+++ b/assets/components/versionx/js/mgr/grid.deltas.js
@@ -197,6 +197,10 @@ Ext.extend(VersionX.grid.Deltas, MODx.grid.Grid, {
                 });
             break;
 
+            case 'versionx-diff-preview-btn':
+                this.loadPreview(t.dataset);
+                break;
+
             case 'versionx-diff-revert-all-btn':
                 let time = Ext.util.Format.date(t.dataset.time_start, `${MODx.config.manager_date_format} H:i:s`);
                 MODx.msg.confirm({
@@ -258,6 +262,13 @@ Ext.extend(VersionX.grid.Deltas, MODx.grid.Grid, {
             >
                 ${_('versionx.deltas.revert_these_changes')}
             </button>
+            <button 
+                class="versionx-diff-preview-btn x-btn x-btn-small x-btn-icon-small-left" 
+                type="button" 
+                data-id="${version_id}"
+            >
+                Preview
+            </button>
         `;
         // Display initial delta differently
         if (milestone === '_initial_') {
@@ -298,5 +309,35 @@ Ext.extend(VersionX.grid.Deltas, MODx.grid.Grid, {
                     </div>
                 </div>`;
     },
+    loadPreview: function(dataset) {
+        let self = this;
+        const previewUrl = MODx.config.manager_url
+            + '?namespace=magicpreview&a=preview&resource='
+            + this.config.principal;
+
+        if (!this.previewWindow) {
+            this.previewWindow = window.open(previewUrl + '#loading', 'MagicPreview');
+        }
+
+        MODx.Ajax.request({
+            url: VersionX.config.connector_url,
+            params: {
+                action: 'mgr/deltas/preview',
+                id: this.config.principal,
+                class_key: this.config.principal_class,
+                delta_id: dataset.id,
+            },
+            listeners: {
+                success: {
+                    fn: function (r) {
+                        if (r.object && r.object.preview_hash) {
+                            self.previewWindow.location.hash = r.object.preview_hash;
+                        }
+                    }
+                }
+            }
+        });
+
+    }
 });
 Ext.reg('versionx-grid-deltas', VersionX.grid.Deltas);
diff --git a/core/components/versionx/elements/plugins/versionx.plugin.php b/core/components/versionx/elements/plugins/versionx.plugin.php
index 579b6af..6a03540 100644
--- a/core/components/versionx/elements/plugins/versionx.plugin.php
+++ b/core/components/versionx/elements/plugins/versionx.plugin.php
@@ -121,6 +121,38 @@
         }
         break;
 
+    case 'OnResourceMagicPreview':
+        /**  @var array $properties */
+        $versionX = new VersionX($modx);
+        $deltaId = $properties['delta_id'];
+//        $objectId = $resource->get('id');
+
+        $delta = $modx->getObject(\vxDelta::class, ['id' => $deltaId]);
+        $typeClass = "\\" . $delta->get('type_class');
+        /** @var \modmore\VersionX\Types\Type $type */
+        $type = new $typeClass($versionX);
+
+//        // Grab the object to revert
+//        $object = $modx->getObject($type->getClass(), ['id' => $objectId]);
+//        if (!$object) {
+//            $modx->log(MODX_LOG_LEVEL_ERROR,
+//                '[VersionX] Error loading ' . $type->getClass() . ' with id: ' . $objectId);
+//            return false;
+//        }
+
+        // Get the first version of every field after the "time_end" on the selected delta
+        $fields = [];
+        foreach ($versionX->deltas()->getClosestDeltaFields($type, $resource, [], $delta->get('time_start')) as $item) {
+            $fields[$item->get('field')] = $item;
+        }
+
+        // Apply the field values to the object
+        // We want to revert to all fields to the after value of a specific point in time.
+        foreach ($fields as $field) {
+            $resource->set($field->get('field'), $field->get('before'));
+        }
+
+        break;
 }
 
 return true;
\ No newline at end of file
diff --git a/core/components/versionx/processors/mgr/deltas/preview.class.php b/core/components/versionx/processors/mgr/deltas/preview.class.php
new file mode 100644
index 0000000..bd15552
--- /dev/null
+++ b/core/components/versionx/processors/mgr/deltas/preview.class.php
@@ -0,0 +1,41 @@
+<?php
+
+class VersionXRevertPreviewProcessor extends modProcessor
+{
+    public \modmore\VersionX\VersionX $versionX;
+    public ?\MagicPreview $magicPreview = null;
+
+    public function initialize()
+    {
+        $init = parent::initialize();
+        $path = $this->modx->getOption(
+            'magicpreview.core_path',
+            null,
+            $this->modx->getOption('core_path') . 'components/magicpreview/'
+        );
+        $this->magicPreview ??= $this->modx->getService(
+            'magicpreview',
+            'MagicPreview',
+            $path . '/model/magicpreview/'
+        );
+
+        return $init;
+    }
+
+    public function process()
+    {
+        $resource = $this->modx->getObject(modResource::class, ['id' => $this->getProperty('id')]);
+        if (!$resource) {
+            return $this->failure('Resource not found');
+        }
+
+        $properties = array_merge($this->properties, $resource->toArray());
+        /** @var modProcessorResponse $response */
+        $response = $this->modx->runProcessor('resource/preview', $properties, [
+            'processors_path' => $this->magicPreview->config['processorsPath'],
+        ]);
+
+        return $this->success('wooo', $response->getResponse()['object']);
+    }
+}
+return 'VersionXRevertPreviewProcessor';
\ No newline at end of file