diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index eabe025..cc85368 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index 10e7e33..d83836f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,44 +1,46 @@
 {
-    "name": "haystack",
-    "version": "0.1.0",
-    "description": "Screenshots that organize themselves",
-    "type": "module",
-    "scripts": {
-        "start": "vite",
-        "dev": "vite",
-        "build": "vite build",
-        "serve": "vite preview",
-        "tauri": "tauri",
-        "lint": "bunx @biomejs/biome lint .",
-        "format": "bunx @biomejs/biome format . --write"
-    },
-    "license": "MIT",
-    "dependencies": {
-        "@kobalte/core": "^0.13.9",
-        "@kobalte/tailwindcss": "^0.9.0",
-        "@solidjs/router": "^0.15.3",
-        "@tabler/icons-solidjs": "^3.30.0",
-        "@tauri-apps/api": "^2",
-        "@tauri-apps/plugin-dialog": "~2",
-        "@tauri-apps/plugin-http": "~2",
-        "@tauri-apps/plugin-opener": "^2",
-        "clsx": "^2.1.1",
-        "fuse.js": "^7.1.0",
-        "jwt-decode": "^4.0.0",
-        "solid-js": "^1.9.3",
-        "solid-motionone": "^1.0.3",
-        "tailwind-scrollbar-hide": "^2.0.0",
-        "valibot": "^1.0.0-rc.2"
-    },
-    "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
-        "@tauri-apps/cli": "^2",
-        "autoprefixer": "^10.4.20",
-        "postcss": "^8.5.3",
-        "postcss-cli": "^11.0.0",
-        "tailwindcss": "3.4.0",
-        "typescript": "~5.6.2",
-        "vite": "^6.0.3",
-        "vite-plugin-solid": "^2.11.0"
-    }
+  "name": "haystack",
+  "version": "0.1.0",
+  "description": "Screenshots that organize themselves",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "tauri": "tauri",
+    "lint": "bunx @biomejs/biome lint .",
+    "format": "bunx @biomejs/biome format . --write"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@kobalte/core": "^0.13.9",
+    "@kobalte/tailwindcss": "^0.9.0",
+    "@solidjs/router": "^0.15.3",
+    "@tabler/icons-solidjs": "^3.30.0",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-dialog": "~2",
+    "@tauri-apps/plugin-http": "~2",
+    "@tauri-apps/plugin-opener": "^2",
+    "clsx": "^2.1.1",
+    "fuse.js": "^7.1.0",
+    "jwt-decode": "^4.0.0",
+    "solid-js": "^1.9.3",
+    "solid-markdown": "^2.0.14",
+    "solid-motionone": "^1.0.3",
+    "solidjs-markdown": "^0.2.0",
+    "tailwind-scrollbar-hide": "^2.0.0",
+    "valibot": "^1.0.0-rc.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@tauri-apps/cli": "^2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "3.4.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3",
+    "vite-plugin-solid": "^2.11.0"
+  }
 }
diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx
index 9962600..838cc97 100644
--- a/frontend/src/Search.tsx
+++ b/frontend/src/Search.tsx
@@ -1,8 +1,8 @@
 import { Button } from "@kobalte/core/button";
-import { A } from "@solidjs/router";
+
 import { IconSearch, IconSettings } from "@tabler/icons-solidjs";
 import { listen } from "@tauri-apps/api/event";
-import clsx from "clsx";
+
 import Fuse from "fuse.js";
 import {
     For,
@@ -12,14 +12,13 @@ import {
     onCleanup,
     onMount,
 } from "solid-js";
-import { ImageViewer } from "./components/ImageViewer";
+
 import { SearchCard } from "./components/search-card/SearchCard";
-import { SearchCardContact } from "./components/search-card/SearchCardContact";
-import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
-import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
-import { SearchCardNote } from "./components/search-card/SearchCardNote";
+
+import { invoke } from "@tauri-apps/api/core";
+import { ItemModal } from "./components/item-modal/ItemModal";
+import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor";
 import { type UserImage, getUserImages } from "./network";
-import { getCardSize } from "./utils/getCardSize";
 
 // How wonderfully functional
 const getAllValues = (object: object): Array<string> => {
@@ -110,6 +109,22 @@ export const Search = () => {
         });
     });
 
+    const [shortcut, setShortcut] = createSignal<Shortcut>([]);
+
+    async function getCurrentShortcut() {
+        try {
+            const res: string = await invoke("get_current_shortcut");
+            console.log("DBG: ", res);
+            setShortcut(res?.split("+"));
+        } catch (err) {
+            console.error("Failed to fetch shortcut:", err);
+        }
+    }
+
+    onMount(() => {
+        getCurrentShortcut();
+    });
+
     return (
         <>
             <main class="container pt-2">
@@ -174,9 +189,21 @@ export const Search = () => {
                 </div>
 
                 <div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
-                    footer
+                    <p class="text-sm text-neutral-700">
+                        Use{" "}
+                        {shortcut().length > 0
+                            ? shortcut().join("+")
+                            : "shortcut"}{" "}
+                        globally to toggle and reload this window
+                    </p>
                 </div>
             </main>
+            {selectedItem() && (
+                <ItemModal
+                    item={selectedItem() as UserImage}
+                    onClose={() => setSelectedItem(null)}
+                />
+            )}
         </>
     );
 };
diff --git a/frontend/src/components/item-modal/ItemModal.tsx b/frontend/src/components/item-modal/ItemModal.tsx
index 18215ed..8159ad5 100644
--- a/frontend/src/components/item-modal/ItemModal.tsx
+++ b/frontend/src/components/item-modal/ItemModal.tsx
@@ -1,7 +1,25 @@
-export const ItemModal = () => {
+import { IconX } from "@tabler/icons-solidjs";
+import type { UserImage } from "../../network";
+
+type Props = {
+    item: UserImage;
+    onClose: () => void;
+};
+
+export const ItemModal = (props: Props) => {
     return (
-        <div class="fixed inset-4 bg-white border border-neutral-300">
-            ItemModal
+        <div class="fixed inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
+            <div class="flex justify-between">
+                <h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
+                <button type="button" onClick={props.onClose}>
+                    <IconX size={24} class="text-neutral-500" />
+                </button>
+            </div>
+            <div class="flex flex-col gap-2 mb-2">
+                <p class="text-sm text-neutral-500">
+                    {JSON.stringify(props.item.data, null, 2)}
+                </p>
+            </div>
         </div>
     );
 };
diff --git a/frontend/src/components/search-card/SearchCardContact.tsx b/frontend/src/components/search-card/SearchCardContact.tsx
index 817c06c..553f7f4 100644
--- a/frontend/src/components/search-card/SearchCardContact.tsx
+++ b/frontend/src/components/search-card/SearchCardContact.tsx
@@ -12,13 +12,15 @@ export const SearchCardContact = ({ item }: Props) => {
 
     return (
         <div class="absolute inset-0 p-3 bg-orange-50">
-            <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
-                <IconUser size={20} class="text-neutral-500 mt-1" />
+            <div class="flex mb-1 items-center gap-1">
+                <IconUser size={14} class="text-neutral-500" />
+                <p class="text-xs text-neutral-500">Contact</p>
             </div>
-            <p class="text-xs text-neutral-500">{data.PhoneNumber}</p>
-            <Separator class="my-2" />
-            <p class="text-xs text-neutral-500">{data.Email}</p>
+            <p class="text-sm text-neutral-900 font-bold mb-1">
+                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
+            </p>
+            <p class="text-xs text-neutral-700">Phone: {data.PhoneNumber}</p>
+            <p class="text-xs text-neutral-700">Mail: {data.Email}</p>
         </div>
     );
 };
diff --git a/frontend/src/components/search-card/SearchCardEvent.tsx b/frontend/src/components/search-card/SearchCardEvent.tsx
index 69c2665..ba4837c 100644
--- a/frontend/src/components/search-card/SearchCardEvent.tsx
+++ b/frontend/src/components/search-card/SearchCardEvent.tsx
@@ -10,11 +10,14 @@ export const SearchCardEvent = ({ item }: Props) => {
 
     return (
         <div class="absolute inset-0 p-3 bg-purple-50">
-            <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
-                <IconCalendar size={20} class="text-neutral-500 mt-1" />
+            <div class="flex mb-1 items-center gap-1">
+                <IconCalendar size={14} class="text-neutral-500" />
+                <p class="text-xs text-neutral-500">Event</p>
             </div>
-            <p class="text-xs text-neutral-500">
+            <p class="text-sm text-neutral-900 font-bold mb-1">
+                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
+            </p>
+            <p class="text-xs text-neutral-700">
                 Organized by {data.Organizer?.Name ?? "unknown"} on{" "}
                 {data.StartDateTime
                     ? new Date(data.StartDateTime).toLocaleDateString("en-US", {
diff --git a/frontend/src/components/search-card/SearchCardLocation.tsx b/frontend/src/components/search-card/SearchCardLocation.tsx
index faaebc3..7eb0f11 100644
--- a/frontend/src/components/search-card/SearchCardLocation.tsx
+++ b/frontend/src/components/search-card/SearchCardLocation.tsx
@@ -10,11 +10,14 @@ export const SearchCardLocation = ({ item }: Props) => {
 
     return (
         <div class="absolute inset-0 p-3 bg-red-50">
-            <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
-                <IconMapPin size={20} class="text-neutral-500 mt-1" />
+            <div class="flex mb-1 items-center gap-1">
+                <IconMapPin size={14} class="text-neutral-500" />
+                <p class="text-xs text-neutral-500">Location</p>
             </div>
-            <p class="text-xs text-neutral-500">{data.Address}</p>
+            <p class="text-sm text-neutral-900 font-bold mb-1">
+                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
+            </p>
+            <p class="text-xs text-neutral-700">Address: {data.Address}</p>
         </div>
     );
 };
diff --git a/frontend/src/components/search-card/SearchCardNote.tsx b/frontend/src/components/search-card/SearchCardNote.tsx
index 7011c68..e60432b 100644
--- a/frontend/src/components/search-card/SearchCardNote.tsx
+++ b/frontend/src/components/search-card/SearchCardNote.tsx
@@ -1,4 +1,5 @@
 import { Separator } from "@kobalte/core/separator";
+import SolidjsMarkdown from "solidjs-markdown";
 
 import { IconNote } from "@tabler/icons-solidjs";
 import type { UserImage } from "../../network";
@@ -12,11 +13,16 @@ export const SearchCardNote = ({ item }: Props) => {
 
     return (
         <div class="absolute inset-0 p-3 bg-green-50">
-            <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
-                <IconNote size={20} class="text-neutral-500 mt-1" />
+            <div class="flex mb-1 items-center gap-1">
+                <IconNote size={14} class="text-neutral-500" />
+                <p class="text-xs text-neutral-500">Note</p>
             </div>
-            <p class="text-xs text-neutral-500">Note</p>
+            <p class="text-sm text-neutral-900 font-bold mb-1">
+                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
+            </p>
+            <p class="text-xs text-neutral-700">
+                <SolidjsMarkdown>{data.Content}</SolidjsMarkdown>
+            </p>
         </div>
     );
 };