diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 66c8f4e..e402c1c 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/src-tauri/src/lib.rs b/frontend/src-tauri/src/lib.rs
index 3920ce6..daa3d04 100644
--- a/frontend/src-tauri/src/lib.rs
+++ b/frontend/src-tauri/src/lib.rs
@@ -115,7 +115,7 @@ pub fn run() {
         .setup(|app| {
             let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                 .inner_size(480.0, 360.0)
-                .resizable(false);
+                .resizable(true);
             // set transparent title bar only when building for macOS
             #[cfg(target_os = "macos")]
             let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cd87c9e..97c3a6f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,107 +2,109 @@ import { createSignal } from "solid-js";
 import { Search } from "@kobalte/core/search";
 import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
 import clsx from "clsx";
+import { ImageViewer } from "./components/ImageViewer";
 
 type Emoji = {
-	emoji: string;
-	name: string;
+    emoji: string;
+    name: string;
 };
 
 function App() {
-	const [options, setOptions] = createSignal<Emoji[]>([]);
-	const [emoji, setEmoji] = createSignal<Emoji | null>(null);
+    const [options, setOptions] = createSignal<Emoji[]>([]);
+    const [emoji, setEmoji] = createSignal<Emoji | null>(null);
 
-	const emojiData: Emoji[] = [
-		{ emoji: "😀", name: "Grinning Face" },
-		{ emoji: "😃", name: "Grinning Face with Big Eyes" },
-		{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
-		{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
-		{ emoji: "😆", name: "Grinning Squinting Face" },
-	];
+    const emojiData: Emoji[] = [
+        { emoji: "😀", name: "Grinning Face" },
+        { emoji: "😃", name: "Grinning Face with Big Eyes" },
+        { emoji: "😄", name: "Grinning Face with Smiling Eyes" },
+        { emoji: "😁", name: "Beaming Face with Smiling Eyes" },
+        { emoji: "😆", name: "Grinning Squinting Face" },
+    ];
 
-	const queryEmojiData = (query: string) => {
-		return emojiData.filter((emoji) =>
-			emoji.name.toLowerCase().includes(query.toLowerCase()),
-		);
-	};
+    const queryEmojiData = (query: string) => {
+        return emojiData.filter((emoji) =>
+            emoji.name.toLowerCase().includes(query.toLowerCase()),
+        );
+    };
 
-	return (
-		<main class="container pt-2">
-			<div class="px-4">
-				<Search
-					triggerMode="focus"
-					options={options()}
-					onInputChange={(query) => setOptions(queryEmojiData(query))}
-					onChange={(result) => setEmoji(result)}
-					optionValue="name"
-					optionLabel="name"
-					placeholder="Search for stuff..."
-					itemComponent={(props) => (
-						<Search.Item
-							item={props.item}
-							class={clsx(
-								"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
-								"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
-							)}
-						>
-							<Search.ItemLabel class="mx-[-100px]">
-								{props.item.rawValue.emoji}
-							</Search.ItemLabel>
-						</Search.Item>
-					)}
-				>
-					<Search.Control
-						class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
-						aria-label="Emoji"
-					>
-						<Search.Indicator
-							class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
-							loadingComponent={
-								<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
-									<IconRefresh size={20} class="m-auto animate-spin" />
-								</Search.Icon>
-							}
-						>
-							<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
-								<IconSearch class="m-auto size-5 text-gray-600" />
-							</Search.Icon>
-						</Search.Indicator>
-						<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
-					</Search.Control>
-					<Search.Portal>
-						<Search.Content
-							class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
-							onCloseAutoFocus={(e) => e.preventDefault()}
-						>
-							<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
-							<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-								😬 No emoji found
-							</Search.NoResult>
-						</Search.Content>
-					</Search.Portal>
-				</Search>
-			</div>
-			{/* <div class="mt-4 text-base leading-none">
+    return (
+        <main class="container pt-2">
+            <div class="px-4">
+                <Search
+                    triggerMode="focus"
+                    options={options()}
+                    onInputChange={(query) => setOptions(queryEmojiData(query))}
+                    onChange={(result) => setEmoji(result)}
+                    optionValue="name"
+                    optionLabel="name"
+                    placeholder="Search for stuff..."
+                    itemComponent={(props) => (
+                        <Search.Item
+                            item={props.item}
+                            class={clsx(
+                                "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
+                                "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
+                            )}
+                        >
+                            <Search.ItemLabel class="mx-[-100px]">
+                                {props.item.rawValue.emoji}
+                            </Search.ItemLabel>
+                        </Search.Item>
+                    )}
+                >
+                    <Search.Control
+                        class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
+                        aria-label="Emoji"
+                    >
+                        <Search.Indicator
+                            class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
+                            loadingComponent={
+                                <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
+                                    <IconRefresh size={20} class="m-auto animate-spin" />
+                                </Search.Icon>
+                            }
+                        >
+                            <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
+                                <IconSearch class="m-auto size-5 text-gray-600" />
+                            </Search.Icon>
+                        </Search.Indicator>
+                        <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
+                    </Search.Control>
+                    <Search.Portal>
+                        <Search.Content
+                            class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
+                            onCloseAutoFocus={(e) => e.preventDefault()}
+                        >
+                            <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
+                            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
+                                😬 No emoji found
+                            </Search.NoResult>
+                        </Search.Content>
+                    </Search.Portal>
+                </Search>
+            </div>
+            {/* <div class="mt-4 text-base leading-none">
         Emoji selected: {emoji()?.emoji} {emoji()?.name}
       </div> */}
-			<div class="px-4 mt-4 bg-white rounded-t-2xl">
-				<div class="h-[254px] overflow-scroll scrollbar-hide">
-					<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
-						<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
-						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
-						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
-						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
-						<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
-						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
-						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
-					</div>
-				</div>
-			</div>
-			<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
-				footer
-			</div>
-		</main>
-	);
+            <ImageViewer />
+            <div class="px-4 mt-4 bg-white rounded-t-2xl">
+                <div class="h-[254px] overflow-scroll scrollbar-hide">
+                    <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
+                        <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
+                        <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+                        <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+                        <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+                        <div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
+                        <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+                        <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+                    </div>
+                </div>
+            </div>
+            <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
+                footer
+            </div>
+        </main>
+    );
 }
 
 export default App;
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index 2fffb5c..8efbbdb 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/frontend/src/components/ImageViewer.tsx
@@ -1,37 +1,40 @@
 import { createEffect, createSignal } from "solid-js";
 import { listen } from "@tauri-apps/api/event";
 import { FolderPicker } from "./FolderPicker";
+import { sendImage } from "../network";
 
 export function ImageViewer() {
-	const [latestImage, setLatestImage] = createSignal<string | null>(null);
+    const [latestImage, setLatestImage] = createSignal<string | null>(null);
 
-	createEffect(() => {
-		// Listen for PNG processing events
-		const unlisten = listen("png-processed", (event) => {
-			console.log("Received processed PNG");
-			const base64Data = event.payload as string;
-			setLatestImage(`data:image/png;base64,${base64Data}`);
-		});
+    createEffect(() => {
+        // Listen for PNG processing events
+        const unlisten = listen("png-processed", (event) => {
+            console.log("Received processed PNG");
+            const base64Data = event.payload as string;
+            setLatestImage(`data:image/png;base64,${base64Data}`);
 
-		return () => {
-			unlisten.then((fn) => fn()); // Cleanup listener
-		};
-	});
+            sendImage("test-image.png", base64Data);
+        });
 
-	return (
-		<div>
-			<FolderPicker />
+        return () => {
+            unlisten.then((fn) => fn()); // Cleanup listener
+        };
+    });
 
-			{latestImage() && (
-				<div class="mt-4">
-					<h3>Latest Processed Image:</h3>
-					<img
-						src={latestImage() || undefined}
-						alt="Latest processed"
-						class="max-w-md"
-					/>
-				</div>
-			)}
-		</div>
-	);
+    return (
+        <div>
+            <FolderPicker />
+
+            {latestImage() && (
+                <div class="mt-4">
+                    <h3>Latest Processed Image:</h3>
+                    <img
+                        src={latestImage() || undefined}
+                        alt="Latest processed"
+                        class="max-w-md"
+                    />
+                </div>
+            )}
+        </div>
+    );
 }