diff --git a/index.html b/index.html
index 9d27bab..7b90336 100644
--- a/index.html
+++ b/index.html
@@ -97,9 +97,6 @@
             max-width: 100%;
         }
 
-        /* .viewer-image-button:hover {
-     background-color: #333f52;
-  } */
         .viewer-image-container {
             position: relative;
             width: 100px;
@@ -111,11 +108,52 @@
             display: flex;
         }
 
+        .viewer-image-container:hover .thumbnail-image-button {
+            display: flex;
+        }
+
         .viewer-container {
             display: flex;
             flex-wrap: wrap;
         }
 
+        .thumbnail-image-button{
+            display: none;
+            /* background-color:  #495b79; */
+            color: white;
+            border: none;
+            cursor: pointer;
+            position: absolute;
+            /* bottom: 0;
+            left: 0; */
+            width: 100%;
+            /* height: 20px; */
+            margin: 0;
+            max-height: 100%;
+            max-width: 100%;
+        }
+
+        .thumbnail-image-button:nth-child(2) {
+            border-color:green;
+            bottom:0;
+            left:0;    
+        }
+        .thumbnail-image-button:nth-child(3) {
+            border-color:pink;
+            bottom:0;
+            right:0;
+        }
+        .thumbnail-image-button:nth-child(4) {
+            border-color:yellow;
+            top:0;
+            left:0;
+        }
+        .thumbnail-image-button:nth-child(5) {
+            border-color:red;
+            top:0;
+            right:0;
+        }
+
         .column-item {
             margin: 0;
         }
@@ -1244,7 +1282,18 @@
                             </div>
                             Edit Text
                         </sp-action-button>
-
+                        <sp-action-button id="svg_sp_btn_datadownload" style="padding: 0; max-width: 32px; max-height: 32px; display:none;">
+                            <div slot="icon" style="fill: currentColor">
+                                <svg viewBox="0 0 18 18" style="width: 18px; height: 18px;">
+                                    <path
+                                        d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z" />
+                                    <path d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z" />
+                                    <path
+                                        d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z" />
+                                    <path d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z" />
+                                </svg>
+                            </div>
+                        </sp-action-button>
                         <!-- <img width="15px" height="15px" src="./icon/ftcopy.svg">   -->
                     </div>
                     <img
diff --git a/index.js b/index.js
index a6d4006..6d90da8 100644
--- a/index.js
+++ b/index.js
@@ -37,6 +37,7 @@ const horde_native = require('./utility/sdapi/horde_native')
 const io = require('./utility/io')
 const dummy = require('./utility/dummy')
 const general = require('./utility/general')
+const thumbnail = require('./thumbnail')
 let g_horde_generator = new horde_native.hordeGenerator()
 
 //REFACTOR: move to session.js
@@ -3646,34 +3647,11 @@ document
                     metadata_jsons[i]
                 )
                 console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
-                const img_container = html_manip.addHistoryButtonsHtml(img)
-                container.appendChild(img_container)
 
-                // container.appendChild(img)
-                img.addEventListener('click', async (e) => {
-                    //auto fill the ui with metadata
-                    const metadata_json = JSON.parse(
-                        e.target.dataset.metadata_json_string
-                    )
-                    console.log('metadata_json: ', metadata_json)
-                    // document.querySelector('#tiSeed').value = metadata_json.Seed
-
-                    //extract auto_metadata into the preset metadata
-                    function convertAutoMetadataToPresset(metadata_json) {
-                        metadata_json['seed'] =
-                            metadata_json?.auto_metadata?.Seed
-                    }
-                    convertAutoMetadataToPresset(metadata_json)
-                    document.querySelector('#historySeedLabel').textContent =
-                        metadata_json?.seed
-                    // autoFillInSettings(metadata_json)
-                    g_ui_settings.autoFillInSettings(metadata_json)
-
-                    //load the image onto the canvas
-                    // let image_path = img.dataset.path
-                    // const image_path_escape = image_path.replace(/\o/g,"/o") //escape string "\o" in "\output"
-                    // await placeEmbedded(image_path_escape)
-                })
+                const img_container = thumbnail.Thumbnail.wrapImgInContainer(img,'viewer-image-container')
+                thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn', 'place the image on the canvas', moveHistoryImageToLayer, img)
+                thumbnail.Thumbnail.addSPButtonToContainer(img_container,'svg_sp_btn_datadownload', 'download history data to current settings', getHistoryMetadata, img)
+                container.appendChild(img_container)                
                 i++
             }
         } catch (e) {
@@ -3681,6 +3659,36 @@ document
         }
     })
 
+    function getHistoryMetadata(img){
+        debugger
+        //auto fill the ui with metadata
+        const metadata_json = JSON.parse(
+            img.dataset.metadata_json_string
+        )
+        console.log('metadata_json: ', metadata_json)
+        // document.querySelector('#tiSeed').value = metadata_json.Seed
+
+        //extract auto_metadata into the preset metadata
+        function convertAutoMetadataToPresset(metadata_json) {
+            metadata_json['seed'] =
+                metadata_json?.auto_metadata?.Seed
+        }
+        convertAutoMetadataToPresset(metadata_json)
+        document.querySelector('#historySeedLabel').textContent =
+            metadata_json?.seed
+        // autoFillInSettings(metadata_json)
+        g_ui_settings.autoFillInSettings(metadata_json)
+    }
+
+    async function moveHistoryImageToLayer(img){
+        let image_path = img.dataset.path
+        const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
+
+        // load the image from "data:image/png;base64," base64_str
+        const base64_image = img.src.replace('data:image/png;base64,', '')
+        await base64ToFile(base64_image)
+    }
+
 document
     .getElementById('btnImageSearch')
     .addEventListener('click', async function () {
diff --git a/thumbnail.js b/thumbnail.js
new file mode 100644
index 0000000..063265e
--- /dev/null
+++ b/thumbnail.js
@@ -0,0 +1,27 @@
+class Thumbnail {
+    static wrapImgInContainer(img, container_style_class) {
+        const container = document.createElement('div');
+        container.className = container_style_class;
+        container.appendChild(img);
+        return container;
+    }
+
+    static addSPButtonToContainer(container, button_id, title, callbackFunction, param1) {
+        const elem = document.getElementById(button_id);
+        const clone = elem.cloneNode(true);
+        const button = clone
+        button.style.display = null
+        button.removeAttribute('id')
+        button.setAttribute('title', title)
+
+        // Create button element
+        button.className = "thumbnail-image-button";
+        button.addEventListener('click', () => callbackFunction(param1))
+        container.appendChild(button)
+    }
+
+}
+
+module.exports = {
+    Thumbnail,
+}