diff --git a/frontend/src/app/seller/fundraiser/[id]/components/ItemDialog.tsx b/frontend/src/app/seller/fundraiser/[id]/components/ItemDialog.tsx
index 4346c77d..d93b0b2e 100644
--- a/frontend/src/app/seller/fundraiser/[id]/components/ItemDialog.tsx
+++ b/frontend/src/app/seller/fundraiser/[id]/components/ItemDialog.tsx
@@ -14,6 +14,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import UploadImageComponent from "@/components/custom/UploadImageComponent";
+import { UnsplashPickerModal } from "@/components/custom/UnsplashPickerModal";
 import { UseFormReturn } from "react-hook-form";
 import { CompleteItemSchema, CreateFundraiserItemBody } from "common";
 import { z } from "zod";
@@ -21,9 +22,11 @@ import { toast } from "sonner";
 import { DEFAULT_ITEM_VALUES } from "./EditItems";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { SetStateAction } from "react";
+import { SetStateAction, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Decimal } from "decimal.js";
+import { ImageIcon, X } from "lucide-react";
+import Image from "next/image";
 
 // Type for tracking pending new items
 export type PendingItemChanges = {
@@ -68,6 +71,8 @@ export function ItemDialog({
 	onAddPendingItem?: OnAddPendingItem;
 	onUpdatePendingItem?: OnUpdatePendingItem;
 }) {
+	const [unsplashOpen, setUnsplashOpen] = useState(false);
+
 	const handleSubmitItem = async (
 		data: z.infer<typeof CreateFundraiserItemBody>
 	) => {
@@ -128,110 +133,158 @@ export function ItemDialog({
 	};
 
 	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogContent className="max-w-2xl">
-				<Form {...form}>
-					<form onSubmit={form.handleSubmit(handleSubmitItem)}>
-						<DialogHeader>
-							<DialogTitle>
-								{mode === "add"
-									? "Add Fundraiser Item"
-									: "Edit Fundraiser Item"}
-							</DialogTitle>
-						</DialogHeader>
-						<div className="grid gap-4 py-4">
-							<FormField
-								control={form.control}
-								name="name"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Item Name</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="T-Shirt, Cookie Box, etc."
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<FormField
-								control={form.control}
-								name="description"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Description</FormLabel>
-										<FormControl>
-											<Textarea
-												placeholder="Describe your item..."
-												{...field}
-												className="min-h-20"
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<FormField
-								control={form.control}
-								name="imageUrl"
-								render={() => (
-									<FormItem>
-										<FormLabel>Image</FormLabel>
-										<UploadImageComponent
-											imageUrls={[form.getValues("imageUrl") || ""]}
-											setImageUrls={(imageUrls: string[]) => {
-												if (imageUrls.length > 0) {
-													form.setValue("imageUrl", imageUrls[0]);
-												} else {
-													form.setValue("imageUrl", undefined);
-												}
-											}}
-											folder="items"
-										/>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<FormField
-								control={form.control}
-								name="price"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Price</FormLabel>
-										<FormControl>
-											<Input
-												type="number"
-												step="0.01"
-												placeholder="0.00"
-												value={
-													field.value !== undefined
-														? field.value.toString()
-														: "0"
-												}
-												onChange={(e) => {
-													const numericValue = parseFloat(e.target.value) || 0;
-													field.onChange(numericValue);
+		<>
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogContent className="max-w-2xl">
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(handleSubmitItem)}>
+							<DialogHeader>
+								<DialogTitle>
+									{mode === "add"
+										? "Add Fundraiser Item"
+										: "Edit Fundraiser Item"}
+								</DialogTitle>
+							</DialogHeader>
+							<div className="grid gap-4 py-4">
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Item Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="T-Shirt, Cookie Box, etc."
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Describe your item..."
+													{...field}
+													className="min-h-20"
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="imageUrl"
+									render={() => (
+										<FormItem>
+											<div className="flex items-center justify-between">
+												<FormLabel>Image</FormLabel>
+												<Button
+													type="button"
+													variant="outline"
+													size="sm"
+													onClick={() => setUnsplashOpen(true)}
+													className="flex items-center gap-1.5 text-xs h-7 px-2">
+													<ImageIcon className="h-3.5 w-3.5" />
+													Search Unsplash
+												</Button>
+											</div>
+											<UploadImageComponent
+												imageUrls={[form.getValues("imageUrl") || ""]}
+												setImageUrls={(imageUrls: string[]) => {
+													if (imageUrls.length > 0) {
+														form.setValue("imageUrl", imageUrls[0]);
+													} else {
+														form.setValue("imageUrl", undefined);
+													}
 												}}
+												folder="items"
 											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						<DialogFooter>
-							<Button type="submit">
-								{mode === "add" ? "Add Item" : "Save Changes"}
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
+											{(() => {
+												const url = form.watch("imageUrl");
+												if (!url || !url.includes("unsplash.com")) return null;
+												return (
+													<div className="relative aspect-video bg-gray-50 rounded-md border overflow-hidden group min-h-[100px] mt-2">
+														<Image
+															src={url}
+															fill
+															sizes="(max-width: 768px) 100vw, 50vw"
+															alt="Unsplash photo"
+															className="object-cover"
+														/>
+														<button
+															type="button"
+															onClick={() =>
+																form.setValue("imageUrl", undefined)
+															}
+															className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+															aria-label="Remove image">
+															<X className="h-3 w-3" />
+														</button>
+													</div>
+												);
+											})()}
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="price"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Price</FormLabel>
+											<FormControl>
+												<Input
+													type="number"
+													step="0.01"
+													placeholder="0.00"
+													value={
+														field.value !== undefined
+															? field.value.toString()
+															: "0"
+													}
+													onChange={(e) => {
+														const numericValue = parseFloat(e.target.value) || 0;
+														field.onChange(numericValue);
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+							<DialogFooter>
+								<Button type="submit">
+									{mode === "add" ? "Add Item" : "Save Changes"}
+								</Button>
+							</DialogFooter>
+						</form>
+					</Form>
+				</DialogContent>
+			</Dialog>
+
+			<UnsplashPickerModal
+				open={unsplashOpen}
+				onOpenChange={setUnsplashOpen}
+				onSelectPhotos={(urls) => {
+					if (urls.length > 0) {
+						form.setValue("imageUrl", urls[0]);
+					}
+				}}
+				allowMultiple={false}
+			/>
+		</>
 	);
 }
diff --git a/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserAddItemsForm.tsx b/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserAddItemsForm.tsx
index cd6fa859..338fe52e 100644
--- a/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserAddItemsForm.tsx
+++ b/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserAddItemsForm.tsx
@@ -12,7 +12,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { CreateFundraiserItemBody } from "common";
 import { Dispatch, SetStateAction, useState } from "react";
 import { z } from "zod";
-import { PlusCircle, X, ShoppingCart } from "lucide-react";
+import { PlusCircle, X, ShoppingCart, ImageIcon } from "lucide-react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import {
@@ -32,6 +32,8 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import UploadImageComponent from "@/components/custom/UploadImageComponent";
+import { UnsplashPickerModal } from "@/components/custom/UnsplashPickerModal";
+import Image from "next/image";
 
 export function FundraiserAddItemsForm({
 	items,
@@ -49,6 +51,7 @@ export function FundraiserAddItemsForm({
 	onSave: () => void;
 }) {
 	const [open, setOpen] = useState(false);
+	const [unsplashOpen, setUnsplashOpen] = useState(false);
 
 	const form = useForm<z.infer<typeof CreateFundraiserItemBody>>({
 		resolver: zodResolver(CreateFundraiserItemBody),
@@ -72,171 +75,220 @@ export function FundraiserAddItemsForm({
 	};
 
 	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Add Items to Your Fundraiser</CardTitle>
-				<CardDescription>
-					Add items that people can purchase to support your fundraiser. You can
-					always add more items after the creation of this fundraiser.
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div className="flex justify-end mb-4">
-					<Dialog open={open} onOpenChange={setOpen}>
-						<DialogTrigger asChild>
-							<Button>
-								<PlusCircle className="mr-2 h-4 w-4" />
-								Add Item
-							</Button>
-						</DialogTrigger>
-						<DialogContent>
-							<Form {...form}>
-								<form onSubmit={form.handleSubmit(handleAddItem)}>
-									<DialogHeader>
-										<DialogTitle>Add Fundraiser Item</DialogTitle>
-									</DialogHeader>
-									<div className="grid gap-4 py-4">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Item Name</FormLabel>
-													<FormControl>
-														<Input
-															placeholder="T-Shirt, Cookie Box, etc."
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="description"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Description</FormLabel>
-													<FormControl>
-														<Textarea
-															placeholder="Describe your item..."
-															{...field}
-															className="min-h-20"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="imageUrl"
-											render={() => (
-												<FormItem>
-													<FormLabel>Image</FormLabel>
-													<UploadImageComponent
-														imageUrls={[form.getValues("imageUrl") || ""]}
-														setImageUrls={(imageUrls: string[]) => {
-															if (imageUrls.length > 0) {
-																form.setValue("imageUrl", imageUrls[0]);
-															} else {
-																form.setValue("imageUrl", undefined);
-															}
-														}}
-														folder="items"
-													/>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+		<>
+			<Card>
+				<CardHeader>
+					<CardTitle>Add Items to Your Fundraiser</CardTitle>
+					<CardDescription>
+						Add items that people can purchase to support your fundraiser. You can
+						always add more items after the creation of this fundraiser.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="flex justify-end mb-4">
+						<Dialog open={open} onOpenChange={setOpen}>
+							<DialogTrigger asChild>
+								<Button>
+									<PlusCircle className="mr-2 h-4 w-4" />
+									Add Item
+								</Button>
+							</DialogTrigger>
+							<DialogContent>
+								<Form {...form}>
+									<form onSubmit={form.handleSubmit(handleAddItem)}>
+										<DialogHeader>
+											<DialogTitle>Add Fundraiser Item</DialogTitle>
+										</DialogHeader>
+										<div className="grid gap-4 py-4">
+											<FormField
+												control={form.control}
+												name="name"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Item Name</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="T-Shirt, Cookie Box, etc."
+																{...field}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
 
-										<FormField
-											control={form.control}
-											name="price"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Price</FormLabel>
-													<FormControl>
-														<Input
-															type="number"
-															step="0.01"
-															placeholder="0.00"
-															value={field.value?.toString() || "0"}
-															onChange={(e) => {
-																// Convert string value to number for the form state
-																const numericValue =
-																	parseFloat(e.target.value) || 0;
-																field.onChange(numericValue);
+											<FormField
+												control={form.control}
+												name="description"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Description</FormLabel>
+														<FormControl>
+															<Textarea
+																placeholder="Describe your item..."
+																{...field}
+																className="min-h-20"
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+											<FormField
+												control={form.control}
+												name="imageUrl"
+												render={() => (
+													<FormItem>
+														<div className="flex items-center justify-between">
+															<FormLabel>Image</FormLabel>
+															<Button
+																type="button"
+																variant="outline"
+																size="sm"
+																onClick={() => setUnsplashOpen(true)}
+																className="flex items-center gap-1.5 text-xs h-7 px-2">
+																<ImageIcon className="h-3.5 w-3.5" />
+																Search Unsplash
+															</Button>
+														</div>
+														<UploadImageComponent
+															imageUrls={[form.getValues("imageUrl") || ""]}
+															setImageUrls={(imageUrls: string[]) => {
+																if (imageUrls.length > 0) {
+																	form.setValue("imageUrl", imageUrls[0]);
+																} else {
+																	form.setValue("imageUrl", undefined);
+																}
 															}}
+															folder="items"
 														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</div>
-									<DialogFooter>
-										<Button type="submit">Add Item</Button>
-									</DialogFooter>
-								</form>
-							</Form>
-						</DialogContent>
-					</Dialog>
-				</div>
+														{(() => {
+															const url = form.watch("imageUrl");
+															if (!url || !url.includes("unsplash.com"))
+																return null;
+															return (
+																<div className="relative aspect-video bg-gray-50 rounded-md border overflow-hidden group min-h-[100px] mt-2">
+																	<Image
+																		src={url}
+																		fill
+																		sizes="(max-width: 768px) 100vw, 50vw"
+																		alt="Unsplash photo"
+																		className="object-cover"
+																	/>
+																	<button
+																		type="button"
+																		onClick={() =>
+																			form.setValue("imageUrl", undefined)
+																		}
+																		className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+																		aria-label="Remove image">
+																		<X className="h-3 w-3" />
+																	</button>
+																</div>
+															);
+														})()}
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
 
-				{items.length === 0 ? (
-					<div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg border-dashed">
-						<ShoppingCart className="w-12 h-12 text-gray-400 mb-4" />
-						<p className="text-sm text-gray-500">
-							No items added yet. Click &quot;Add Item&quot; to create items for
-							your fundraiser.
-						</p>
+											<FormField
+												control={form.control}
+												name="price"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Price</FormLabel>
+														<FormControl>
+															<Input
+																type="number"
+																step="0.01"
+																placeholder="0.00"
+																value={field.value?.toString() || "0"}
+																onChange={(e) => {
+																	// Convert string value to number for the form state
+																	const numericValue =
+																		parseFloat(e.target.value) || 0;
+																	field.onChange(numericValue);
+																}}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</div>
+										<DialogFooter>
+											<Button type="submit">Add Item</Button>
+										</DialogFooter>
+									</form>
+								</Form>
+							</DialogContent>
+						</Dialog>
 					</div>
-				) : (
-					<div className="space-y-4">
-						{items.map((item, index) => (
-							<div
-								key={index}
-								className="flex items-start justify-between p-4 border rounded-lg">
-								<div className="flex-1">
-									<div className="flex items-center gap-2">
-										<h4 className="font-medium">{item.name}</h4>
+
+					{items.length === 0 ? (
+						<div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg border-dashed">
+							<ShoppingCart className="w-12 h-12 text-gray-400 mb-4" />
+							<p className="text-sm text-gray-500">
+								No items added yet. Click &quot;Add Item&quot; to create items for
+								your fundraiser.
+							</p>
+						</div>
+					) : (
+						<div className="space-y-4">
+							{items.map((item, index) => (
+								<div
+									key={index}
+									className="flex items-start justify-between p-4 border rounded-lg">
+									<div className="flex-1">
+										<div className="flex items-center gap-2">
+											<h4 className="font-medium">{item.name}</h4>
+										</div>
+										<p className="text-sm text-gray-500 mt-1">
+											{item.description}
+										</p>
+										<p className="text-sm font-medium mt-2">
+											${Number(item.price).toFixed(2)}
+										</p>
 									</div>
-									<p className="text-sm text-gray-500 mt-1">
-										{item.description}
-									</p>
-									<p className="text-sm font-medium mt-2">
-										${Number(item.price).toFixed(2)}
-									</p>
+									<Button
+										variant="ghost"
+										size="icon"
+										onClick={() => handleRemoveItem(index)}>
+										<X className="h-4 w-4" />
+									</Button>
 								</div>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => handleRemoveItem(index)}>
-									<X className="h-4 w-4" />
-								</Button>
-							</div>
-						))}
-					</div>
-				)}
-			</CardContent>
-			<CardFooter className="flex justify-between">
-				<Button variant="outline" onClick={onBack}>
-					Back
-				</Button>
-				<div className="flex gap-2">
-					<Button
-						onClick={onSave}
-						className="text-[#333F37] border border-current bg-transparent hover:bg-[#e6f0ea]">
-						Save
-					</Button>
-					<Button type="button" onClick={onNext}>
-						Next
+							))}
+						</div>
+					)}
+				</CardContent>
+				<CardFooter className="flex justify-between">
+					<Button variant="outline" onClick={onBack}>
+						Back
 					</Button>
-				</div>
-			</CardFooter>
-		</Card>
+					<div className="flex gap-2">
+						<Button
+							onClick={onSave}
+							className="text-[#333F37] border border-current bg-transparent hover:bg-[#e6f0ea]">
+							Save
+						</Button>
+						<Button type="button" onClick={onNext}>
+							Next
+						</Button>
+					</div>
+				</CardFooter>
+			</Card>
+
+			<UnsplashPickerModal
+				open={unsplashOpen}
+				onOpenChange={setUnsplashOpen}
+				onSelectPhotos={(urls) => {
+					if (urls.length > 0) {
+						form.setValue("imageUrl", urls[0]);
+					}
+				}}
+				allowMultiple={false}
+			/>
+		</>
 	);
 }
diff --git a/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserBasicInfoForm.tsx b/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserBasicInfoForm.tsx
index a2c7fac3..fb28d8d9 100644
--- a/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserBasicInfoForm.tsx
+++ b/frontend/src/app/seller/org/[id]/create-fundraiser/components/FundraiserBasicInfoForm.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -24,6 +27,9 @@ import { z } from "zod";
 import { DateTimePicker } from "@/components/custom/DateTimePicker";
 import { ControllerRenderProps } from "react-hook-form";
 import UploadImageComponent from "@/components/custom/UploadImageComponent";
+import { UnsplashPickerModal } from "@/components/custom/UnsplashPickerModal";
+import { ImageIcon, X } from "lucide-react";
+import Image from "next/image";
 
 const BasicInformationSchema = CreateFundraiserBody.omit({
 	organizationId: true,
@@ -66,6 +72,8 @@ export function FundraiserBasicInfoForm({
 		defaultValues: defaultValues,
 	});
 
+	const [unsplashOpen, setUnsplashOpen] = useState(false);
+
 	return (
 		<Card>
 			<Form {...form}>
@@ -117,7 +125,18 @@ export function FundraiserBasicInfoForm({
 							name="imageUrls"
 							render={() => (
 								<FormItem>
-									<FormLabel>Images (Optional)</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Images (Optional)</FormLabel>
+										<Button
+											type="button"
+											variant="outline"
+											size="sm"
+											onClick={() => setUnsplashOpen(true)}
+											className="flex items-center gap-1.5 text-xs h-7 px-2">
+											<ImageIcon className="h-3.5 w-3.5" />
+											Search Unsplash
+										</Button>
+									</div>
 									<UploadImageComponent
 										imageUrls={form.getValues("imageUrls")}
 										setImageUrls={(imageUrls: string[]) => {
@@ -126,6 +145,44 @@ export function FundraiserBasicInfoForm({
 										folder="fundraisers"
 										allowMultiple
 									/>
+									{/* Preview strip for Unsplash-sourced images */}
+									{(() => {
+										const unsplashUrls = (
+											form.watch("imageUrls") ?? []
+										).filter((url) => url.includes("unsplash.com"));
+										if (unsplashUrls.length === 0) return null;
+										return (
+											<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2">
+												{unsplashUrls.map((url) => (
+													<div
+														key={url}
+														className="relative aspect-video bg-gray-50 rounded-md border overflow-hidden group min-h-[100px]">
+														<Image
+															src={url}
+															fill
+															sizes="(max-width: 768px) 50vw, 33vw"
+															alt="Unsplash photo"
+															className="object-cover"
+														/>
+														<button
+															type="button"
+															onClick={() => {
+																const current =
+																	form.getValues("imageUrls") ?? [];
+																form.setValue(
+																	"imageUrls",
+																	current.filter((u) => u !== url)
+																);
+															}}
+															className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+															aria-label="Remove image">
+															<X className="h-3 w-3" />
+														</button>
+													</div>
+												))}
+											</div>
+										);
+									})()}
 									<FormMessage />
 								</FormItem>
 							)}
@@ -199,6 +256,16 @@ export function FundraiserBasicInfoForm({
 					</CardFooter>
 				</form>
 			</Form>
+
+			<UnsplashPickerModal
+				open={unsplashOpen}
+				onOpenChange={setUnsplashOpen}
+				onSelectPhotos={(urls) => {
+					const current = form.getValues("imageUrls") ?? [];
+					form.setValue("imageUrls", [...current, ...urls]);
+				}}
+				allowMultiple
+			/>
 		</Card>
 	);
 }
diff --git a/frontend/src/components/custom/UnsplashPickerModal.tsx b/frontend/src/components/custom/UnsplashPickerModal.tsx
new file mode 100644
index 00000000..14268029
--- /dev/null
+++ b/frontend/src/components/custom/UnsplashPickerModal.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Check, Search } from "lucide-react";
+
+interface UnsplashPhoto {
+	id: string;
+	urls: {
+		small: string;
+		regular: string;
+	};
+	links: {
+		download_location: string;
+	};
+	user: {
+		name: string;
+		links: {
+			html: string;
+		};
+	};
+}
+
+interface UnsplashPickerModalProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSelectPhotos: (urls: string[]) => void;
+	allowMultiple?: boolean;
+}
+
+export function UnsplashPickerModal({
+	open,
+	onOpenChange,
+	onSelectPhotos,
+	allowMultiple = true,
+}: UnsplashPickerModalProps) {
+	const [query, setQuery] = useState("");
+	const [debouncedQuery, setDebouncedQuery] = useState("");
+	const [photos, setPhotos] = useState<UnsplashPhoto[]>([]);
+	const [page, setPage] = useState(1);
+	const [totalPages, setTotalPages] = useState(0);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [selectedPhotoIds, setSelectedPhotoIds] = useState<Set<string>>(
+		new Set()
+	);
+
+	// Debounce query by 500ms
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedQuery(query);
+			setPage(1);
+		}, 500);
+		return () => clearTimeout(timer);
+	}, [query]);
+
+	// Fetch photos when debouncedQuery or page changes
+	const fetchPhotos = useCallback(async () => {
+		if (!debouncedQuery.trim()) {
+			setPhotos([]);
+			setTotalPages(0);
+			return;
+		}
+
+		const accessKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY;
+		if (!accessKey) {
+			setError("Unsplash API key not configured.");
+			return;
+		}
+
+		setIsLoading(true);
+		setError(null);
+
+		try {
+			const res = await fetch(
+				`https://api.unsplash.com/search/photos?query=${encodeURIComponent(debouncedQuery)}&per_page=12&page=${page}&client_id=${accessKey}`
+			);
+			if (!res.ok) {
+				throw new Error(`Unsplash API error: ${res.status}`);
+			}
+			const data = await res.json();
+			setPhotos(data.results ?? []);
+			setTotalPages(data.total_pages ?? 0);
+		} catch (err) {
+			setError(
+				err instanceof Error ? err.message : "Failed to fetch photos."
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [debouncedQuery, page]);
+
+	useEffect(() => {
+		fetchPhotos();
+	}, [fetchPhotos]);
+
+	// Reset state when modal closes
+	useEffect(() => {
+		if (!open) {
+			setQuery("");
+			setDebouncedQuery("");
+			setPhotos([]);
+			setPage(1);
+			setTotalPages(0);
+			setIsLoading(false);
+			setError(null);
+			setSelectedPhotoIds(new Set());
+		}
+	}, [open]);
+
+	function togglePhoto(id: string) {
+		setSelectedPhotoIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) {
+				next.delete(id);
+			} else {
+				if (!allowMultiple) {
+					next.clear();
+				}
+				next.add(id);
+			}
+			return next;
+		});
+	}
+
+	async function handleConfirm() {
+		const accessKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY;
+		const selected = photos.filter((p) => selectedPhotoIds.has(p.id));
+
+		// Trigger download endpoint for each selected photo (Unsplash API requirement)
+		await Promise.allSettled(
+			selected.map((photo) =>
+				fetch(
+					`${photo.links.download_location}&client_id=${accessKey}`
+				).catch(() => {
+					// Silently ignore download tracking errors
+				})
+			)
+		);
+
+		const urls = selected.map((p) => p.urls.regular);
+		onSelectPhotos(urls);
+		onOpenChange(false);
+	}
+
+	const selectedCount = selectedPhotoIds.size;
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-3xl max-h-[90vh] flex flex-col p-0">
+				<DialogHeader className="px-6 pt-6 pb-4 border-b">
+					<DialogTitle>Search Unsplash Photos</DialogTitle>
+				</DialogHeader>
+
+				<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+					{/* Search input */}
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+						<Input
+							placeholder="Search photos..."
+							value={query}
+							onChange={(e) => setQuery(e.target.value)}
+							className="pl-9"
+						/>
+					</div>
+
+					{/* Photo grid */}
+					{isLoading ? (
+						<div className="grid grid-cols-3 gap-3">
+							{Array.from({ length: 12 }).map((_, i) => (
+								<div
+									key={i}
+									className="aspect-video bg-gray-200 rounded-md animate-pulse"
+								/>
+							))}
+						</div>
+					) : error ? (
+						<p className="text-sm text-red-500 text-center py-8">{error}</p>
+					) : !debouncedQuery.trim() ? (
+						<p className="text-sm text-gray-500 text-center py-8">
+							Search for photos above.
+						</p>
+					) : photos.length === 0 ? (
+						<p className="text-sm text-gray-500 text-center py-8">
+							No photos found for &ldquo;{debouncedQuery}&rdquo;.
+						</p>
+					) : (
+						<div className="grid grid-cols-3 gap-3">
+							{photos.map((photo) => {
+								const isSelected = selectedPhotoIds.has(photo.id);
+								return (
+									<button
+										key={photo.id}
+										type="button"
+										onClick={() => togglePhoto(photo.id)}
+										className={`relative aspect-video rounded-md overflow-hidden group focus:outline-none ${
+											isSelected
+												? "ring-2 ring-primary ring-offset-2"
+												: "ring-0"
+										}`}>
+										<Image
+											src={photo.urls.small}
+											alt={`Photo by ${photo.user.name}`}
+											fill
+											sizes="(max-width: 768px) 33vw, 220px"
+											className="object-cover"
+										/>
+										{/* Photographer attribution overlay */}
+										<a
+											href={`${photo.user.links.html}?utm_source=curaise&utm_medium=referral`}
+											target="_blank"
+											rel="noopener noreferrer"
+											onClick={(e) => e.stopPropagation()}
+											className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity truncate">
+											{photo.user.name}
+										</a>
+										{/* Selected checkmark */}
+										{isSelected && (
+											<div className="absolute top-1.5 right-1.5 bg-primary text-white rounded-full p-0.5">
+												<Check className="h-3 w-3" />
+											</div>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					)}
+
+					{/* Pagination */}
+					{totalPages > 1 && !isLoading && (
+						<div className="flex items-center justify-center gap-3">
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onClick={() => setPage((p) => Math.max(1, p - 1))}
+								disabled={page === 1}>
+								Previous
+							</Button>
+							<span className="text-sm text-gray-500">
+								{page} / {totalPages}
+							</span>
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+								disabled={page === totalPages}>
+								Next
+							</Button>
+						</div>
+					)}
+				</div>
+
+				<DialogFooter className="px-6 py-4 border-t flex flex-row items-center justify-between">
+					<p className="text-xs text-gray-500">
+						Photos provided by{" "}
+						<a
+							href="https://unsplash.com/?utm_source=curaise&utm_medium=referral"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="underline hover:text-gray-700">
+							Unsplash
+						</a>
+					</p>
+					<div className="flex gap-2">
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => onOpenChange(false)}>
+							Cancel
+						</Button>
+						<Button
+							type="button"
+							disabled={selectedCount === 0}
+							onClick={handleConfirm}>
+							{selectedCount === 0
+								? "Add Photos"
+								: `Add ${selectedCount} Photo${selectedCount !== 1 ? "s" : ""}`}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}