diff --git a/editor/src/messages/portfolio/portfolio_message.rs b/editor/src/messages/portfolio/portfolio_message.rs
index 5fadad7d3a..4f46b17c66 100644
--- a/editor/src/messages/portfolio/portfolio_message.rs
+++ b/editor/src/messages/portfolio/portfolio_message.rs
@@ -102,6 +102,10 @@ pub enum PortfolioMessage {
 		mouse: Option<(f64, f64)>,
 		parent_and_insert_index: Option<(LayerNodeIdentifier, usize)>,
 	},
+	PreviewImage {
+		name: Option<String>,
+		svg: String,
+	},
 	PrevDocument,
 	SetActivePanel {
 		panel: PanelType,
diff --git a/editor/src/messages/portfolio/portfolio_message_handler.rs b/editor/src/messages/portfolio/portfolio_message_handler.rs
index 6601de3664..ef23d96cd5 100644
--- a/editor/src/messages/portfolio/portfolio_message_handler.rs
+++ b/editor/src/messages/portfolio/portfolio_message_handler.rs
@@ -356,6 +356,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 			// 	self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
 			// }
 			PortfolioMessage::Import => {
+				//this is where itheppend
 				// This portfolio message wraps the frontend message so it can be listed as an action, which isn't possible for frontend messages
 				responses.add(FrontendMessage::TriggerImport);
 			}
@@ -1080,6 +1081,12 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 					responses.add(FrontendMessage::TriggerDelayedZoomCanvasToFitAll);
 				}
 			}
+			PortfolioMessage::PreviewImage { name, svg } => {
+				debug!("PortfolioMessage Preview Image")
+				//TODO: draw a preview image following cursor
+
+				//TODO: get a preview
+			}
 			PortfolioMessage::PrevDocument => {
 				if let Some(active_document_id) = self.active_document_id {
 					let len = self.document_ids.len();
diff --git a/frontend/src/components/floating-menus/ImportImagePreview.svelte b/frontend/src/components/floating-menus/ImportImagePreview.svelte
new file mode 100644
index 0000000000..42ee359f5c
--- /dev/null
+++ b/frontend/src/components/floating-menus/ImportImagePreview.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
+	export let pastedImage: ImageData | undefined = undefined;
+	export let x: number;
+	export let y: number;
+
+	//define fucntions here
+</script>
+
+<FloatingMenu open={true} class="import-image-paste-preview" type="Cursor" styles={{ left: x + "px", top: y + "px" }}>
+	<!-- <div class="image-preview">
+		<img classn/>
+	</div> -->
+	<img src="" />
+</FloatingMenu>
+
+<style lang="scss" global></style>
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index db91741442..1e856efd78 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -22,6 +22,7 @@
 	import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
 
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
+	import ImportImagePreview from "@graphite/components/floating-menus/ImportImagePreview.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Graph from "@graphite/components/views/Graph.svelte";
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index 1cf63a2811..87bf7ec5c1 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -72,7 +72,8 @@ export function createPortfolioState(editor: Editor) {
 
 		if (data.type.includes("svg")) {
 			const svg = new TextDecoder().decode(data.content.data);
-			editor.handle.pasteSvg(data.filename, svg);
+			//editor.handle.pasteSvg(data.filename, svg); //calls to the backend for a immediate image paste
+			editor.handle.previewImage(data.filename, svg);
 			return;
 		}
 
@@ -83,6 +84,7 @@ export function createPortfolioState(editor: Editor) {
 		}
 
 		const imageData = await extractPixelData(new Blob([data.content.data], { type: data.type }));
+		console.debug("editor paste Image ");
 		editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height);
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerDownloadTextFile, (triggerFileDownload) => {
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index 489e2518dc..2b3b5049ab 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -659,6 +659,12 @@ impl EditorHandle {
 		};
 		self.dispatch(message);
 	}
+	#[wasm_bindgen(js_name=previewImage)]
+	pub fn preview_image(&self, name: Option<String>, svg: String) {
+		let message = PortfolioMessage::PreviewImage { name, svg };
+		debug!("editor api,preview image,dispatch message to PortfolioMessage PreviewMessage");
+		self.dispatch(message);
+	}
 
 	/// Toggle visibility of a layer or node given its node ID
 	#[wasm_bindgen(js_name = toggleNodeVisibilityLayerPanel)]