diff --git a/CLAUDE.md b/CLAUDE.md
index df317d6..77d7517 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,8 +6,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ```bash
 # Development
-pnpm dev                              # Run server with hot reload (serves web + API at port 3000)
-pnpm -F @rent-stream/app dev:vite     # Vite dev server only (for frontend hot reload)
+pnpm dev                              # Run dev server with Vite HMR (port 3000)
+pnpm -F @rent-stream/app dev:api      # API server only (port 3000, serves static dist/)
 
 # Production
 pnpm build                            # Build all packages
diff --git a/packages/app/package.json b/packages/app/package.json
index 74b4548..9ba5040 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "tsx watch src/server.ts",
-    "dev:vite": "vite",
+    "dev": "tsx watch src/dev-server.ts",
+    "dev:api": "tsx watch src/server.ts",
     "build": "vite build && tsc -p tsconfig.server.json",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
diff --git a/packages/app/src/api/index.ts b/packages/app/src/api/index.ts
index 8f9eda4..5958c5d 100644
--- a/packages/app/src/api/index.ts
+++ b/packages/app/src/api/index.ts
@@ -25,6 +25,7 @@ export const router = t.router({
         serialNumber: input.serialNumber,
         status: ItemStatus.Available,
         condition: input.condition,
+        imageUrl: input.imageUrl,
       });
 
       return { success: true, id: stream };
diff --git a/packages/app/src/api/rent-item-projection.ts b/packages/app/src/api/rent-item-projection.ts
index 1522488..ddb36d9 100644
--- a/packages/app/src/api/rent-item-projection.ts
+++ b/packages/app/src/api/rent-item-projection.ts
@@ -13,6 +13,7 @@ export interface ReadModelItem {
   currentRenterId?: string;
   damageReport?: string;
   maintenanceReason?: string;
+  imageUrl?: string;
 }
 
 // In-memory Read Model
@@ -30,6 +31,7 @@ export async function itemCreated(
     serialNumber: data.serialNumber,
     status: ItemStatus.Available,
     condition: data.initialCondition,
+    imageUrl: data.imageUrl,
   });
 }
 
diff --git a/packages/app/src/client/components/StockPicturePicker.tsx b/packages/app/src/client/components/StockPicturePicker.tsx
new file mode 100644
index 0000000..279c251
--- /dev/null
+++ b/packages/app/src/client/components/StockPicturePicker.tsx
@@ -0,0 +1,218 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Check, Image as ImageIcon, Search, X } from "lucide-react";
+import clsx from "clsx";
+import { stockPictures } from "../data/stockPictures";
+
+interface StockPicturePickerProps {
+  value?: string;
+  onChange: (url: string | undefined) => void;
+}
+
+export function StockPicturePicker({ value, onChange }: StockPicturePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Filter images locally by search query
+  const filteredImages = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return stockPictures;
+    }
+    const query = searchQuery.toLowerCase();
+    return stockPictures.filter(
+      (img) =>
+        img.alt.toLowerCase().includes(query) ||
+        img.category.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+
+  // Get unique categories for display
+  const categories = useMemo(() => {
+    const cats = new Set(stockPictures.map((p) => p.category));
+    return Array.from(cats).sort();
+  }, []);
+
+  const handleSelect = (url: string) => {
+    onChange(url);
+    setIsOpen(false);
+    setSearchQuery("");
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(undefined);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={clsx(
+          "relative w-12 h-12 rounded-xl border-2 transition-all duration-200 flex items-center justify-center overflow-hidden group",
+          value
+            ? "border-brand-300 bg-brand-50"
+            : "border-slate-200 bg-white hover:border-brand-300 hover:bg-brand-50"
+        )}
+        title={value ? "Change image" : "Add image"}
+      >
+        {value ? (
+          <>
+            <img src={value.replace("w=800", "w=100")} alt="Selected" className="w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+              <ImageIcon size={18} className="text-white" />
+            </div>
+          </>
+        ) : (
+          <ImageIcon size={20} className="text-slate-400 group-hover:text-brand-500 transition-colors" />
+        )}
+      </button>
+
+      {/* Clear button */}
+      {value && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className="absolute -top-1 -right-1 w-5 h-5 bg-slate-600 hover:bg-slate-700 rounded-full flex items-center justify-center shadow-sm"
+        >
+          <X size={12} className="text-white" />
+        </button>
+      )}
+
+      {/* Dropdown */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 8, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 8, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="absolute top-full right-0 mt-2 w-80 sm:w-96 bg-white rounded-2xl shadow-2xl border border-slate-200 z-50 overflow-hidden"
+          >
+            <div className="p-4 space-y-4 max-h-[450px] overflow-y-auto">
+              {/* Search Input */}
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search images..."
+                  className="w-full pl-9 pr-4 py-2 rounded-lg border border-slate-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-200 transition-all outline-none text-sm"
+                  autoFocus
+                />
+              </div>
+
+              {/* Category chips */}
+              {!searchQuery && (
+                <div className="flex flex-wrap gap-1.5">
+                  {categories.slice(0, 8).map((cat) => (
+                    <button
+                      key={cat}
+                      type="button"
+                      onClick={() => setSearchQuery(cat)}
+                      className="px-2 py-1 text-xs font-medium bg-slate-100 hover:bg-brand-100 text-slate-600 hover:text-brand-700 rounded-md transition-colors"
+                    >
+                      {cat}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {/* Results count */}
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-slate-500">
+                  {filteredImages.length} images
+                  {searchQuery && ` matching "${searchQuery}"`}
+                </span>
+                {searchQuery && (
+                  <button
+                    type="button"
+                    onClick={() => setSearchQuery("")}
+                    className="text-xs text-brand-600 hover:text-brand-800"
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
+
+              {/* No Results */}
+              {filteredImages.length === 0 && (
+                <div className="text-center py-8 text-slate-500">
+                  <Search className="mx-auto mb-2 text-slate-300" size={24} />
+                  <p className="text-sm">No images found</p>
+                  <button
+                    type="button"
+                    onClick={() => setSearchQuery("")}
+                    className="mt-2 text-xs text-brand-600 hover:text-brand-800"
+                  >
+                    Show all images
+                  </button>
+                </div>
+              )}
+
+              {/* Image Grid */}
+              {filteredImages.length > 0 && (
+                <div className="grid grid-cols-3 gap-2">
+                  {filteredImages.map((image) => {
+                    const isSelected = value === image.url;
+                    return (
+                      <button
+                        key={image.id}
+                        type="button"
+                        onClick={() => handleSelect(image.url)}
+                        className={clsx(
+                          "relative aspect-square rounded-lg overflow-hidden border-2 transition-all duration-150 group",
+                          isSelected
+                            ? "border-brand-500 ring-2 ring-brand-200"
+                            : "border-transparent hover:border-brand-300"
+                        )}
+                      >
+                        <img
+                          src={image.thumbnail}
+                          alt={image.alt}
+                          className="w-full h-full object-cover"
+                          loading="lazy"
+                        />
+
+                        {/* Hover overlay */}
+                        <div className={clsx(
+                          "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent transition-opacity",
+                          isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                        )}>
+                          <span className="absolute bottom-1 left-1 right-1 text-[10px] text-white font-medium truncate">
+                            {image.category}
+                          </span>
+                        </div>
+
+                        {/* Selection indicator */}
+                        {isSelected && (
+                          <div className="absolute top-1 right-1 w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center">
+                            <Check size={12} className="text-white" />
+                          </div>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/packages/app/src/client/data/stockPictures.ts b/packages/app/src/client/data/stockPictures.ts
new file mode 100644
index 0000000..ed6635e
--- /dev/null
+++ b/packages/app/src/client/data/stockPictures.ts
@@ -0,0 +1,782 @@
+export interface StockPicture {
+  id: string;
+  url: string;
+  thumbnail: string;
+  alt: string;
+  category: string;
+}
+
+// Equipment rental stock images from Unsplash
+export const stockPictures: StockPicture[] = [
+  // Cameras - DSLR & Mirrorless
+  {
+    id: "camera-1",
+    url: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=200&q=80",
+    alt: "Professional DSLR camera",
+    category: "Camera",
+  },
+  {
+    id: "camera-2",
+    url: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=200&q=80",
+    alt: "Vintage film camera",
+    category: "Camera",
+  },
+  {
+    id: "camera-3",
+    url: "https://images.unsplash.com/photo-1510127034890-ba27508e9f1c?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1510127034890-ba27508e9f1c?w=200&q=80",
+    alt: "Canon DSLR camera",
+    category: "Camera",
+  },
+  {
+    id: "camera-4",
+    url: "https://images.unsplash.com/photo-1495707902641-75cac588d2e9?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1495707902641-75cac588d2e9?w=200&q=80",
+    alt: "Nikon camera body",
+    category: "Camera",
+  },
+  {
+    id: "camera-5",
+    url: "https://images.unsplash.com/photo-1500634245200-e5245c7574ef?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1500634245200-e5245c7574ef?w=200&q=80",
+    alt: "Mirrorless camera setup",
+    category: "Camera",
+  },
+  {
+    id: "camera-6",
+    url: "https://images.unsplash.com/photo-1552168324-d612d77725e3?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1552168324-d612d77725e3?w=200&q=80",
+    alt: "Sony Alpha camera",
+    category: "Camera",
+  },
+  {
+    id: "camera-7",
+    url: "https://images.unsplash.com/photo-1581591524425-c7e0978865fc?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1581591524425-c7e0978865fc?w=200&q=80",
+    alt: "Professional camera kit",
+    category: "Camera",
+  },
+  {
+    id: "camera-8",
+    url: "https://images.unsplash.com/photo-1617005082133-548c4dd27f35?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1617005082133-548c4dd27f35?w=200&q=80",
+    alt: "Camera with lens",
+    category: "Camera",
+  },
+
+  // Video Cameras
+  {
+    id: "video-1",
+    url: "https://images.unsplash.com/photo-1585634653298-5d5c3c1e2a6e?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1585634653298-5d5c3c1e2a6e?w=200&q=80",
+    alt: "Professional video camera",
+    category: "Video",
+  },
+  {
+    id: "video-2",
+    url: "https://images.unsplash.com/photo-1579165466741-7f35e4755660?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1579165466741-7f35e4755660?w=200&q=80",
+    alt: "Cinema camera rig",
+    category: "Video",
+  },
+  {
+    id: "video-3",
+    url: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=200&q=80",
+    alt: "Video production setup",
+    category: "Video",
+  },
+  {
+    id: "video-4",
+    url: "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=200&q=80",
+    alt: "Camcorder",
+    category: "Video",
+  },
+  {
+    id: "video-5",
+    url: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=200&q=80",
+    alt: "Film camera equipment",
+    category: "Video",
+  },
+
+  // Lenses
+  {
+    id: "lens-1",
+    url: "https://images.unsplash.com/photo-1606986628253-e91e7035a0c5?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1606986628253-e91e7035a0c5?w=200&q=80",
+    alt: "Camera lens collection",
+    category: "Lens",
+  },
+  {
+    id: "lens-2",
+    url: "https://images.unsplash.com/photo-1583258292688-d0213dc5a3a8?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1583258292688-d0213dc5a3a8?w=200&q=80",
+    alt: "Telephoto lens",
+    category: "Lens",
+  },
+  {
+    id: "lens-3",
+    url: "https://images.unsplash.com/photo-1495745966610-2a67c30ad2c6?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1495745966610-2a67c30ad2c6?w=200&q=80",
+    alt: "Prime lens",
+    category: "Lens",
+  },
+  {
+    id: "lens-4",
+    url: "https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?w=200&q=80",
+    alt: "Wide angle lens",
+    category: "Lens",
+  },
+  {
+    id: "lens-5",
+    url: "https://images.unsplash.com/photo-1609953508128-cc70de50f96f?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1609953508128-cc70de50f96f?w=200&q=80",
+    alt: "Macro lens",
+    category: "Lens",
+  },
+
+  // Tripods & Support
+  {
+    id: "tripod-1",
+    url: "https://images.unsplash.com/photo-1598477564722-eb0b5aa3a5e3?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1598477564722-eb0b5aa3a5e3?w=200&q=80",
+    alt: "Professional tripod",
+    category: "Tripod",
+  },
+  {
+    id: "tripod-2",
+    url: "https://images.unsplash.com/photo-1542567455-cd733f23fbb1?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1542567455-cd733f23fbb1?w=200&q=80",
+    alt: "Camera on tripod",
+    category: "Tripod",
+  },
+  {
+    id: "tripod-3",
+    url: "https://images.unsplash.com/photo-1616423641340-a6a7eb5ed832?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1616423641340-a6a7eb5ed832?w=200&q=80",
+    alt: "Video tripod head",
+    category: "Tripod",
+  },
+  {
+    id: "gimbal-1",
+    url: "https://images.unsplash.com/photo-1598387846148-47e82ee120cc?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1598387846148-47e82ee120cc?w=200&q=80",
+    alt: "Camera gimbal stabilizer",
+    category: "Stabilizer",
+  },
+  {
+    id: "gimbal-2",
+    url: "https://images.unsplash.com/photo-1559838881-36a10a8e3f9d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1559838881-36a10a8e3f9d?w=200&q=80",
+    alt: "Handheld gimbal",
+    category: "Stabilizer",
+  },
+
+  // Lighting
+  {
+    id: "lighting-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Studio lighting equipment",
+    category: "Lighting",
+  },
+  {
+    id: "lighting-2",
+    url: "https://images.unsplash.com/photo-1565206077212-4eb8cbc38e6c?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1565206077212-4eb8cbc38e6c?w=200&q=80",
+    alt: "Softbox light",
+    category: "Lighting",
+  },
+  {
+    id: "lighting-3",
+    url: "https://images.unsplash.com/photo-1533122250115-6bb28e9a48c3?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1533122250115-6bb28e9a48c3?w=200&q=80",
+    alt: "Ring light",
+    category: "Lighting",
+  },
+  {
+    id: "lighting-4",
+    url: "https://images.unsplash.com/photo-1594394748724-e9f0e7a1a2c2?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1594394748724-e9f0e7a1a2c2?w=200&q=80",
+    alt: "LED panel light",
+    category: "Lighting",
+  },
+  {
+    id: "lighting-5",
+    url: "https://images.unsplash.com/photo-1516724562728-afc824a36e84?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1516724562728-afc824a36e84?w=200&q=80",
+    alt: "Studio flash",
+    category: "Lighting",
+  },
+  {
+    id: "lighting-6",
+    url: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=200&q=80",
+    alt: "Photography umbrella",
+    category: "Lighting",
+  },
+
+  // Drones
+  {
+    id: "drone-1",
+    url: "https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=200&q=80",
+    alt: "Aerial drone",
+    category: "Drone",
+  },
+  {
+    id: "drone-2",
+    url: "https://images.unsplash.com/photo-1507582020474-9a35b7d455d9?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1507582020474-9a35b7d455d9?w=200&q=80",
+    alt: "DJI drone",
+    category: "Drone",
+  },
+  {
+    id: "drone-3",
+    url: "https://images.unsplash.com/photo-1527977966376-1c8408f9f108?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1527977966376-1c8408f9f108?w=200&q=80",
+    alt: "Quadcopter drone",
+    category: "Drone",
+  },
+  {
+    id: "drone-4",
+    url: "https://images.unsplash.com/photo-1524143986875-3b098d78b363?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1524143986875-3b098d78b363?w=200&q=80",
+    alt: "Professional drone kit",
+    category: "Drone",
+  },
+  {
+    id: "drone-5",
+    url: "https://images.unsplash.com/photo-1508614589041-895b88991e3e?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1508614589041-895b88991e3e?w=200&q=80",
+    alt: "Racing drone",
+    category: "Drone",
+  },
+
+  // Audio Equipment
+  {
+    id: "audio-1",
+    url: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=200&q=80",
+    alt: "Professional microphone",
+    category: "Audio",
+  },
+  {
+    id: "audio-2",
+    url: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&q=80",
+    alt: "Studio microphone",
+    category: "Audio",
+  },
+  {
+    id: "audio-3",
+    url: "https://images.unsplash.com/photo-1558537348-c0f8e733989d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558537348-c0f8e733989d?w=200&q=80",
+    alt: "Wireless lavalier mic",
+    category: "Audio",
+  },
+  {
+    id: "audio-4",
+    url: "https://images.unsplash.com/photo-1545454675-3531b543be5d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1545454675-3531b543be5d?w=200&q=80",
+    alt: "Audio mixer",
+    category: "Audio",
+  },
+  {
+    id: "audio-5",
+    url: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=200&q=80",
+    alt: "Studio headphones",
+    category: "Audio",
+  },
+  {
+    id: "audio-6",
+    url: "https://images.unsplash.com/photo-1558089687-f282ffcbc126?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558089687-f282ffcbc126?w=200&q=80",
+    alt: "Boom microphone",
+    category: "Audio",
+  },
+  {
+    id: "audio-7",
+    url: "https://images.unsplash.com/photo-1520170350707-b2da59970118?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1520170350707-b2da59970118?w=200&q=80",
+    alt: "PA speaker system",
+    category: "Audio",
+  },
+  {
+    id: "audio-8",
+    url: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&q=80",
+    alt: "Concert speaker",
+    category: "Audio",
+  },
+
+  // Computers & Laptops
+  {
+    id: "laptop-1",
+    url: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=200&q=80",
+    alt: "Laptop computer",
+    category: "Computer",
+  },
+  {
+    id: "laptop-2",
+    url: "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=200&q=80",
+    alt: "MacBook Pro",
+    category: "Computer",
+  },
+  {
+    id: "laptop-3",
+    url: "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?w=200&q=80",
+    alt: "Laptop workstation",
+    category: "Computer",
+  },
+  {
+    id: "desktop-1",
+    url: "https://images.unsplash.com/photo-1593062096033-9a26b09da705?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1593062096033-9a26b09da705?w=200&q=80",
+    alt: "Desktop computer setup",
+    category: "Computer",
+  },
+  {
+    id: "monitor-1",
+    url: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=200&q=80",
+    alt: "Computer monitor",
+    category: "Computer",
+  },
+  {
+    id: "tablet-1",
+    url: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=200&q=80",
+    alt: "iPad tablet",
+    category: "Tablet",
+  },
+  {
+    id: "tablet-2",
+    url: "https://images.unsplash.com/photo-1561154464-82e9adf32764?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1561154464-82e9adf32764?w=200&q=80",
+    alt: "Drawing tablet",
+    category: "Tablet",
+  },
+
+  // Projectors & Displays
+  {
+    id: "projector-1",
+    url: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&q=80",
+    alt: "Projector equipment",
+    category: "Projector",
+  },
+  {
+    id: "projector-2",
+    url: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?w=200&q=80",
+    alt: "Cinema projector",
+    category: "Projector",
+  },
+  {
+    id: "display-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Large display screen",
+    category: "Display",
+  },
+  {
+    id: "tv-1",
+    url: "https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?w=200&q=80",
+    alt: "Smart TV",
+    category: "Display",
+  },
+
+  // Power Tools
+  {
+    id: "drill-1",
+    url: "https://images.unsplash.com/photo-1504148455328-c376907d081c?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1504148455328-c376907d081c?w=200&q=80",
+    alt: "Power drill",
+    category: "Tool",
+  },
+  {
+    id: "drill-2",
+    url: "https://images.unsplash.com/photo-1572981779307-38b8cabb2407?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1572981779307-38b8cabb2407?w=200&q=80",
+    alt: "Cordless drill set",
+    category: "Tool",
+  },
+  {
+    id: "saw-1",
+    url: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=200&q=80",
+    alt: "Circular saw",
+    category: "Tool",
+  },
+  {
+    id: "tool-1",
+    url: "https://images.unsplash.com/photo-1581147036324-c17ac41f0d20?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1581147036324-c17ac41f0d20?w=200&q=80",
+    alt: "Tool set",
+    category: "Tool",
+  },
+  {
+    id: "tool-2",
+    url: "https://images.unsplash.com/photo-1530124566582-a618bc2615dc?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1530124566582-a618bc2615dc?w=200&q=80",
+    alt: "Workshop tools",
+    category: "Tool",
+  },
+  {
+    id: "sander-1",
+    url: "https://images.unsplash.com/photo-1586864387967-d02ef85d93e8?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1586864387967-d02ef85d93e8?w=200&q=80",
+    alt: "Electric sander",
+    category: "Tool",
+  },
+
+  // Construction Equipment
+  {
+    id: "ladder-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Extension ladder",
+    category: "Construction",
+  },
+  {
+    id: "scaffold-1",
+    url: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=200&q=80",
+    alt: "Scaffolding",
+    category: "Construction",
+  },
+  {
+    id: "generator-1",
+    url: "https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?w=200&q=80",
+    alt: "Portable generator",
+    category: "Generator",
+  },
+  {
+    id: "compressor-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Air compressor",
+    category: "Construction",
+  },
+
+  // Musical Instruments
+  {
+    id: "guitar-1",
+    url: "https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=200&q=80",
+    alt: "Electric guitar",
+    category: "Music",
+  },
+  {
+    id: "guitar-2",
+    url: "https://images.unsplash.com/photo-1525201548942-d8732f6617a0?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1525201548942-d8732f6617a0?w=200&q=80",
+    alt: "Acoustic guitar",
+    category: "Music",
+  },
+  {
+    id: "keyboard-1",
+    url: "https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?w=200&q=80",
+    alt: "Piano keyboard",
+    category: "Music",
+  },
+  {
+    id: "drums-1",
+    url: "https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?w=200&q=80",
+    alt: "Drum kit",
+    category: "Music",
+  },
+  {
+    id: "amp-1",
+    url: "https://images.unsplash.com/photo-1535587566541-97121a128dc5?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1535587566541-97121a128dc5?w=200&q=80",
+    alt: "Guitar amplifier",
+    category: "Music",
+  },
+  {
+    id: "dj-1",
+    url: "https://images.unsplash.com/photo-1571266028243-e4733b0f0bb0?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1571266028243-e4733b0f0bb0?w=200&q=80",
+    alt: "DJ controller",
+    category: "Music",
+  },
+
+  // Sports Equipment
+  {
+    id: "bike-1",
+    url: "https://images.unsplash.com/photo-1485965120184-e220f721d03e?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1485965120184-e220f721d03e?w=200&q=80",
+    alt: "Mountain bike",
+    category: "Sports",
+  },
+  {
+    id: "bike-2",
+    url: "https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?w=200&q=80",
+    alt: "Road bicycle",
+    category: "Sports",
+  },
+  {
+    id: "ski-1",
+    url: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=200&q=80",
+    alt: "Ski equipment",
+    category: "Sports",
+  },
+  {
+    id: "kayak-1",
+    url: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=200&q=80",
+    alt: "Kayak",
+    category: "Sports",
+  },
+  {
+    id: "golf-1",
+    url: "https://images.unsplash.com/photo-1535131749006-b7f58c99034b?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1535131749006-b7f58c99034b?w=200&q=80",
+    alt: "Golf clubs",
+    category: "Sports",
+  },
+  {
+    id: "tennis-1",
+    url: "https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&q=80",
+    alt: "Tennis racket",
+    category: "Sports",
+  },
+
+  // Camping & Outdoor
+  {
+    id: "tent-1",
+    url: "https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=200&q=80",
+    alt: "Camping tent",
+    category: "Camping",
+  },
+  {
+    id: "tent-2",
+    url: "https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?w=200&q=80",
+    alt: "Large event tent",
+    category: "Camping",
+  },
+  {
+    id: "backpack-1",
+    url: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=200&q=80",
+    alt: "Hiking backpack",
+    category: "Camping",
+  },
+  {
+    id: "cooler-1",
+    url: "https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=200&q=80",
+    alt: "Cooler box",
+    category: "Camping",
+  },
+  {
+    id: "grill-1",
+    url: "https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?w=200&q=80",
+    alt: "Portable grill",
+    category: "Camping",
+  },
+
+  // Party & Event Equipment
+  {
+    id: "party-1",
+    url: "https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=200&q=80",
+    alt: "Party decorations",
+    category: "Party",
+  },
+  {
+    id: "party-2",
+    url: "https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?w=200&q=80",
+    alt: "Party lights",
+    category: "Party",
+  },
+  {
+    id: "table-1",
+    url: "https://images.unsplash.com/photo-1558171813-4c088753af8f?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558171813-4c088753af8f?w=200&q=80",
+    alt: "Folding tables",
+    category: "Furniture",
+  },
+  {
+    id: "chair-1",
+    url: "https://images.unsplash.com/photo-1503602642458-232111445657?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1503602642458-232111445657?w=200&q=80",
+    alt: "Event chairs",
+    category: "Furniture",
+  },
+  {
+    id: "stage-1",
+    url: "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=200&q=80",
+    alt: "Stage platform",
+    category: "Event",
+  },
+
+  // Office Equipment
+  {
+    id: "printer-1",
+    url: "https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?w=200&q=80",
+    alt: "Office printer",
+    category: "Office",
+  },
+  {
+    id: "scanner-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Document scanner",
+    category: "Office",
+  },
+  {
+    id: "shredder-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Paper shredder",
+    category: "Office",
+  },
+
+  // VR/AR Equipment
+  {
+    id: "vr-1",
+    url: "https://images.unsplash.com/photo-1622979135225-d2ba269cf1ac?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1622979135225-d2ba269cf1ac?w=200&q=80",
+    alt: "VR headset",
+    category: "VR",
+  },
+  {
+    id: "vr-2",
+    url: "https://images.unsplash.com/photo-1617802690992-15d93263d3a9?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1617802690992-15d93263d3a9?w=200&q=80",
+    alt: "Virtual reality kit",
+    category: "VR",
+  },
+
+  // Gaming
+  {
+    id: "gaming-1",
+    url: "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=200&q=80",
+    alt: "Gaming console",
+    category: "Gaming",
+  },
+  {
+    id: "gaming-2",
+    url: "https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=200&q=80",
+    alt: "Gaming controller",
+    category: "Gaming",
+  },
+  {
+    id: "gaming-3",
+    url: "https://images.unsplash.com/photo-1593305841991-05c297ba4575?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1593305841991-05c297ba4575?w=200&q=80",
+    alt: "Gaming setup",
+    category: "Gaming",
+  },
+
+  // Medical/Safety Equipment
+  {
+    id: "safety-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Safety helmet",
+    category: "Safety",
+  },
+  {
+    id: "firstaid-1",
+    url: "https://images.unsplash.com/photo-1603398938378-e54eab446dde?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1603398938378-e54eab446dde?w=200&q=80",
+    alt: "First aid kit",
+    category: "Safety",
+  },
+
+  // Cleaning Equipment
+  {
+    id: "vacuum-1",
+    url: "https://images.unsplash.com/photo-1558317374-067fb5f30001?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558317374-067fb5f30001?w=200&q=80",
+    alt: "Industrial vacuum",
+    category: "Cleaning",
+  },
+  {
+    id: "pressure-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Pressure washer",
+    category: "Cleaning",
+  },
+
+  // Kitchen Equipment
+  {
+    id: "kitchen-1",
+    url: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=200&q=80",
+    alt: "Commercial mixer",
+    category: "Kitchen",
+  },
+  {
+    id: "kitchen-2",
+    url: "https://images.unsplash.com/photo-1585515320310-259814833e62?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1585515320310-259814833e62?w=200&q=80",
+    alt: "Coffee machine",
+    category: "Kitchen",
+  },
+  {
+    id: "kitchen-3",
+    url: "https://images.unsplash.com/photo-1574269909862-7e1d70bb8078?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1574269909862-7e1d70bb8078?w=200&q=80",
+    alt: "Blender",
+    category: "Kitchen",
+  },
+
+  // Miscellaneous
+  {
+    id: "misc-1",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Storage container",
+    category: "Storage",
+  },
+  {
+    id: "misc-2",
+    url: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=200&q=80",
+    alt: "Hand truck dolly",
+    category: "Transport",
+  },
+  {
+    id: "misc-3",
+    url: "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=200&q=80",
+    alt: "Portable heater",
+    category: "Climate",
+  },
+  {
+    id: "misc-4",
+    url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80",
+    thumbnail: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&q=80",
+    alt: "Portable fan",
+    category: "Climate",
+  },
+];
diff --git a/packages/app/src/client/pages/Inventory.tsx b/packages/app/src/client/pages/Inventory.tsx
index 1f4a83e..8db7c05 100644
--- a/packages/app/src/client/pages/Inventory.tsx
+++ b/packages/app/src/client/pages/Inventory.tsx
@@ -5,6 +5,7 @@ import { ItemCondition } from "@rent-stream/domain/schemas";
 import { motion, AnimatePresence } from "framer-motion";
 import { Plus, Package, Search, AlertCircle, CheckCircle2, Clock } from "lucide-react";
 import clsx from "clsx";
+import { StockPicturePicker } from "../components/StockPicturePicker";
 
 const itemAnim = {
   initial: { opacity: 0, y: 20 },
@@ -14,6 +15,7 @@ const itemAnim = {
 
 export function Inventory() {
   const [newItemName, setNewItemName] = useState("");
+  const [selectedImageUrl, setSelectedImageUrl] = useState<string | undefined>(undefined);
 
   const { data: items, isLoading, refetch } = trpc.listItems.useQuery(undefined, {
     refetchOnWindowFocus: false,
@@ -28,6 +30,7 @@ export function Inventory() {
   const createItem = trpc.createItem.useMutation({
     onSuccess: async () => {
       setNewItemName("");
+      setSelectedImageUrl(undefined);
       await refetch();
     },
   });
@@ -37,6 +40,7 @@ export function Inventory() {
       name: newItemName,
       serialNumber: "SN-" + Math.floor(Math.random() * 10000),
       condition: ItemCondition.New,
+      imageUrl: selectedImageUrl,
     });
   };
 
@@ -80,7 +84,7 @@ export function Inventory() {
       </div>
 
       {/* Create New Item Section */}
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, scale: 0.95 }}
         animate={{ opacity: 1, scale: 1 }}
         className="glass p-6 rounded-2xl"
@@ -88,13 +92,16 @@ export function Inventory() {
         <div className="flex flex-col sm:flex-row gap-4 items-end">
           <div className="flex-1 w-full">
             <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Add New Item</label>
-            <input
-              type="text"
-              value={newItemName}
-              onChange={(e) => setNewItemName(e.target.value)}
-              placeholder="e.g. Sony A7III Camera Kit"
-              className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-200 transition-all outline-none"
-            />
+            <div className="flex gap-3 items-center">
+              <input
+                type="text"
+                value={newItemName}
+                onChange={(e) => setNewItemName(e.target.value)}
+                placeholder="e.g. Sony A7III Camera Kit"
+                className="flex-1 px-4 py-3 rounded-xl border border-slate-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-200 transition-all outline-none"
+              />
+              <StockPicturePicker value={selectedImageUrl} onChange={setSelectedImageUrl} />
+            </div>
           </div>
           <button
             onClick={handleCreate}
@@ -149,35 +156,48 @@ export function Inventory() {
                 transition={{ duration: 0.2 }}
               >
                 <Link to={`/items/${item.stream}`} className="block h-full">
-                  <div className="group h-full bg-white hover:bg-white/80 border border-slate-100 hover:border-brand-200 p-5 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-300 relative overflow-hidden">
-                    <div className="absolute top-0 right-0 p-5 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 duration-500">
-                      <Package size={80} />
-                    </div>
-
-                    <div className="flex justify-between items-start mb-4">
-                      <div className={clsx("px-2.5 py-1 rounded-lg text-xs font-semibold border flex items-center gap-1.5", getStatusColor(item.status))}>
-                        {getStatusIcon(item.status)}
-                        {item.status}
+                  <div className="group h-full bg-white hover:bg-white/80 border border-slate-100 hover:border-brand-200 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-300 relative overflow-hidden flex flex-col">
+                    {/* Thumbnail */}
+                    {item.imageUrl ? (
+                      <div className="h-32 overflow-hidden">
+                        <img
+                          src={item.imageUrl.replace("w=800", "w=400")}
+                          alt={item.name}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                        />
+                      </div>
+                    ) : (
+                      <div className="h-32 bg-slate-50 flex items-center justify-center">
+                        <Package className="text-slate-200" size={48} />
+                      </div>
+                    )}
+
+                    <div className="p-5 flex-1 flex flex-col">
+                      <div className="flex justify-between items-start mb-3">
+                        <div className={clsx("px-2.5 py-1 rounded-lg text-xs font-semibold border flex items-center gap-1.5", getStatusColor(item.status))}>
+                          {getStatusIcon(item.status)}
+                          {item.status}
+                        </div>
                       </div>
-                    </div>
 
-                    <h3 className="text-lg font-bold text-slate-800 mb-1 line-clamp-1 group-hover:text-brand-600 transition-colors">
-                      {item.name}
-                    </h3>
+                      <h3 className="text-lg font-bold text-slate-800 mb-1 line-clamp-1 group-hover:text-brand-600 transition-colors">
+                        {item.name}
+                      </h3>
 
-                    <div className="flex items-center gap-2 text-sm text-slate-500 mb-4">
-                      <span className="font-mono text-xs bg-slate-100 px-1.5 py-0.5 rounded text-slate-600">
-                        {item.stream.split('-').pop()}
-                      </span>
-                      <span>•</span>
-                      <span>{item.condition}</span>
-                    </div>
+                      <div className="flex items-center gap-2 text-sm text-slate-500 mb-4">
+                        <span className="font-mono text-xs bg-slate-100 px-1.5 py-0.5 rounded text-slate-600">
+                          {item.stream.split('-').pop()}
+                        </span>
+                        <span>•</span>
+                        <span>{item.condition}</span>
+                      </div>
 
-                    <div className="mt-auto pt-4 border-t border-slate-50 flex justify-between items-center text-xs font-medium text-slate-400 group-hover:text-brand-500 transition-colors">
-                      <span>View Details</span>
-                      <span className="opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">
-                        &rarr;
-                      </span>
+                      <div className="mt-auto pt-4 border-t border-slate-50 flex justify-between items-center text-xs font-medium text-slate-400 group-hover:text-brand-500 transition-colors">
+                        <span>View Details</span>
+                        <span className="opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">
+                          &rarr;
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </Link>
diff --git a/packages/app/src/client/pages/ItemDetail.tsx b/packages/app/src/client/pages/ItemDetail.tsx
index 3657cd9..5883566 100644
--- a/packages/app/src/client/pages/ItemDetail.tsx
+++ b/packages/app/src/client/pages/ItemDetail.tsx
@@ -3,7 +3,7 @@ import { ActionButtons } from "../components/ActionButtons";
 import { Timeline } from "../components/Timeline";
 import { trpc } from "../utils/trpc";
 import { motion } from "framer-motion";
-import { ArrowLeft, Package, Activity, AlertTriangle, User } from "lucide-react";
+import { ArrowLeft, Package, Activity, AlertTriangle, User, ImageIcon } from "lucide-react";
 import clsx from "clsx";
 
 export function ItemDetail() {
@@ -84,7 +84,29 @@ export function ItemDetail() {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
         {/* Main Info */}
         <div className="lg:col-span-2 space-y-6">
-          
+
+          {/* Item Image */}
+          {item.imageUrl ? (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="glass rounded-2xl overflow-hidden"
+            >
+              <img
+                src={item.imageUrl}
+                alt={item.name}
+                className="w-full h-64 object-cover"
+              />
+            </motion.div>
+          ) : (
+            <div className="glass rounded-2xl h-48 flex items-center justify-center bg-slate-50">
+              <div className="text-center">
+                <ImageIcon className="w-12 h-12 text-slate-300 mx-auto mb-2" />
+                <p className="text-sm text-slate-400">No image available</p>
+              </div>
+            </div>
+          )}
+
           {/* Status Cards */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div className="glass p-5 rounded-2xl flex items-start gap-4">
diff --git a/packages/app/src/dev-server.ts b/packages/app/src/dev-server.ts
new file mode 100644
index 0000000..2e9bdd2
--- /dev/null
+++ b/packages/app/src/dev-server.ts
@@ -0,0 +1,83 @@
+import cors from "@fastify/cors";
+import { fastifyTRPCPlugin } from "@trpc/server/adapters/fastify";
+import fastify from "fastify";
+import { createServer as createViteServer } from "vite";
+import { router, app, ee } from "./api/index.js";
+
+const server = fastify({
+  logger: true,
+});
+
+await server.register(cors, {
+  origin: "*",
+});
+
+// SSE endpoint for subscriptions (must be before tRPC)
+server.get("/trpc/onInventoryUpdate.subscribe", async (request, reply) => {
+  request.raw.setTimeout(0);
+
+  reply.raw.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache, no-transform",
+    Connection: "keep-alive",
+    "Access-Control-Allow-Origin": "*",
+    "X-Accel-Buffering": "no",
+  });
+  reply.raw.flushHeaders();
+
+  let eventId = 0;
+  const sendMessage = (result: unknown) => {
+    const id = (eventId++).toString();
+    reply.raw.write(`id: ${id}\ndata: ${JSON.stringify({ id, result })}\n\n`);
+  };
+
+  sendMessage({ type: "started" });
+
+  const onUpdate = () => {
+    sendMessage({ type: "data", data: { timestamp: Date.now() } });
+  };
+
+  ee.on("inventoryUpdated", onUpdate);
+
+  request.raw.on("close", () => {
+    ee.off("inventoryUpdated", onUpdate);
+  });
+});
+
+server.register(fastifyTRPCPlugin, {
+  prefix: "/trpc",
+  trpcOptions: { router },
+});
+
+// Create Vite dev server in middleware mode
+const vite = await createViteServer({
+  server: { middlewareMode: true },
+  appType: "spa",
+});
+
+// Use Vite's middleware for all non-API requests
+server.addHook("onRequest", async (request, reply) => {
+  if (request.url.startsWith("/trpc")) {
+    return; // Let Fastify handle API routes
+  }
+
+  // Let Vite handle everything else (with HMR support)
+  await new Promise<void>((resolve) => {
+    vite.middlewares(request.raw, reply.raw, () => resolve());
+  });
+  reply.hijack();
+});
+
+const start = async () => {
+  try {
+    await app.drain();
+    const port = Number(process.env.PORT) || 3000;
+    await server.listen({ port, host: "0.0.0.0" });
+    console.log(`\n  Dev server running at http://localhost:${port}\n`);
+  } catch (err) {
+    server.log.error(err);
+    process.exit(1);
+  }
+};
+
+start();
diff --git a/packages/app/test/api.spec.ts b/packages/app/test/api.spec.ts
index 37c5045..9004014 100644
--- a/packages/app/test/api.spec.ts
+++ b/packages/app/test/api.spec.ts
@@ -20,7 +20,7 @@ describe("API Router", () => {
 
     expect(result).toBeDefined();
     expect(result.id).toBeDefined();
-    
+
     await app.correlate();
     await app.drain();
 
@@ -29,6 +29,45 @@ describe("API Router", () => {
     expect(items[0].name).toBe("API Item");
   });
 
+  it("should create an item with imageUrl", async () => {
+    const imageUrl = "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&q=80";
+    const result = await caller.createItem({
+      name: "Camera with Image",
+      serialNumber: "SN-IMG-1",
+      condition: ItemCondition.New,
+      imageUrl,
+    });
+
+    expect(result).toBeDefined();
+    expect(result.id).toBeDefined();
+
+    await app.correlate();
+    await app.drain();
+
+    const items = await caller.listItems();
+    const item = items.find(i => i.name === "Camera with Image");
+    expect(item).toBeDefined();
+    expect(item?.imageUrl).toBe(imageUrl);
+  });
+
+  it("should create an item without imageUrl", async () => {
+    const result = await caller.createItem({
+      name: "Camera without Image",
+      serialNumber: "SN-NO-IMG-1",
+      condition: ItemCondition.New,
+    });
+
+    expect(result).toBeDefined();
+
+    await app.correlate();
+    await app.drain();
+
+    const items = await caller.listItems();
+    const item = items.find(i => i.name === "Camera without Image");
+    expect(item).toBeDefined();
+    expect(item?.imageUrl).toBeUndefined();
+  });
+
   it("should perform a full lifecycle via API", async () => {
     // 1. Create
     const createRes = await caller.createItem({
diff --git a/packages/domain/src/rental-item.ts b/packages/domain/src/rental-item.ts
index 9b2daf9..ece3d2a 100644
--- a/packages/domain/src/rental-item.ts
+++ b/packages/domain/src/rental-item.ts
@@ -50,6 +50,7 @@ export const RentalItem = state("RentalItem", schemas.RentalItem)
       serialNumber: data.serialNumber,
       status: schemas.ItemStatus.Available,
       condition: data.initialCondition,
+      imageUrl: data.imageUrl,
     }),
 
     ItemRented: ({ data }) => ({
@@ -87,7 +88,7 @@ export const RentalItem = state("RentalItem", schemas.RentalItem)
   .on("CreateItem", schemas.actions.CreateItem)
   .emit((data) => [
     "ItemCreated",
-    { ...data, id: randomUUID(), initialCondition: data.condition },
+    { ...data, id: randomUUID(), initialCondition: data.condition, imageUrl: data.imageUrl },
   ])
 
   // --- Rental Lifecycle ---
diff --git a/packages/domain/src/schemas/index.ts b/packages/domain/src/schemas/index.ts
index 86dc3b9..2abaaa4 100644
--- a/packages/domain/src/schemas/index.ts
+++ b/packages/domain/src/schemas/index.ts
@@ -25,6 +25,7 @@ export const RentalItem = z.object({
   currentRenterId: z.string().optional(),
   maintenanceReason: z.string().optional(),
   damageReport: z.string().optional(),
+  imageUrl: z.string().optional(),
 });
 
 export const events = {
@@ -33,6 +34,7 @@ export const events = {
     name: z.string(),
     serialNumber: z.string(),
     initialCondition: z.enum(ItemCondition),
+    imageUrl: z.string().optional(),
   }),
   ItemRented: z.object({
     renterId: z.string(),
@@ -67,6 +69,7 @@ export const actions = {
     name: z.string(),
     serialNumber: z.string(),
     condition: z.enum(ItemCondition),
+    imageUrl: z.string().optional(),
   }),
   RentItem: z.object({
     renterId: z.string(),
diff --git a/packages/domain/test/rental-item.spec.ts b/packages/domain/test/rental-item.spec.ts
index 87fb8a9..f9a1e3a 100644
--- a/packages/domain/test/rental-item.spec.ts
+++ b/packages/domain/test/rental-item.spec.ts
@@ -24,6 +24,42 @@ describe("RentalItem", () => {
     expect(snapshot.state.condition).toBe(ItemCondition.New);
   });
 
+  it("should create a rental item with an imageUrl", async () => {
+    const stream = "item-with-image";
+    const imageUrl = "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&q=80";
+    await app.do(
+      "CreateItem",
+      { stream, actor },
+      {
+        name: "Camera with Image",
+        serialNumber: "CAM-IMG-001",
+        condition: ItemCondition.New,
+        imageUrl,
+      }
+    );
+
+    const snapshot = await app.load(RentalItem, stream);
+    expect(snapshot.state.name).toBe("Camera with Image");
+    expect(snapshot.state.imageUrl).toBe(imageUrl);
+  });
+
+  it("should create a rental item without an imageUrl", async () => {
+    const stream = "item-no-image";
+    await app.do(
+      "CreateItem",
+      { stream, actor },
+      {
+        name: "Camera without Image",
+        serialNumber: "CAM-NO-IMG-001",
+        condition: ItemCondition.New,
+      }
+    );
+
+    const snapshot = await app.load(RentalItem, stream);
+    expect(snapshot.state.name).toBe("Camera without Image");
+    expect(snapshot.state.imageUrl).toBeUndefined();
+  });
+
   it("should rent an available item", async () => {
     const stream = "item-123";
     await app.do(
diff --git a/progress.txt b/progress.txt
index 220a299..073b495 100644
--- a/progress.txt
+++ b/progress.txt
@@ -4,3 +4,10 @@ This file tracks AI-assisted development progress.
 Each entry documents: date, feature, decisions, files changed, tests, and concerns.
 
 ---
+
+[2026-01-14] #1 feat: add stock picture selection when creating rental items
+- Files: schemas/index.ts, rental-item.ts, index.ts, rent-item-projection.ts, Inventory.tsx, ItemDetail.tsx, StockPicturePicker.tsx, stockPictures.ts, dev-server.ts, tests
+- Changes: Added imageUrl field to domain state/events/actions, created compact StockPicturePicker (icon button with dropdown), 100 curated stock images with local search/filter by name and category
+- Decisions: Local filtering instead of API (no config needed), picker positioned inline next to item name input, category chips for quick filtering
+- Dev setup: Single dev server (dev-server.ts) integrates Vite middleware with Fastify - both API and frontend on port 3000 with HMR
+- Issues: None