diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c6553d4..c4fefac 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { Login } from "./Login";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { Search } from "./Search";
 import { Settings } from "./Settings";
+import { ImageViewer } from "./components/ImageViewer";
 
 export const App = () => {
     createEffect(() => {
@@ -19,13 +20,16 @@ export const App = () => {
     });
 
     return (
-        <Router>
-            <Route path="/login" component={Login} />
+        <>
+            <ImageViewer />
+            <Router>
+                <Route path="/login" component={Login} />
 
-            <Route path="/" component={ProtectedRoute}>
-                <Route path="/" component={Search} />
-                <Route path="/settings" component={Settings} />
-            </Route>
-        </Router>
+                <Route path="/" component={ProtectedRoute}>
+                    <Route path="/" component={Search} />
+                    <Route path="/settings" component={Settings} />
+                </Route>
+            </Router>
+        </>
     );
 };
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index b7b0a34..8d8dbfc 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/frontend/src/components/ImageViewer.tsx
@@ -1,19 +1,21 @@
 import { listen } from "@tauri-apps/api/event";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect } from "solid-js";
 import { sendImage } from "../network";
-import { FolderPicker } from "./folder-picker/FolderPicker";
 
 export function ImageViewer() {
-    const [latestImage, setLatestImage] = createSignal<string | null>(null);
+    // const [latestImage, setLatestImage] = createSignal<string | null>(null);
 
-    createEffect(() => {
+    createEffect(async () => {
         // Listen for PNG processing events
-        const unlisten = listen("png-processed", (event) => {
+        const unlisten = listen("png-processed", async (event) => {
             console.log("Received processed PNG", event);
             const base64Data = event.payload as string;
 
-            setLatestImage(`data:image/png;base64,${base64Data}`);
-            sendImage("test-image.png", base64Data);
+            // setLatestImage(`data:image/png;base64,${base64Data}`);
+            const result = await sendImage("test-image.png", base64Data);
+
+            window.location.reload();
+            console.log("DBG: ", result);
         });
 
         return () => {
@@ -21,20 +23,22 @@ export function ImageViewer() {
         };
     });
 
-    return (
-        <div>
-            <FolderPicker />
+    return null;
 
-            {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>
+    // );
 }
diff --git a/frontend/src/components/folder-picker/FolderPicker.tsx b/frontend/src/components/folder-picker/FolderPicker.tsx
index 04521a3..926bf07 100644
--- a/frontend/src/components/folder-picker/FolderPicker.tsx
+++ b/frontend/src/components/folder-picker/FolderPicker.tsx
@@ -27,21 +27,26 @@ export function FolderPicker() {
     };
 
     return (
-        <div class="flex flex-col items-center gap-4">
-            <button
-                type="button"
-                onClick={handleFolderSelect}
-                class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-            >
-                Select Folder
-            </button>
+        <div class="flex flex-col items-start gap-2">
+            <p class="text-sm text-neutral-700">
+                Select the folder where your screenshots are stored. We'll watch
+                this folder for any changes and process any new screenshots.
+            </p>
+            <div class="flex items-center gap-2">
+                <button
+                    type="button"
+                    onClick={handleFolderSelect}
+                    class="bg-neutral-100 border border-neutral-300 rounded-md px-2 py-1"
+                >
+                    Select folder
+                </button>
 
-            {selectedPath() && (
-                <div class="text-left max-w-md">
-                    <p class="font-semibold">Selected folder:</p>
-                    <p class="text-sm break-all">{selectedPath()}</p>
-                </div>
-            )}
+                {selectedPath() && (
+                    <div class="text-left max-w-md">
+                        <p class="text-sm break-all">{selectedPath()}</p>
+                    </div>
+                )}
+            </div>
         </div>
     );
 }
diff --git a/frontend/src/components/item-modal/ItemModal.tsx b/frontend/src/components/item-modal/ItemModal.tsx
new file mode 100644
index 0000000..18215ed
--- /dev/null
+++ b/frontend/src/components/item-modal/ItemModal.tsx
@@ -0,0 +1,7 @@
+export const ItemModal = () => {
+    return (
+        <div class="fixed inset-4 bg-white border border-neutral-300">
+            ItemModal
+        </div>
+    );
+};
diff --git a/frontend/src/components/shortcuts/ShortcutItem.tsx b/frontend/src/components/shortcuts/ShortcutItem.tsx
index 2fc4a30..ce7df54 100644
--- a/frontend/src/components/shortcuts/ShortcutItem.tsx
+++ b/frontend/src/components/shortcuts/ShortcutItem.tsx
@@ -18,7 +18,7 @@ export const ShortcutItem: Component<ShortcutItemProps> = (props) => {
         return (
             <For each={sortedKeys}>
                 {(key) => (
-                    <kbd class="px-2 py-1 text-sm font-semibold rounded shadow-sm bg-neutral-100 border-neutral-300 text-neutral-900 ">
+                    <kbd class="px-2 py-1 text-sm font-semibold rounded  bg-neutral-100 border border-neutral-300 text-neutral-900 ">
                         {formatKey(key)}
                     </kbd>
                 )}
@@ -27,15 +27,15 @@ export const ShortcutItem: Component<ShortcutItemProps> = (props) => {
     };
 
     return (
-        <div class="flex items-center justify-between p-4 rounded-lg bg-neutral-5">
+        <div class="flex">
             <div class="flex items-center gap-4">
                 {props.isEditing ? (
                     <>
-                        <div class="flex gap-1 min-w-[120px] justify-end">
+                        <div class="flex gap-1 min-w-[144px]">
                             {props.currentKeys.length > 0 ? (
                                 renderKeys(props.currentKeys)
                             ) : (
-                                <span class="italic text-neutral-500">
+                                <span class="text-neutral-500">
                                     Press keys...
                                 </span>
                             )}
@@ -45,14 +45,14 @@ export const ShortcutItem: Component<ShortcutItemProps> = (props) => {
                                 type="button"
                                 onClick={props.onSave}
                                 disabled={props.currentKeys.length < 2}
-                                class="px-3 py-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                                class="px-3 py-1 text-sm rounded bg-neutral-900 text-white"
                             >
                                 Save
                             </button>
                             <button
                                 type="button"
                                 onClick={props.onCancel}
-                                class="p-1 rounded text-neutral-500 hover:text-neutral-700 hover:bg-neutral-200 "
+                                class="p-1 rounded text-neutral-500"
                             >
                                 <IconX class="w-4 h-4" />
                             </button>
@@ -66,7 +66,7 @@ export const ShortcutItem: Component<ShortcutItemProps> = (props) => {
                         <button
                             type="button"
                             onClick={props.onEdit}
-                            class="px-3 py-1 text-sm rounded bg-neutral-200 text-neutral-700 hover:bg-neutral-300 "
+                            class="px-3 py-1 text-sm rounded bg-neutral-200 text-neutral-700 "
                         >
                             Edit
                         </button>
diff --git a/frontend/src/components/shortcuts/Shortcuts.tsx b/frontend/src/components/shortcuts/Shortcuts.tsx
index 5098b06..7a7f3a3 100644
--- a/frontend/src/components/shortcuts/Shortcuts.tsx
+++ b/frontend/src/components/shortcuts/Shortcuts.tsx
@@ -58,13 +58,20 @@ export const Shortcuts = () => {
     };
 
     return (
-        <ShortcutItem
-            shortcut={shortcut()}
-            isEditing={isEditing()}
-            currentKeys={currentKeys()}
-            onEdit={onEditShortcut}
-            onSave={onSaveShortcut}
-            onCancel={onCancelShortcut}
-        />
+        <div class="flex flex-col gap-2 mt-4">
+            <p class="text-sm text-neutral-700">
+                Set up a to quickly open Haystack search. This shortcut also
+                reloads items when updates happen (we should definetely fix
+                that)
+            </p>
+            <ShortcutItem
+                shortcut={shortcut()}
+                isEditing={isEditing()}
+                currentKeys={currentKeys()}
+                onEdit={onEditShortcut}
+                onSave={onSaveShortcut}
+                onCancel={onCancelShortcut}
+            />
+        </div>
     );
 };