diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 7261f9e0..17d2c3d0 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -147,12 +147,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     parentProgressbar.insertBefore(divProgress, progressbarContainer)
 
     if(parentGallery){
-        var livePreview = document.createElement('div')
-        livePreview.className='livePreview'
-        parentGallery.insertBefore(livePreview, gallery)
+		var livePreview = gradioApp().querySelector('.livePreview');
+		if(!livePreview){
+			livePreview = document.createElement('div')
+			livePreview.classList.add("livePreview", "init")
+			parentGallery.insertBefore(livePreview, gallery)
+		}
+		livePreview.classList.remove("dropPreview");
     }
 
-    var removeProgressBar = function(){
+    var removeProgressBar = function(){		
         setTitle("")
         parentProgressbar.removeChild(divProgress)
         if(parentGallery) parentGallery.removeChild(livePreview)
@@ -215,15 +219,20 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                     //livePreview.style.width = rect.width + "px"
                     //livePreview.style.height = rect.height + "px"
                 //}
+				
+				livePreview.classList.remove("init")
 
                 var img = new Image();
                 img.onload = function() {
+					img.width = img.naturalWidth;
+					img.height = img.naturalHeight;
                     livePreview.appendChild(img)
                     if(livePreview.childElementCount > 2){
                         livePreview.removeChild(livePreview.firstElementChild)
                     }
                 }
                 img.src = res.live_preview;
+				
             }
 
 
diff --git a/javascript/ui.js b/javascript/ui.js
index 941a16d6..ecc35a55 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -808,6 +808,7 @@ onUiUpdate(function(){
 			add2quickSettings(tid, sid, e.target.checked);
 		})
 	})
+	
 	/*
 	gradioApp().querySelectorAll("#quicksettings_overflow_container input[type='range']").forEach(function (elem,i){
 		
@@ -849,7 +850,63 @@ onUiUpdate(function(){
 		e.preventDefault();
 		return false;
 	}
+
+	const pnginfo = gradioApp().querySelector("#tab_pnginfo"); 
+	function forwardFromPngInfo(){
+		if(selectedTabItemId == "tab_txt2img"){
+			pnginfo.querySelector('#txt2img_tab').click();
+			const img_src = pnginfo.querySelector('img');
+			const gallery_parent = gradioApp().querySelector('#txt2img_gallery_container');
+			const live_preview = gallery_parent.querySelector('.livePreview');
+			if(live_preview){
+				live_preview.innerHTML = '<img width="'+img_src.width+'" height="'+img_src.height+'" src="'+ img_src.src +'">';
+			}else{
+				const div = document.createElement("div");				
+				div.classList.add("livePreview", "dropPreview");
+				div.innerHTML = '<img width="'+img_src.width+'" height="'+img_src.height+'" src="'+ img_src.src +'">';
+				gallery_parent.prepend(div);
+			}			
+		}else if(selectedTabItemId == "tab_img2img"){
+			pnginfo.querySelector('#img2img_tab').click();
+		}
+	}
 	
+	function fetchPngInfoData(files){
+		const oldFetch = window.fetch;
+		window.fetch = async (input, options) => {
+			const response = await oldFetch(input, options);
+			if( 'run/predict/' === input ) {	
+				if(response.ok){									
+					window.fetch = oldFetch;
+					setTimeout(function() { forwardFromPngInfo(); }, 500);
+				}
+			}
+			return response;
+		}; 
+		
+		const fileInput = gradioApp().querySelector('#pnginfo_image input[type="file"]');		 
+		if(fileInput.files != files){					
+			fileInput.files = files;
+			fileInput.dispatchEvent(new Event('change'));			
+		}		
+	}
+
+	function drop2View(e){					
+		e.stopPropagation();
+		e.preventDefault();
+		const files = e.dataTransfer.files;
+		if ( ! isValidImageList( files ) ) {
+			return;
+		}
+		const data_image = gradioApp().querySelector('#pnginfo_image [data-testid="image"]');		
+		data_image.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();	
+		setTimeout(function() { fetchPngInfoData(files); }, 1000);
+	}
+			
+	gradioApp().querySelectorAll('[id$="2img_results"]').forEach((elem) => {		
+		elem.addEventListener('drop', drop2View);
+	})
+
 	// function that gets the element next of cursor/touch
     function getElementAfter(container, y){
         return draggables.reduce((closest, child) => {
@@ -967,10 +1024,10 @@ onUiUpdate(function(){
 
 	function actionQuickSettingsDraggable(checked){		
 		if(checked){
-			draggables = Array.from(gradioApp().querySelectorAll('#quicksettings_overflow_container > div:not(.dragging)'));			
-			gradioApp().addEventListener('drop', preventBehavior);
+			draggables = Array.from(gradioApp().querySelectorAll('#quicksettings_overflow_container > div:not(.dragging)'));						
+			gradioApp().addEventListener('drop', preventBehavior);			
 		}else{			
-			gradioApp().removeEventListener('drop', preventBehavior);
+			gradioApp().removeEventListener('drop', preventBehavior);			
 		}
 		
 		gradioApp().querySelectorAll('#quicksettings_overflow_container > div').forEach(function (elem){
diff --git a/modules/ui.py b/modules/ui.py
index 2d06673c..e34a34df 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1030,7 +1030,7 @@ def create_ui():
                 )
 
             token_button.click(fn=update_token_counter, inputs=[img2img_prompt, steps], outputs=[token_counter])
-            negative_token_button.click(fn=wrap_queued_call(update_token_counter), inputs=[txt2img_negative_prompt, steps], outputs=[negative_token_counter])
+            negative_token_button.click(fn=wrap_queued_call(update_token_counter), inputs=[img2img_negative_prompt, steps], outputs=[negative_token_counter])
 
             ui_extra_networks.setup_ui(extra_networks_ui_img2img, img2img_gallery)
 
diff --git a/style.css b/style.css
index 49bdfa27..ae8e1c0f 100644
--- a/style.css
+++ b/style.css
@@ -2017,7 +2017,7 @@ canvas[key=mask] {
     bottom: 0;
     pointer-events: all;
     overflow: hidden !important;    
-	/*background-color: transparent !important;*/
+	background-color: var(--main-bg-color);
 	z-index: 300;
 	box-sizing: border-box;
 	padding: var(--processing-border);
@@ -2049,7 +2049,7 @@ div.svelte-10ogue4>*:first-child.livePreview {
 }
 
 	
-.livePreview::before {
+.livePreview:not(.dropPreview)::before {
 	content: '';
 	position: absolute;
 	z-index: -2;
@@ -2078,6 +2078,26 @@ div.svelte-10ogue4>*:first-child.livePreview {
 	
 }
 
+.livePreview::before {
+	content: '';
+	position: absolute;
+	z-index: -2;
+	left: -50%;
+	top: -50%;
+	width: 200%;
+	height: 200%;
+	background-color: var(--main-bg-color);
+	background-repeat: no-repeat;
+	background-position: 0 0;
+	background-image: conic-gradient(transparent, var(--primary-color), transparent 30%);
+	animation: rotate 4s linear infinite;
+}
+
+.livePreview.dropPreview::before,
+.livePreview.dropPreview::after {	
+	display:none;
+}
+
 
 
 
@@ -3057,6 +3077,12 @@ ul.list-none {
 }
 
 
+.transition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
 
 
 
@@ -3210,21 +3236,40 @@ ul.list-none {
 	.livePreview img{
 		object-position:top;
 		border-radius: 0 !important;
+		position: relative;
+		width: 100%;
+
 	}
 	
+	.livePreview img:nth-child(2){
+		position:absolute;
+		top: var(--processing-border);
+		left: var(--processing-border);
+		width: calc(100% - var(--processing-double-border));
+	}
+	
+	.livePreview.init,
+	.livePreview:not(.init) + div{  
+		display:none;
+	}
+	
+	
  	.livePreview {  
-		width: calc(100% - (var(--outside-gap-size) * 2)) !important;   
+		/*width: calc(100% - (var(--outside-gap-size) * 2)) !important; */  
 		max-height: unset !important;
-		bottom:60px;
-		
+		/*bottom:60px;*/
+		position: relative !important;
+		left: 0;
+		top: 0;
+		width: auto !important;
 	}
 	div.svelte-10ogue4>*:first-child.livePreview {
 		/*height: calc(100% - 60px - var(--outside-gap-size) - 2px) !important;*/
-		height: auto !important;
+		/*height: auto !important;*/
 	}
 	
 	div.svelte-10ogue4>*:first-child.livePreview > img {		
-		height: auto !important;
+		/*height: auto !important;*/
 	}
 	
 	[id$="png_2img_results"]{