diff --git a/web/src/lib/state/queue.ts b/web/src/lib/state/queue.ts
new file mode 100644
index 00000000..c586623d
--- /dev/null
+++ b/web/src/lib/state/queue.ts
@@ -0,0 +1,61 @@
+import { merge } from "ts-deepmerge";
+import { get, readable, type Updater } from "svelte/store";
+import type { OngoingQueueItem, QueueItem } from "$lib/types/queue";
+
+type Queue = {
+    [id: string]: QueueItem;
+}
+
+type OngoingQueue = {
+    [id: string]: OngoingQueueItem;
+}
+
+let update: (_: Updater<Queue>) => void;
+
+const queue = readable<Queue>(
+    {},
+    (_, _update) => { update = _update }
+);
+
+export function addToQueue(item: QueueItem) {
+    update(queueData => {
+        queueData[item.id] = item;
+        return queueData;
+    });
+}
+
+export function removeFromQueue(id: string) {
+    update(queueData => {
+        delete queueData[id];
+        return queueData;
+    });
+}
+
+let updateOngoing: (_: Updater<OngoingQueue>) => void;
+
+const ongoingQueue = readable<OngoingQueue>(
+    {},
+    (_, _update) => { updateOngoing = _update }
+);
+
+export function updateOngoingQueue(id: string, itemInfo: Partial<OngoingQueueItem> = {}) {
+    updateOngoing(queueData => {
+        if (get(queue)?.id) {
+            queueData[id] = merge(queueData[id], {
+                id,
+                ...itemInfo,
+            });
+        }
+
+        return queueData;
+    });
+}
+
+export function removeFromOngoingQueue(id: string) {
+    updateOngoing(queue => {
+        delete queue[id];
+        return queue;
+    });
+}
+
+export { queue, ongoingQueue };
diff --git a/web/src/lib/types/queue.ts b/web/src/lib/types/queue.ts
index a0d28692..6785b514 100644
--- a/web/src/lib/types/queue.ts
+++ b/web/src/lib/types/queue.ts
@@ -1,7 +1,34 @@
+type ProcessingStep = "mux" | "mux_hls" | "encode";
+type ProcessingPreset = "mp4" | "webm" | "copy";
+type ProcessingState = "completed" | "failed" | "canceled" | "waiting" | "downloading" | "muxing" | "converting";
+type ProcessingType = "video" | "video_mute" | "audio" | "audio_convert" | "image" | "gif";
+type QueueFileType = "video" | "audio" | "image" | "gif";
+
+export type ProcessingStepItem = {
+    type: ProcessingStep,
+    preset?: ProcessingPreset,
+}
+
+export type QueueFile = {
+    type: QueueFileType,
+    url: string,
+}
+
 export type QueueItem = {
     id: string,
-    type: "video" | "audio" | "mute" | "image" | "gif",
+    status: ProcessingState,
+    type: ProcessingType,
     filename: string,
-    status: string,
-    progress: number,
+    files: QueueFile[],
+    processingSteps: ProcessingStepItem[],
+}
+
+export type OngoingQueueItem = {
+    id: string,
+    currentStep?: ProcessingStep,
+    size?: {
+        expected: number,
+        current: number,
+    },
+    speed?: number,
 }