diff --git a/backend/models/image.go b/backend/models/image.go
index cdbcbb1..0681c37 100644
--- a/backend/models/image.go
+++ b/backend/models/image.go
@@ -9,6 +9,7 @@ import (
 	. "screenmark/screenmark/.gen/haystack/haystack/table"
 
 	. "github.com/go-jet/jet/v2/postgres"
+	"github.com/go-jet/jet/v2/qrm"
 
 	"github.com/google/uuid"
 )
@@ -250,11 +251,15 @@ func (m ImageModel) Delete(ctx context.Context, imageID uuid.UUID) error {
 
 func (m ImageModel) IsUserAuthorized(ctx context.Context, imageId uuid.UUID, userId uuid.UUID) bool {
 	getImageUserId := UserImages.SELECT(UserImages.UserID).WHERE(UserImages.ImageID.EQ(UUID(imageId)))
+	getProcessingImageUserId := UserImagesToProcess.SELECT(UserImagesToProcess.UserID).WHERE(UserImagesToProcess.ImageID.EQ(UUID(imageId)))
 
 	userImage := model.UserImages{}
-	err := getImageUserId.QueryContext(ctx, m.dbPool, &userImage)
+	userProcessingImage := model.UserImagesToProcess{}
 
-	return err == nil && userImage.UserID.String() == userId.String()
+	err1 := getImageUserId.QueryContext(ctx, m.dbPool, &userImage)
+	err2 := getProcessingImageUserId.QueryContext(ctx, m.dbPool, &userProcessingImage)
+
+	return (err1 == nil || err1 == qrm.ErrNoRows) && (err2 == nil || err2 == qrm.ErrNoRows) && (userImage.UserID.String() == userId.String() || userProcessingImage.UserID.String() == userId.String())
 }
 
 func NewImageModel(db *sql.DB) ImageModel {
diff --git a/backend/schema.sql b/backend/schema.sql
index f032a2b..82ad9d1 100644
--- a/backend/schema.sql
+++ b/backend/schema.sql
@@ -68,13 +68,13 @@ CREATE TABLE haystack.image_lists (
     id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
 
     image_id UUID NOT NULL REFERENCES haystack.image (id) ON DELETE CASCADE,
-    list_id UUID NOT NULL REFERENCES haystack.lists (id)
+    list_id UUID NOT NULL REFERENCES haystack.lists (id) ON DELETE CASCADE
 );
 
 CREATE TABLE haystack.schemas (
     id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
 
-    list_id UUID NOT NULL REFERENCES haystack.lists (id)
+    list_id UUID NOT NULL REFERENCES haystack.lists (id) ON DELETE CASCADE
 );
 
 CREATE TABLE haystack.schema_items (
diff --git a/frontend/src/components/notifications/ProcessingImage.tsx b/frontend/src/components/notifications/ProcessingImage.tsx
index b3eb0ed..10181ce 100644
--- a/frontend/src/components/notifications/ProcessingImage.tsx
+++ b/frontend/src/components/notifications/ProcessingImage.tsx
@@ -1,82 +1,86 @@
 import { Popover } from "@kobalte/core/popover";
-import { Component, For, Show } from "solid-js";
+import { Component, createResource, For, Show, Suspense } from "solid-js";
 import { LoadingCircle } from "./LoadingCircle";
-import { base } from "@network/index";
+import { base, getAccessToken } from "@network/index";
 import { useNotifications } from "@contexts/Notifications";
 
 export const ProcessingImages: Component = () => {
-	const notifications = useNotifications();
+    const notifications = useNotifications();
 
-	const processingNumber = () =>
-		Object.keys(notifications.state.ProcessingImages).length +
-		Object.keys(notifications.state.ProcessingLists).length;
+    const processingNumber = () =>
+        Object.keys(notifications.state.ProcessingImages).length +
+        Object.keys(notifications.state.ProcessingLists).length;
 
-	return (
-		<Popover sameWidth gutter={4}>
-			<Popover.Trigger class="w-full flex justify-between gap-4 rounded-xl px-4 py-2">
-				<Show when={processingNumber() > 0}>
-					<p class="text-md">
-						Processing {processingNumber()}{" "}
-						{processingNumber() === 1 ? "item" : "items"}
-						...
-					</p>
-				</Show>
-				<Show
-					when={processingNumber() === 0}
-					fallback={<LoadingCircle status="loading" />}
-				>
-					<LoadingCircle status="complete" />
-				</Show>
-			</Popover.Trigger>
-			<Popover.Portal>
-				<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-white rounded-xl p-2">
-					<Show
-						when={processingNumber() > 0}
-						fallback={<p>No items to process</p>}
-					>
-						<For each={Object.entries(notifications.state.ProcessingImages)}>
-							{([id, _image]) => (
-								<Show when={_image}>
-									{(image) => (
-										<div class="flex gap-2 w-full justify-center">
-											<img
-												class="w-16 h-16 aspect-square rounded"
-												alt="processing"
-												src={`${base}/images/${id}`}
-											/>
-											<div class="flex flex-col gap-1">
-												<p class="text-slate-100">{image().ImageName}</p>
-											</div>
-											<LoadingCircle
-												status="loading"
-												class="ml-auto self-center"
-											/>
-										</div>
-									)}
-								</Show>
-							)}
-						</For>
+    const [accessToken] = createResource(getAccessToken)
 
-						<For each={Object.entries(notifications.state.ProcessingLists)}>
-							{([, _list]) => (
-								<Show when={_list}>
-									{(list) => (
-										<div class="flex gap-2 w-full justify-center">
-											<div class="flex flex-col gap-1">
-												<p class="text-slate-900">New Stack: {list().Name}</p>
-											</div>
-											<LoadingCircle
-												status="loading"
-												class="ml-auto self-center"
-											/>
-										</div>
-									)}
-								</Show>
-							)}
-						</For>
-					</Show>
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover>
-	);
+    return (
+        <Suspense>
+            <Popover sameWidth gutter={4}>
+                <Popover.Trigger class="w-full flex justify-between gap-4 rounded-xl px-4 py-2">
+                    <Show when={processingNumber() > 0}>
+                        <p class="text-md">
+                            Processing {processingNumber()}{" "}
+                            {processingNumber() === 1 ? "item" : "items"}
+                            ...
+                        </p>
+                    </Show>
+                    <Show
+                        when={processingNumber() === 0}
+                        fallback={<LoadingCircle status="loading" />}
+                    >
+                        <LoadingCircle status="complete" />
+                    </Show>
+                </Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Content class="shadow-2xl flex flex-col gap-2 bg-white rounded-xl p-2">
+                        <Show
+                            when={processingNumber() > 0}
+                            fallback={<p>No items to process</p>}
+                        >
+                            <For each={Object.entries(notifications.state.ProcessingImages)}>
+                                {([id, _image]) => (
+                                    <Show when={_image}>
+                                        {(image) => (
+                                            <div class="flex gap-2 w-full justify-center">
+                                                <img
+                                                    class="w-16 h-16 aspect-square rounded"
+                                                    alt="processing"
+                                                    src={`${base}/images/${id}?token=${accessToken()}`}
+                                                />
+                                                <div class="flex flex-col gap-1">
+                                                    <p class="text-slate-100">{image().ImageName}</p>
+                                                </div>
+                                                <LoadingCircle
+                                                    status="loading"
+                                                    class="ml-auto self-center"
+                                                />
+                                            </div>
+                                        )}
+                                    </Show>
+                                )}
+                            </For>
+
+                            <For each={Object.entries(notifications.state.ProcessingLists)}>
+                                {([, _list]) => (
+                                    <Show when={_list}>
+                                        {(list) => (
+                                            <div class="flex gap-2 w-full justify-center">
+                                                <div class="flex flex-col gap-1">
+                                                    <p class="text-slate-900">New Stack: {list().Name}</p>
+                                                </div>
+                                                <LoadingCircle
+                                                    status="loading"
+                                                    class="ml-auto self-center"
+                                                />
+                                            </div>
+                                        )}
+                                    </Show>
+                                )}
+                            </For>
+                        </Show>
+                    </Popover.Content>
+                </Popover.Portal>
+            </Popover>
+        </Suspense>
+    );
 };
diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts
index 3b56068..29ea561 100644
--- a/frontend/src/network/index.ts
+++ b/frontend/src/network/index.ts
@@ -46,7 +46,7 @@ export const getAccessToken = async (): Promise<string> => {
         throw new Error("your are not logged in")
     }
 
-    const isValidAccessToken = accessToken != null && getTokenProperties(accessToken).exp.getTime() > Date.now()
+    const isValidAccessToken = accessToken != null && getTokenProperties(accessToken).exp.getTime() * 1000 > Date.now()
 
     if (!isValidAccessToken) {
         const newAccessToken = await fetch(getBaseRequest({
@@ -129,6 +129,15 @@ export const deleteImageFromStack = async (listID: string, imageID: string): Pro
     await fetch(request);
 }
 
+export const deleteList = async (listID: string): Promise<void> => {
+    const request = await getBaseAuthorizedRequest({
+        path: `stacks/${listID}`,
+        method: "DELETE",
+    });
+
+    await fetch(request);
+}
+
 export class ImageLimitReached extends Error {
     constructor() {
         super();
diff --git a/frontend/src/pages/list/index.tsx b/frontend/src/pages/list/index.tsx
index d90402b..0785f47 100644
--- a/frontend/src/pages/list/index.tsx
+++ b/frontend/src/pages/list/index.tsx
@@ -1,7 +1,14 @@
 import { useSearchImageContext } from "@contexts/SearchImageContext";
-import { useParams } from "@solidjs/router";
-import { Component, For, Show, Suspense, createResource, createSignal } from "solid-js";
-import { base, getAccessToken } from "../../network";
+import { useParams, useNavigate } from "@solidjs/router";
+import {
+    Component,
+    For,
+    Show,
+    Suspense,
+    createResource,
+    createSignal,
+} from "solid-js";
+import { base, deleteList, getAccessToken } from "../../network";
 import { Dialog } from "@kobalte/core";
 
 const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
@@ -35,7 +42,10 @@ const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
                                         Cancel
                                     </button>
                                 </Dialog.CloseButton>
-                                <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={props.onDelete}>
+                                <button
+                                    class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                                    onClick={props.onDelete}
+                                >
                                     Confirm
                                 </button>
                             </div>
@@ -47,8 +57,55 @@ const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
     );
 };
 
+const DeleteListButton: Component<{ onDelete: () => void }> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+
+    return (
+        <>
+            <button
+                aria-label="Delete list"
+                class="text-white bg-red-600 hover:bg-red-700 rounded px-3 py-2 text-sm font-medium"
+                onClick={() => setIsOpen(true)}
+            >
+                Delete List
+            </button>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                        <Dialog.Content class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+                            <Dialog.Title class="text-lg font-bold mb-2">
+                                Confirm Delete List
+                            </Dialog.Title>
+                            <Dialog.Description class="mb-4">
+                                Are you sure you want to delete this entire
+                                list? This action cannot be undone.
+                            </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}
+                                >
+                                    Delete List
+                                </button>
+                            </div>
+                        </Dialog.Content>
+                    </div>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
+    );
+};
+
 export const List: Component = () => {
     const { listId } = useParams();
+    const nav = useNavigate();
 
     const { lists, onDeleteImageFromStack } = useSearchImageContext();
 
@@ -56,12 +113,35 @@ export const List: Component = () => {
 
     const list = () => lists().find((l) => l.ID === listId);
 
+    const handleDeleteList = async () => {
+        await deleteList(listId)
+        nav("/");
+    };
+
     return (
         <Suspense>
             <Show when={list()} fallback="List could not be found">
                 {(l) => (
                     <div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
-                        <div class="overflow-x-auto overflow-y-auto h-full">
+                        <div class="px-6 py-4 border-b border-neutral-200 bg-neutral-50">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <h1 class="text-xl font-semibold text-neutral-900">
+                                        {l().Name}
+                                    </h1>
+                                    <Show when={l().Description}>
+                                        <p class="text-sm text-neutral-600 mt-1">
+                                            {l().Description}
+                                        </p>
+                                    </Show>
+                                </div>
+                                <DeleteListButton onDelete={handleDeleteList} />
+                            </div>
+                        </div>
+                        <div
+                            class="overflow-x-auto overflow-y-auto"
+                            style="height: calc(100% - 80px);"
+                        >
                             <table class="w-full min-w-full">
                                 <thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
                                     <tr>
@@ -106,14 +186,22 @@ export const List: Component = () => {
                                                                 alt="List item"
                                                             />
                                                         </a>
-                                                        <DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
+                                                        <DeleteButton
+                                                            onDelete={() =>
+                                                                onDeleteImageFromStack(
+                                                                    l().ID,
+                                                                    image.ImageID,
+                                                                )
+                                                            }
+                                                        />
                                                     </div>
                                                 </td>
                                                 <For each={image.Items}>
                                                     {(item, colIndex) => (
                                                         <td
                                                             class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
-                                                                image.Items.length -
+                                                                image.Items
+                                                                    .length -
                                                                 1
                                                                 ? "border-r border-neutral-200"
                                                                 : ""
@@ -121,7 +209,9 @@ export const List: Component = () => {
                                                         >
                                                             <div
                                                                 class="max-w-xs truncate"
-                                                                title={item.Value}
+                                                                title={
+                                                                    item.Value
+                                                                }
                                                             >
                                                                 {item.Value}
                                                             </div>
@@ -139,8 +229,8 @@ export const List: Component = () => {
                                         No images in this list yet
                                     </p>
                                     <p class="text-sm mt-1">
-                                        Images will appear here once added to the
-                                        list
+                                        Images will appear here once added to
+                                        the list
                                     </p>
                                 </div>
                             </Show>