diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index b426cfe..50b6458 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -1,25 +1,105 @@
-import { Component } from "solid-js";
+import { Component, createSignal } from "solid-js";
 import { base } from "../../network";
 import { A } from "@solidjs/router";
+import { Dialog } from "@kobalte/core";
 
-export const ImageComponent: Component<{ ID: string }> = (props) => {
-	return (
-		<A href={`/image/${props.ID}`} class="w-full flex justify-center h-[300px]">
-			<img
-				class="flex w-full object-cover rounded-xl"
-				src={`${base}/images/${props.ID}`}
-			/>
-		</A>
-	);
+type ImageComponentProps = {
+    ID: string;
+    onDelete: (id: string) => void;
+}
+
+export const ImageComponent: Component<ImageComponentProps> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+
+    return (
+        <>
+            <div class="relative w-full flex justify-center h-[300px]">
+                <A href={`/image/${props.ID}`} class="flex w-full">
+                    <img
+                        class="flex w-full object-cover rounded-xl"
+                        src={`${base}/images/${props.ID}`}
+                    />
+                </A>
+                <button
+                    aria-label="Delete image"
+                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
+                    onClick={() => setIsOpen(true)}
+                >
+                    ×
+                </button>
+            </div>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Delete
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to delete this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
+    );
 };
 
-export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => {
-	return (
-		<A href={`/image/${props.ID}`} class="w-full flex justify-center">
-			<img
-				class="flex w-full object-cover rounded-xl"
-				src={`${base}/images/${props.ID}`}
-			/>
-		</A>
-	);
+export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+
+    return (
+        <>
+            <div class="relative w-full flex justify-center">
+                <A href={`/image/${props.ID}`} class="flex w-full">
+                    <img
+                        class="flex w-full object-cover rounded-xl"
+                        src={`${base}/images/${props.ID}`}
+                    />
+                </A>
+                <button
+                    aria-label="Delete image"
+                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
+                    onClick={() => setIsOpen(true)}
+                >
+                    ×
+                </button>
+            </div>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Delete
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to delete this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
+    );
 };
diff --git a/frontend/src/contexts/SearchImageContext.tsx b/frontend/src/contexts/SearchImageContext.tsx
index 83f5d7f..ac7171c 100644
--- a/frontend/src/contexts/SearchImageContext.tsx
+++ b/frontend/src/contexts/SearchImageContext.tsx
@@ -1,92 +1,91 @@
 import {
-	type Accessor,
-	type Component,
-	type ParentProps,
-	createContext,
-	createEffect,
-	createMemo,
-	createResource,
-	useContext,
+    type Accessor,
+    type Component,
+    type ParentProps,
+    createContext,
+    createMemo,
+    createResource,
+    useContext,
 } from "solid-js";
-import { getUserImages, JustTheImageWhatAreTheseNames } from "../network";
+import { deleteImage, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
 
 export type SearchImageStore = {
-	imagesByDate: Accessor<
-		Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
-	>;
+    imagesByDate: Accessor<
+        Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
+    >;
 
-	lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>;
+    lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>;
 
-	userImages: Accessor<JustTheImageWhatAreTheseNames>;
+    userImages: Accessor<JustTheImageWhatAreTheseNames>;
 
-	processingImages: Accessor<
-		Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined
-	>;
+    processingImages: Accessor<
+        Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined
+    >;
 
-	onRefetchImages: () => void;
+    onRefetchImages: () => void;
+    onDeleteImage: (imageID: string) => void;
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
 export const SearchImageContextProvider: Component<ParentProps> = (props) => {
-	const [data, { refetch }] = createResource(getUserImages);
+    const [data, { refetch }] = createResource(getUserImages);
 
-	createEffect(() => {
-		console.log(data());
-	});
+    const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
+        () => {
+            const d = data();
+            if (d == null) {
+                return [];
+            }
 
-	const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
-		() => {
-			const d = data();
-			if (d == null) {
-				return [];
-			}
+            // Sorted by day. But we could potentially add more in the future.
+            const buckets: Record<string, JustTheImageWhatAreTheseNames> = {};
 
-			// Sorted by day. But we could potentially add more in the future.
-			const buckets: Record<string, JustTheImageWhatAreTheseNames> = {};
+            for (const image of d.userImages) {
+                if (image.CreatedAt == null) {
+                    continue;
+                }
 
-			for (const image of d.userImages) {
-				if (image.CreatedAt == null) {
-					continue;
-				}
+                const date = new Date(image.CreatedAt).toDateString();
+                if (!(date in buckets)) {
+                    buckets[date] = [];
+                }
 
-				const date = new Date(image.CreatedAt).toDateString();
-				if (!(date in buckets)) {
-					buckets[date] = [];
-				}
+                buckets[date].push(image);
+            }
 
-				buckets[date].push(image);
-			}
+            return Object.entries(buckets)
+                .map(([date, images]) => ({ date: new Date(date), images }))
+                .sort((a, b) => b.date.getTime() - a.date.getTime());
+        },
+    );
 
-			return Object.entries(buckets)
-				.map(([date, images]) => ({ date: new Date(date), images }))
-				.sort((a, b) => b.date.getTime() - a.date.getTime());
-		},
-	);
+    const processingImages = () => data()?.processingImages ?? [];
 
-	const processingImages = () => data()?.processingImages ?? [];
-
-	return (
-		<SearchImageContext.Provider
-			value={{
-				imagesByDate: sortedImages,
-				lists: () => data()?.lists ?? [],
-				userImages: () => data()?.userImages ?? [],
-				processingImages,
-				onRefetchImages: refetch,
-			}}
-		>
-			{props.children}
-		</SearchImageContext.Provider>
-	);
+    return (
+        <SearchImageContext.Provider
+            value={{
+                imagesByDate: sortedImages,
+                lists: () => data()?.lists ?? [],
+                userImages: () => data()?.userImages ?? [],
+                processingImages,
+                onRefetchImages: refetch,
+                onDeleteImage: (imageID: string) => {
+                    deleteImage(imageID).then(refetch);
+                }
+            }}
+        >
+            {props.children}
+        </SearchImageContext.Provider>
+    );
 };
 
 export const useSearchImageContext = () => {
-	const context = useContext(SearchImageContext);
-	if (context == null) {
-		throw new Error(
-			"Unreachable: We should always have a mounted context and no undefined values",
-		);
-	}
+    const context = useContext(SearchImageContext);
+    if (context == null) {
+        throw new Error(
+            "Unreachable: We should always have a mounted context and no undefined values",
+        );
+    }
 
-	return context;
+    return context;
 };
diff --git a/frontend/src/pages/all-images/index.tsx b/frontend/src/pages/all-images/index.tsx
index 5e6a838..c588907 100644
--- a/frontend/src/pages/all-images/index.tsx
+++ b/frontend/src/pages/all-images/index.tsx
@@ -3,62 +3,63 @@ import { Component, For } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { ImageComponent } from "@components/image";
 import { chunkRows } from "./chunk";
+import { deleteImage } from "@network/index";
 
 type ImageOrDate =
-	| { type: "image"; ID: string[] }
-	| { type: "date"; date: Date };
+    | { type: "image"; ID: string[] }
+    | { type: "date"; date: Date };
 
 export const AllImages: Component = () => {
-	let scrollRef: HTMLDivElement | undefined;
+    let scrollRef: HTMLDivElement | undefined;
 
-	const { imagesByDate } = useSearchImageContext();
+    const { imagesByDate, onDeleteImage } = useSearchImageContext();
 
-	const items = () => {
-		const items: Array<ImageOrDate> = [];
+    const items = () => {
+        const items: Array<ImageOrDate> = [];
 
-		for (const { date, images } of imagesByDate()) {
-			items.push({ type: "date", date });
-			const chunkedRows = chunkRows(3, images);
-			for (const chunk of chunkedRows) {
-				items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
-			}
-		}
+        for (const { date, images } of imagesByDate()) {
+            items.push({ type: "date", date });
+            const chunkedRows = chunkRows(3, images);
+            for (const chunk of chunkedRows) {
+                items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
+            }
+        }
 
-		return items;
-	};
+        return items;
+    };
 
-	const rowVirtualizer = createVirtualizer({
-		count: items().length,
-		estimateSize: () => 400,
-		getScrollElement: () => scrollRef!,
-		overscan: 3,
-	});
+    const rowVirtualizer = createVirtualizer({
+        count: items().length,
+        estimateSize: () => 400,
+        getScrollElement: () => scrollRef!,
+        overscan: 3,
+    });
 
-	return (
-		<div
-			ref={scrollRef}
-			class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
-		>
-			<div
-				class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
-			>
-				<For each={rowVirtualizer.getVirtualItems()}>
-					{(i) => {
-						const item = items()[i.index];
-						if (item.type === "image") {
-							return (
-								<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
-							);
-						} else {
-							return (
-								<h3 class="col-span-3 font-bold text-2xl">
-									{item.date.toDateString()}
-								</h3>
-							);
-						}
-					}}
-				</For>
-			</div>
-		</div>
-	);
+    return (
+        <div
+            ref={scrollRef}
+            class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
+        >
+            <div
+                class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
+            >
+                <For each={rowVirtualizer.getVirtualItems()}>
+                    {(i) => {
+                        const item = items()[i.index];
+                        if (item.type === "image") {
+                            return (
+                                <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
+                            );
+                        } else {
+                            return (
+                                <h3 class="col-span-3 font-bold text-2xl">
+                                    {item.date.toDateString()}
+                                </h3>
+                            );
+                        }
+                    }}
+                </For>
+            </div>
+        </div>
+    );
 };
diff --git a/frontend/src/pages/front/recent.tsx b/frontend/src/pages/front/recent.tsx
index b22954c..4925179 100644
--- a/frontend/src/pages/front/recent.tsx
+++ b/frontend/src/pages/front/recent.tsx
@@ -1,28 +1,29 @@
 import { Component, For } from "solid-js";
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { deleteImage } from "@network/index";
 
 const NUMBER_OF_MAX_RECENT_IMAGES = 10;
 
 export const Recent: Component = () => {
-	const { userImages } = useSearchImageContext();
+    const { userImages, onDeleteImage } = useSearchImageContext();
 
-	const latestImages = () =>
-		userImages()
-			.sort(
-				(a, b) =>
-					new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
-			)
-			.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
+    const latestImages = () =>
+        userImages()
+            .sort(
+                (a, b) =>
+                    new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
+            )
+            .slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
 
-	return (
-		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
-			<h2 class="text-xl font-bold">Recent Screenshots</h2>
-			<div class="grid grid-cols-3 gap-4 place-items-center">
-				<For each={latestImages()}>
-					{(image) => <ImageComponent ID={image.ImageID} />}
-				</For>
-			</div>
-		</div>
-	);
+    return (
+        <div class="rounded-xl bg-white p-4 flex flex-col gap-2">
+            <h2 class="text-xl font-bold">Recent Screenshots</h2>
+            <div class="grid grid-cols-3 gap-4 place-items-center">
+                <For each={latestImages()}>
+                    {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
+                </For>
+            </div>
+        </div>
+    );
 };
diff --git a/frontend/src/pages/image/index.tsx b/frontend/src/pages/image/index.tsx
index af435e5..2d80b50 100644
--- a/frontend/src/pages/image/index.tsx
+++ b/frontend/src/pages/image/index.tsx
@@ -4,35 +4,36 @@ import { useParams } from "@solidjs/router";
 import { For, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
 import { ListCard } from "@components/list-card";
+import { deleteImage } from "@network/index";
 
 export const ImagePage: Component = () => {
-	const { imageId } = useParams<{ imageId: string }>();
+    const { imageId } = useParams<{ imageId: string }>();
 
-	const { userImages, lists } = useSearchImageContext();
+    const { userImages, lists, onDeleteImage } = useSearchImageContext();
 
-	const image = () => userImages().find((i) => i.ImageID === imageId);
+    const image = () => userImages().find((i) => i.ImageID === imageId);
 
-	return (
-		<main class="flex flex-col items-center gap-4">
-			<div class="w-full bg-white rounded-xl p-4">
-				<ImageComponentFullHeight ID={imageId} />
-			</div>
-			<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
-				<h2 class="font-bold text-2xl">Description</h2>
-				<div class="grid grid-cols-3 gap-4">
-					<For each={image()?.Image.ImageLists}>
-						{(imageList) => (
-							<ListCard
-								list={lists().find((l) => l.ID === imageList.ListID)!}
-							/>
-						)}
-					</For>
-				</div>
-			</div>
-			<div class="w-full bg-white rounded-xl p-4">
-				<h2 class="font-bold text-2xl">Description</h2>
-				<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
-			</div>
-		</main>
-	);
+    return (
+        <main class="flex flex-col items-center gap-4">
+            <div class="w-full bg-white rounded-xl p-4">
+                <ImageComponentFullHeight ID={imageId} onDelete={onDeleteImage()} />
+            </div>
+            <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
+                <h2 class="font-bold text-2xl">Description</h2>
+                <div class="grid grid-cols-3 gap-4">
+                    <For each={image()?.Image.ImageLists}>
+                        {(imageList) => (
+                            <ListCard
+                                list={lists().find((l) => l.ID === imageList.ListID)!}
+                            />
+                        )}
+                    </For>
+                </div>
+            </div>
+            <div class="w-full bg-white rounded-xl p-4">
+                <h2 class="font-bold text-2xl">Description</h2>
+                <SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
+            </div>
+        </main>
+    );
 };
diff --git a/frontend/src/pages/search/index.tsx b/frontend/src/pages/search/index.tsx
index eb3b909..3c04d60 100644
--- a/frontend/src/pages/search/index.tsx
+++ b/frontend/src/pages/search/index.tsx
@@ -2,47 +2,50 @@ import { Component, createSignal, For } from "solid-js";
 import { Search } from "@kobalte/core/search";
 import { IconSearch } from "@tabler/icons-solidjs";
 import { useSearch } from "./search";
-import { JustTheImageWhatAreTheseNames } from "@network/index";
+import { deleteImage, JustTheImageWhatAreTheseNames } from "@network/index";
 import { ImageComponent } from "@components/image";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
 
 export const SearchPage: Component = () => {
-	const fuse = useSearch();
+    const fuse = useSearch();
 
-	const [searchItems, setSearchItems] =
-		createSignal<JustTheImageWhatAreTheseNames>([]);
+    const { onDeleteImage } = useSearchImageContext();
 
-	return (
-		<Search
-			options={searchItems()}
-			onInputChange={(e) => {
-				setSearchItems(
-					fuse()
-						.search(e)
-						.map((i) => i.item),
-				);
-			}}
-		>
-			<Search.Label />
-			<Search.Control class="flex">
-				<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
-					<Search.Icon>
-						<IconSearch />
-					</Search.Icon>
-				</Search.Indicator>
-				<Search.Input
-					class="w-full p-4 font-bold text-xl rounded-r-xl"
-					placeholder="Woking Station..."
-				/>
-			</Search.Control>
-			<Search.Portal>
-				<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
-					<Search.Arrow />
-					<For each={searchItems()}>
-						{(item) => <ImageComponent ID={item.ImageID} />}
-					</For>
-					<Search.NoResult>No result found</Search.NoResult>
-				</Search.Content>
-			</Search.Portal>
-		</Search>
-	);
+    const [searchItems, setSearchItems] =
+        createSignal<JustTheImageWhatAreTheseNames>([]);
+
+    return (
+        <Search
+            options={searchItems()}
+            onInputChange={(e) => {
+                setSearchItems(
+                    fuse()
+                        .search(e)
+                        .map((i) => i.item),
+                );
+            }}
+        >
+            <Search.Label />
+            <Search.Control class="flex">
+                <Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
+                    <Search.Icon>
+                        <IconSearch />
+                    </Search.Icon>
+                </Search.Indicator>
+                <Search.Input
+                    class="w-full p-4 font-bold text-xl rounded-r-xl"
+                    placeholder="Woking Station..."
+                />
+            </Search.Control>
+            <Search.Portal>
+                <Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
+                    <Search.Arrow />
+                    <For each={searchItems()}>
+                        {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
+                    </For>
+                    <Search.NoResult>No result found</Search.NoResult>
+                </Search.Content>
+            </Search.Portal>
+        </Search>
+    );
 };