diff --git a/apps/aitino/src/app.pcss b/apps/aitino/src/app.pcss
index 908d43c5b..6c345d917 100644
--- a/apps/aitino/src/app.pcss
+++ b/apps/aitino/src/app.pcss
@@ -3,6 +3,38 @@
 @tailwind utilities;
 
 @layer base {
+    /* Universal */
+    --md-sys-color-primary: 69 223 164;
+    --md-sys-color-on-primary: 0 56 37;
+    --md-sys-color-primary-container: 0 81 55;
+    --md-sys-color-on-primary-container: 104 252 191;
+    --md-sys-color-secondary: 60 221 199;
+    --md-sys-color-on-secondary: 0 55 49;
+    --md-sys-color-secondary-container: 0 80 71;
+    --md-sys-color-on-secondary-container: 98 250 227;
+    --md-sys-color-tertiary: 255 175 211;
+    --md-sys-color-on-tertiary: 98 0 64;
+    --md-sys-color-tertiary-container: 133 20 90;
+    --md-sys-color-on-tertiary-container: 255 216 231;
+    --md-sys-color-error: 255 180 171;
+    --md-sys-color-error-container: 147 0 10;
+    --md-sys-color-on-error: 105 0 5;
+    --md-sys-color-on-error-container: 255 218 214;
+    --md-sys-color-background: 23 25 25;
+    --md-sys-color-on-background: 225 227 223;
+    --md-sys-color-surface: 30 30 30;
+    --md-sys-color-on-surface: 225 227 223;
+    --md-sys-color-surface-variant: 64 73 67;
+    --md-sys-color-on-surface-variant: 191 201 193;
+    --md-sys-color-outline: 138 147 140;
+    --md-sys-color-inverse-on-surface: 25 28 26;
+    --md-sys-color-inverse-surface: 225 227 223;
+    --md-sys-color-inverse-primary: 0 108 75;
+    --md-sys-color-shadow: 0 0 0;
+    --md-sys-color-surface-tint: 69 223 164;
+    --md-sys-color-outline-variant: 64 73 67;
+    --md-sys-color-scrim: 0 0 0;
+
 	:root {
 		--background: 255 255 255;
 		--foreground: 13 13 13;
@@ -26,7 +58,7 @@
 		--radius: 0.5rem;
 	}
 	.dark {
-		--background: 9 16 16;
+		--background: 23 25 25;
 		--foreground: 248 250 252;
 		--card: 13 13 13;
 		--card-foreground: 249 249 249;
@@ -35,7 +67,7 @@
 		--primary: 69 223 164;
 		--primary-foreground: 0 56 37;
 		--secondary: 60 221 199;
-		--secondary-foreground: 249 249 249;
+		--secondary-foreground: 0 55 49;
 		--muted: 45 45 45;
 		--muted-foreground: 166 166 166;
 		--accent: 255 175 211;
@@ -43,8 +75,8 @@
 		--destructive: 251 113 133;
 		--destructive-foreground: 249 249 249;
 		--border: 45 45 45;
-		--input: 30 41 59;
-		--ring: 123 123 123;
+		--input: 0 81 55;
+		--ring: 69 223 164;
 		--radius: 0.5rem;
 	}
 }
diff --git a/apps/aitino/src/lib/api-client.ts b/apps/aitino/src/lib/api-client.ts
index abdc10731..6eff1bfe1 100644
--- a/apps/aitino/src/lib/api-client.ts
+++ b/apps/aitino/src/lib/api-client.ts
@@ -2,6 +2,7 @@ import { supabase } from "$lib/supabase";
 import type { TablesInsert } from "$lib/supabase.types";
 
 export async function saveMaeveNodes(data: TablesInsert<"maeve_nodes">) {
+	localStorage.setItem("currentMeaveId", data.id);
 	return supabase.from("maeve_nodes").upsert(data);
 }
 
diff --git a/apps/aitino/src/lib/components/ChatRoom.svelte b/apps/aitino/src/lib/components/ChatRoom.svelte
index 11622433d..4ec1e3588 100644
--- a/apps/aitino/src/lib/components/ChatRoom.svelte
+++ b/apps/aitino/src/lib/components/ChatRoom.svelte
@@ -1,44 +1,25 @@
 <script lang="ts">
-	import { ArrowDown, Loader, Send, User } from "lucide-svelte";
+	import { ArrowDown, ChevronDown, Loader, Loader2, Send, User } from "lucide-svelte";
 	import { Input } from "./ui/input";
 	import { Button } from "./ui/button";
 	import * as Card from "$lib/components/ui/card";
 	import { afterUpdate, onMount } from "svelte";
 	import SvelteMarkdown from "svelte-markdown";
 
-	let messages = [
-		{
-			unique_id: "0004",
-			content:
-				"Aitino will be the ultimate business partner and business tool. Aitino will be able to help both entrepreneurs and larger corporations by harnessing the power of multi-LLM-agent environments and advanced integration with other business systems.",
-			time: "10:46:45 pm",
-			fromUser: false,
-			instance_id: "4",
-			full_name: "Michael",
-			job_title: "Graphic Designer",
-			model: "model-b"
-		},
-		{
-			unique_id: "0004",
-			content: "The waitlist for aitino is live go check it out at aiti.no 😀",
-			time: "10:46:45 pm",
-			fromUser: false,
-			instance_id: "4",
-			full_name: "Michael",
-			job_title: "Graphic Designer",
-			model: "model-b"
-		},
-		{
-			content: "Generate a 1 min video with a short description about Aitino.",
-			time: "11:20:45 pm",
-			fromUser: true,
-			unique_id: "0001",
-			instance_id: "1",
-			full_name: "Alice Johnson",
-			job_title: "Content Creator",
-			model: "model-a"
+	let maeveId: string;
+
+	onMount(() => {
+		const _id: string | null = localStorage.getItem("currentMeaveId");
+		if (_id == null) {
+			console.error("No maeve id found");
+			return;
 		}
-	];
+
+		maeveId = _id;
+		console.log(maeveId, "maeveId");
+	});
+
+	let messages: any[] = [];
 
 	function handleKeyDown(event: { key: string }) {
 		if (event.key === "Enter") {
@@ -55,17 +36,30 @@
 		if (newMessageContent.trim() !== "") {
 			const newMessage = {
 				id: messages.length + 1,
-				name: "User",
-				role: "User Role",
-				content: newMessageContent,
-				time: new Date().toLocaleTimeString(),
-				fromUser: true
+				status: "success",
+				data: {
+					content: newMessageContent,
+					role: "not user",
+					name: "new user",
+					created_at: new Date().toLocaleTimeString()
+				}
 			};
 			messages = [...messages, newMessage];
 			newMessageContent = "";
 		}
 	};
 
+	let showReplyField = false;
+
+	const toggleReplyField = () => {
+		showReplyField = !showReplyField;
+	};
+
+	function formatDate(dateString: string) {
+		const date = new Date(dateString);
+		return date.toLocaleDateString("en-US");
+	}
+
 	let chatContainerElement: HTMLDivElement;
 
 	afterUpdate(() => {
@@ -73,6 +67,48 @@
 			chatContainerElement.scrollTop = chatContainerElement.scrollHeight;
 		}
 	});
+
+	let replyMessage = "";
+	let state: "loading" | "success" | "error" | "idle" = "idle";
+
+	function handleInputChangeReply(event: { target: { value: string } }) {
+		replyMessage = event.target.value;
+	}
+
+	const handleReply = async () => {
+		state = "loading";
+		const id = messages[0].data.session_id;
+		const reply = replyMessage;
+
+		const queryParams = new URLSearchParams({
+			meave_id: "dfb9ede1-3c08-462f-af73-94cf6aa9185a",
+			session_id: id,
+			reply
+		}).toString();
+		try {
+			const response = await fetch(`/api/v1/reply?${queryParams}`);
+			const data = await response.json();
+			const jsonResponseString = data.content;
+			const jsonStrings = jsonResponseString
+				.split("}}\n")
+				.map((str: string) => (str.endsWith("}") ? str : str + "}}"));
+
+			// Parsing each string to JSON, filtering out the 'done' message or any non-JSON strings
+			const jsonObjects = jsonStrings
+				.filter((str: string) => str.trim() && !str.includes('"status": "success", "data": "done"'))
+				.map((str: string) => JSON.parse(str));
+			// Adding parsed objects to the messages array
+			messages = [...messages, ...jsonObjects];
+			state = "success";
+			replyMessage = "";
+			showReplyField = false;
+		} catch (error) {
+			state = "error";
+			replyMessage = "";
+			showReplyField = false;
+			console.error("Error fetching chat maeave:", error);
+		}
+	};
 </script>
 
 <div class="container -mb-6 flex h-screen max-w-6xl flex-col justify-end p-6">
@@ -80,15 +116,39 @@
 		<!-- add scroll to the bottom of the chat  -->
 		{#each messages as message}
 			<div>
-				{#if !message.fromUser}
+				{#if message.data && "content" in message.data && message.data.role === "user"}
 					<div class="space-y-2 border-none">
 						<Card.Root class=" max-w-2xl">
 							<Card.Content class="grid gap-4 p-6">
-								{#if message.content.startsWith("```") || message.content.includes("<")}
-									<SvelteMarkdown source={message.content} />
+								{#if message.data && "content" in message.data && message.data.content === "CONTINUE"}
+									{#if !showReplyField}
+										{message.data.content}
+										<Button on:click={toggleReplyField} class="flex items-center justify-center">
+											reply
+										</Button>{/if}
+									{#if showReplyField}
+										<form class="mt-2 flex flex-col gap-y-6" on:submit={handleReply}>
+											<Input
+												on:input={handleInputChangeReply}
+												placeholder="Type your reply..."
+												class="flex  h-9 w-full rounded-md border border-input bg-transparent px-3 py-6 text-sm shadow-sm ring-offset-0 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+											/>
+											<div class="align-center mx-auto flex justify-between gap-2">
+												<Button variant="primary" type="submit">Send Reply</Button>
+												{#if state !== "idle"}
+													<Loader2 class="ml-2 w-4 animate-spin" />
+												{/if}
+												<Button variant="primary" on:click={toggleReplyField}>Cancel</Button>
+											</div>
+										</form>
+									{/if}
+								{:else if message.data.content.startsWith("```") || message.data.content.includes("<")}
+									<SvelteMarkdown source={message.data.content} />
 								{:else}
-									<p class="prose text-sm font-medium leading-5 tracking-widest">
-										{message.content}
+									<p
+										class="prose max-w-2xl break-words text-sm font-medium leading-5 tracking-widest"
+									>
+										{message.data.content}
 									</p>
 								{/if}
 							</Card.Content>
@@ -103,36 +163,40 @@
 									<p
 										class="prose text-xs font-medium leading-none tracking-widest dark:text-blue-950"
 									>
-										{message.full_name} - Agent
+										{message.data.name} - Agent
 									</p>
 								</div>
 								<p class="prose text-sm font-medium dark:text-blue-950">
-									sent: {message.time}
+									sent: {formatDate(message.data.created_at)}
 								</p>
 							</Card.Content>
 						</Card.Root>
 					</div>
 				{:else}
 					<div class="space-y-2">
-						<Card.Root class=" ml-auto flex max-w-2xl flex-wrap rounded-bl-3xl border">
-							<Card.Content class="prose grid gap-4 p-6">
-								{#if message.content.startsWith("```") || message.content.includes("<")}
-									<SvelteMarkdown source={message.content} />
-								{:else}
-									<p class="prose text-sm font-medium leading-5 tracking-widest">
-										{message.content}
+						{#if message.data && "content" in message.data}
+							<Card.Root class=" ml-auto flex max-w-2xl flex-wrap rounded-bl-3xl border">
+								<Card.Content class="prose grid gap-4 p-6">
+									{#if message.data && "content" in message.data && message.data.content !== "undefined" && message.data.content.startsWith("```")}
+										<SvelteMarkdown source={message.data.content} />
+									{:else}
+										<p class="max-2xl prose text-sm font-medium leading-5 tracking-widest">
+											{message.data.content}
+										</p>
+									{/if}
+								</Card.Content>
+							</Card.Root>
+						{/if}
+						{#if message.data && "created_at" in message.data}
+							<Card.Root class="ml-auto max-w-2xl border-none bg-transparent">
+								<Card.Content class="grid w-full grid-cols-2 items-center justify-between gap-4">
+									<p class="prose text-xs font-medium leading-8 dark:text-green-300">you</p>
+									<p class="prose text-xs font-medium leading-8 dark:text-green-300">
+										sent: {message.data.created_at}
 									</p>
-								{/if}
-							</Card.Content>
-						</Card.Root>
-						<Card.Root class="ml-auto max-w-2xl border-none bg-transparent">
-							<Card.Content class="grid w-full grid-cols-2 items-center justify-between gap-4">
-								<p class="prose text-xs font-medium leading-8 dark:text-green-300">you</p>
-								<p class="prose text-xs font-medium leading-8 dark:text-green-300">
-									sent: {message.time}
-								</p>
-							</Card.Content>
-						</Card.Root>
+								</Card.Content>
+							</Card.Root>
+						{/if}
 					</div>
 				{/if}
 			</div>
@@ -151,7 +215,7 @@
 			</Card.Content>
 		</Card.Root>
 
-		<div class="relative flex w-full max-w-full items-center">
+		<form class="relative flex w-full max-w-full items-center">
 			<Input
 				bind:value={newMessageContent}
 				on:input={handleInputChange}
@@ -167,6 +231,6 @@
 			>
 				<Send class="hover:text-primary" />
 			</Button>
-		</div>
+		</form>
 	</div>
 </div>
diff --git a/apps/aitino/src/lib/components/ui/textarea/textarea.svelte b/apps/aitino/src/lib/components/ui/textarea/textarea.svelte
index 302b3ff6c..61ff4d6e5 100644
--- a/apps/aitino/src/lib/components/ui/textarea/textarea.svelte
+++ b/apps/aitino/src/lib/components/ui/textarea/textarea.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils";
+	export let minRows = 1;
+	export let maxRows: number;
 
 	type $$Props = HTMLTextareaAttributes;
 
 	let className: $$Props["class"] = undefined;
 	export let value: $$Props["value"] = undefined;
 	export { className as class };
+
+	$: minHeight = `${1 + minRows * 1.5}em`;
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
 </script>
 
 <textarea
 	class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
+	style="min-height: {minHeight}; max-height: {maxHeight}"
 	bind:value
 	on:blur
 	on:change
diff --git a/apps/aitino/src/routes/(marketing)/+layout.svelte b/apps/aitino/src/routes/(marketing)/+layout.svelte
index 092dad609..b2c00cfb3 100644
--- a/apps/aitino/src/routes/(marketing)/+layout.svelte
+++ b/apps/aitino/src/routes/(marketing)/+layout.svelte
@@ -9,7 +9,7 @@
 	setContext("splitTestIdentifier", data?.splitTestIdentifier);
 </script>
 
-<Shell class="">
+<Shell>
 	<svelte:fragment slot="header">
 		<Header />
 	</svelte:fragment>
diff --git a/apps/aitino/src/routes/api/v1/prompt/+server.ts b/apps/aitino/src/routes/api/v1/prompt/+server.ts
index 2448651ef..8a90a3b1c 100644
--- a/apps/aitino/src/routes/api/v1/prompt/+server.ts
+++ b/apps/aitino/src/routes/api/v1/prompt/+server.ts
@@ -4,11 +4,14 @@ import { API_BASE_URL } from "$lib/config";
 export const GET = async ({ url }) => {
 	const prompt = url.searchParams.get("prompt");
 	const wordLimit = url.searchParams.get("word_limit") || "300"; // Default to 300 if not provided
+	const temperature = url.searchParams.get("temperature") || "0"; // Default to 0.8 if not provided
+	const prompt_type = url.searchParams.get("prompt_type") || "generic"; // Default to generic if not provided
+
 	if (!prompt) {
 		return json({ error: "No prompt provided" }, { status: 400 });
 	}
 
-	const apiUrl = `${API_BASE_URL}/improve?word_limit=${wordLimit}&prompt=${encodeURIComponent(prompt)}`;
+	const apiUrl = `${API_BASE_URL}/improve?word_limit=${wordLimit}&prompt=${encodeURIComponent(prompt)}&temperature=${temperature}&prompt_type=${prompt_type}`;
 
 	try {
 		const response = await fetch(apiUrl);
diff --git a/apps/aitino/src/routes/api/v1/reply/+server.ts b/apps/aitino/src/routes/api/v1/reply/+server.ts
new file mode 100644
index 000000000..0352f8370
--- /dev/null
+++ b/apps/aitino/src/routes/api/v1/reply/+server.ts
@@ -0,0 +1,65 @@
+import { json } from "@sveltejs/kit";
+import { API_BASE_URL } from "$lib/config";
+
+export const GET = async ({ url }) => {
+	const session_id = url.searchParams.get("session_id");
+	const id = url.searchParams.get("meave_id");
+	const reply = url.searchParams.get("reply");
+	// const params = url.searchParams.get("params");
+
+	console.log(id, session_id, reply, "from reply id api");
+
+	if (!id || !reply) {
+		return json({ error: "No id provided" }, { status: 400 });
+	}
+
+
+	const apiUrl = `${API_BASE_URL}/maeve?id=${id}&session_id=${session_id}&reply=${encodeURIComponent(reply)}`;
+
+
+	try {
+		const response = await fetch(apiUrl);
+		if (!response.ok) {
+			return json(
+				{ error: `API call failed with status ${response.status}: ${response.statusText}` },
+				{ status: 500 }
+			);
+		}
+
+		console.log(response, "response from ba");
+
+		const data = [];
+		const reader = response.body.getReader();
+
+		try {
+			while (true) {
+				const { done, value } = await reader.read();
+				// let notVal = new TextDecoder().decode(value);
+				// console.log(notVal, "res data 0");
+
+				// console.log(value, "value");
+				// console.log(done, "done");
+				if (done) break;
+				data.push(value);
+			}
+		} catch (error) {
+			console.error("Error reading response stream:", error);
+			return json({ error: "Failed to read response stream due to an error." }, { status: 500 });
+		}
+
+		const buffer = new Uint8Array(data.reduce((total, chunk) => total + chunk.length, 0));
+		let position = 0;
+		for (const chunk of data) {
+			buffer.set(chunk, position);
+			position += chunk.length;
+		}
+
+		const responseData = new TextDecoder().decode(buffer);
+
+		// console.log(responseData, "res data");
+		return json({ content: responseData });
+	} catch (error) {
+		console.error("Error calling external API:", error);
+		return json({ error: "Failed to get response due to an external API error." }, { status: 500 });
+	}
+};
diff --git a/apps/aitino/src/routes/app/+layout.svelte b/apps/aitino/src/routes/app/+layout.svelte
index cd070b16c..68037a565 100644
--- a/apps/aitino/src/routes/app/+layout.svelte
+++ b/apps/aitino/src/routes/app/+layout.svelte
@@ -10,26 +10,18 @@
 	let menuOpen = false;
 	let navGroups = [
 		{
-			name: "Editors",
-			baseSrc: "/app/editors",
+			name: null,
+			baseSrc: "/app",
 			items: [
 				{
-					label: "Maeve",
-					src: "/maeve"
-				},
-				{
-					label: "Agent",
-					src: "/agent"
-				},
-				{
-					label: "Workflow",
-					src: "/workflow"
+					label: "Sessions",
+					src: "/sessions"
 				}
 			]
 		},
 		{
-			name: "Libraries",
-			baseSrc: "/app/libraries",
+			name: "Editors",
+			baseSrc: "/app/editors",
 			items: [
 				{
 					label: "Maeve",
diff --git a/apps/aitino/src/routes/app/editors/maeve/+page.svelte b/apps/aitino/src/routes/app/editors/maeve/+page.svelte
index 0798038f2..ddc04828e 100644
--- a/apps/aitino/src/routes/app/editors/maeve/+page.svelte
+++ b/apps/aitino/src/routes/app/editors/maeve/+page.svelte
@@ -9,8 +9,7 @@
 		Panel,
 		useSvelteFlow,
 		type Node,
-		type Edge,
-		getOutgoers
+		type Edge
 	} from "@xyflow/svelte";
 	import { toast } from "svelte-sonner";
 
@@ -41,9 +40,17 @@
 
 	let title = data.title;
 	let description = data.description;
+	let isChatDialogOpen = false;
 
 	const actions: PanelAction[] = [
-		{ name: "Run", buttonVariant: "default" },
+		{
+			name: "Run",
+			buttonVariant: "default",
+			onclick: async () => {
+				isChatDialogOpen = true;
+				await save();
+			}
+		},
 		{ name: "Add Prompt", buttonVariant: "outline", onclick: addNewPrompt },
 		{ name: "Add Agent", buttonVariant: "outline", onclick: addNewAgent },
 		{ name: "Load Maeve", buttonVariant: "outline", isCustom: true },
@@ -78,8 +85,7 @@
 			buttonVariant: "outline",
 			onclick: async () => await save()
 		},
-		{ name: "Layout", buttonVariant: "outline", onclick: layout },
-		{ name: "Sessions", buttonVariant: "outline" }
+		{ name: "Layout", buttonVariant: "outline", onclick: layout }
 	];
 
 	const nodeTypes = {
@@ -143,11 +149,21 @@
 			edges: $edges
 		});
 
+		if (!data.id) {
+			console.error("no data id");
+			toast.error("Something went wrong when saving the nodes.");
+			return;
+		}
 		if (error) {
-			toast.error("Something went wrong when saving the nodes..");
+			console.error(error);
+			toast.error("Something went wrong when saving the nodes.");
 			return;
 		}
 
+		console.log(data.id, "from save node");
+
+		localStorage.setItem("currentMeaveId", data.id);
+
 		toast.success("Nodes successfully saved!");
 	}
 
@@ -176,7 +192,7 @@
 			name = pickRandomName();
 		} while ($nodes.find((n) => n.type === "agent" && get(n.data.name) === name));
 
-		setCenter(position.x, position.y, { zoom: position.zoom });
+		// setCenter(position.x, position.y, { zoom: position.zoom });
 
 		nodes.update((v) => [
 			...v,
@@ -220,6 +236,8 @@
 
 		$count.prompts++;
 	}
+
+	console.log(data.id, "from save node 0");
 </script>
 
 <div style="height:100vh;">
@@ -294,10 +312,13 @@
 			</RightEditorSidebar>
 		</Panel>
 		<Panel position="bottom-right">
-			<Dialog.Root>
-				<Dialog.Trigger>
-					<Button class="block text-base">Chat</Button>
-				</Dialog.Trigger>
+			<Dialog.Root
+				open={isChatDialogOpen}
+				onOpenChange={() => {
+					isChatDialogOpen = false;
+					console.log("close");
+				}}
+			>
 				<Dialog.Content class="sm:max-w-full">
 					<ChatRoom />
 				</Dialog.Content>
diff --git a/apps/aitino/src/routes/app/sessions/+page.svelte b/apps/aitino/src/routes/app/sessions/+page.svelte
new file mode 100644
index 000000000..c7a0695c7
--- /dev/null
+++ b/apps/aitino/src/routes/app/sessions/+page.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import Chat from "./Chat.svelte";
+	import { onMount } from "svelte";
+
+	// get maeveId and sessionId from the page store
+
+	let loading = true;
+	let maeveId: string | null;
+	let sessionId: string | null;
+	let awaitingReply = false;
+	let messages: {
+		id: string;
+		session_id: string;
+		recipient: string;
+		content: string;
+		role: string;
+		name: string;
+		created_at: string;
+	}[] = [];
+
+	onMount(() => {
+		maeveId = localStorage.getItem("currentMeaveId");
+		sessionId = localStorage.getItem("currentSessionId");
+		messages = JSON.parse(localStorage.getItem("currentMessages") || "[]");
+		loading = false;
+	});
+
+	async function* callMaeve(url: string): AsyncGenerator<string, void, unknown> {
+		const response = await fetch(url);
+		const reader = response.body?.getReader();
+
+		if (!reader) {
+			throw new Error("Invalid response");
+		}
+
+		while (true) {
+			const { done, value } = await reader.read();
+
+			if (done) {
+				break;
+			}
+
+			const line = new TextDecoder().decode(value);
+
+			if (!line) {
+				break;
+			}
+
+			yield line;
+		}
+	}
+
+	async function main(): Promise<void> {
+		const url = `https://api.aiti.no/maeve?id=${maeveId}`;
+
+		if (!url) {
+			console.log("Usage: Provide a valid URL as a parameter");
+			return;
+		}
+
+		for await (const event of callMaeve(url)) {
+			let e = null;
+			try {
+				e = JSON.parse(event.trim());
+			} catch (error) {
+				console.error(`Error parsing JSON ${error}:`, event);
+				continue;
+			}
+			if (!e) {
+				continue;
+			}
+
+			if (e.id === 0) {
+				sessionId = e.data.session_id;
+				localStorage.setItem("currentSessionId", e.data.session_id);
+				loading = false;
+				continue;
+			}
+			if (e.data === "done") {
+				awaitingReply = true;
+				console.log("done");
+				return;
+			}
+
+			messages = [...messages, e.data];
+			localStorage.setItem("currentMessages", JSON.stringify(messages));
+		}
+	}
+
+	function runMaeve() {
+		localStorage.removeItem("currentSessionId");
+		localStorage.removeItem("currentMessages");
+		sessionId = null;
+		messages = [];
+		loading = true;
+
+		main();
+	}
+
+	function redirectToCreateMaeve() {
+		window.location.href = "/app/maeves/create";
+	}
+</script>
+
+{#if loading}
+	<div
+		class="xl:prose-md prose prose-sm prose-main mx-auto flex h-screen max-w-none flex-col items-center justify-center gap-4 px-12 text-center md:prose-base 2xl:prose-lg"
+	>
+		<h1>Loading...</h1>
+	</div>
+{:else if sessionId && maeveId}
+	<Chat {maeveId} {sessionId} {messages} {awaitingReply} />
+	<div
+		class="absolute top-0 mx-auto flex h-min w-full flex-col items-center justify-center bg-transparent p-4 backdrop-blur"
+	>
+		<Button on:click={runMaeve}>Start New Session</Button>
+	</div>
+{:else if maeveId}
+	<div
+		class="xl:prose-md prose prose-sm prose-main mx-auto flex h-screen max-w-none flex-col items-center justify-center gap-4 px-12 text-center md:prose-base 2xl:prose-lg"
+	>
+		<h1>It looks like you don't have session yet...</h1>
+		<Button on:click={runMaeve}>Run Your Maeve!</Button>
+	</div>
+{:else}
+	<div
+		class="xl:prose-md prose prose-sm prose-main mx-auto flex h-screen max-w-none flex-col items-center justify-center gap-4 px-12 text-center md:prose-base 2xl:prose-lg"
+	>
+		<h1>It looks like you haven't created a maeve yet...</h1>
+		<Button on:click={redirectToCreateMaeve}>Go Create One!</Button>
+	</div>
+{/if}
+<div class="absolute bottom-1 mx-auto flex h-min w-full flex-col items-center justify-center">
+	<code class="text-muted">debug:</code>
+	<code class="text-muted">maeve id: {maeveId} - session id: {sessionId}</code>
+</div>
diff --git a/apps/aitino/src/routes/app/sessions/Chat.svelte b/apps/aitino/src/routes/app/sessions/Chat.svelte
new file mode 100644
index 000000000..82143aa12
--- /dev/null
+++ b/apps/aitino/src/routes/app/sessions/Chat.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Loader, Send } from "lucide-svelte";
+	import { Input } from "$lib/components/ui/input";
+	import { Button } from "$lib/components/ui/button";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import Message from "./Message.svelte";
+	import * as Card from "$lib/components/ui/card";
+	import { afterUpdate } from "svelte";
+	import { v4 as uuidv4 } from "uuid";
+
+	export let maeveId: string;
+	export let sessionId: string;
+	export let messages: {
+		id: string;
+		session_id: string;
+		recipient: string;
+		content: string;
+		role: string;
+		name: string;
+		created_at: string;
+	}[] = [];
+
+	export let awaitingReply = false;
+
+	let rows = 1;
+	$: minRows = rows <= 1 ? 1 : rows >= 50 ? 50 : rows;
+
+	function handleInputChange(event: { target: { value: string } }) {
+		newMessageContent = event.target.value;
+		rows = newMessageContent.split("\n").length;
+	}
+
+	let newMessageContent = "";
+	function sendMessage() {
+		if (newMessageContent.trim().length <= 5) {
+			console.warn("Message too short");
+			// TODO: show sonner warning to user
+		}
+
+		const newMessage = {
+			id: uuidv4(),
+			session_id: sessionId,
+			recipient: "",
+			content: newMessageContent,
+			role: "user",
+			name: "Admin",
+			created_at: new Date().toISOString().replace("T", " ")
+		};
+		messages = [...messages, newMessage];
+		newMessageContent = "";
+	}
+
+	let chatContainerElement: HTMLDivElement;
+	afterUpdate(() => {
+		if (chatContainerElement) {
+			chatContainerElement.scrollTop = chatContainerElement.scrollHeight;
+		}
+	});
+</script>
+
+<div class="container flex h-screen max-w-6xl flex-col justify-end">
+	<div
+		class="no-scrollbar flex h-screen w-full flex-col gap-4 overflow-y-auto pb-16 pt-20"
+		bind:this={chatContainerElement}
+	>
+		<!-- add scroll to the bottom of the chat  -->
+		{#each messages as message, index}
+			<Message {message} />
+
+			{#if index !== messages.length - 1}
+				<hr class="prose my-20 w-full max-w-none border-t border-nsecondary px-12" />
+			{/if}
+		{/each}
+		{#if awaitingReply}
+			<div class="flex w-full flex-row items-center justify-center gap-1 p-1">
+				<Textarea
+					class="prose prose-main w-full max-w-none resize-none text-lg"
+					placeholder="Give Feedback to the agents"
+					bind:value={newMessageContent}
+					{minRows}
+					maxRows={minRows}
+					on:input={handleInputChange}
+				></Textarea>
+				<Button
+					variant="ghost"
+					class="hover:bg-default hover:scale-95 hover:text-primary"
+					disabled={newMessageContent.length <= 5}
+					on:click={sendMessage}
+				>
+					<Send />
+				</Button>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/apps/aitino/src/routes/app/sessions/Message.svelte b/apps/aitino/src/routes/app/sessions/Message.svelte
new file mode 100644
index 000000000..e229e9720
--- /dev/null
+++ b/apps/aitino/src/routes/app/sessions/Message.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { User } from "lucide-svelte";
+	import SvelteMarkdown from "svelte-markdown";
+	export let message: {
+		id: string;
+		session_id: string;
+		recipient: string;
+		content: string;
+		role: string;
+		name: string;
+		created_at: string;
+	};
+	function formatName(inputString: string): string {
+		return inputString
+			.replace(/([a-z])([A-Z])/g, "$1 $2")
+			.replace(/([A-Z])([A-Z][a-z])/g, "$1 $2")
+			.replace(/-/g, " - ");
+	}
+</script>
+
+<div
+	class="xl:prose-md prose prose-sm prose-main flex max-w-none flex-col items-start justify-end px-12 md:prose-base 2xl:prose-lg"
+>
+	<div class="flex w-full justify-center gap-3">
+		<User size="36" class="ml-[-2.6em]" />
+		<div class="flex w-full items-end justify-between gap-4">
+			<h2 class="m-0 sm:m-0">{formatName(message.name)}</h2>
+			<p class="m-0 sm:m-0">
+				{message.created_at.toString().split(".")[0]}
+			</p>
+		</div>
+	</div>
+	<SvelteMarkdown source={message.content} />
+</div>
diff --git a/apps/aitino/theme/color.cjs b/apps/aitino/theme/color.cjs
index 27d44c95f..b9af33bb1 100644
--- a/apps/aitino/theme/color.cjs
+++ b/apps/aitino/theme/color.cjs
@@ -1,4 +1,96 @@
 const colors = {
+	// Primary tones
+	nprimary: {
+		DEFAULT: "rgb(var(--md-sys-color-primary))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-primary))"
+		},
+		container: {
+			DEFAULT: "rgb(var(--md-sys-color-primary-container))",
+			on: {
+				DEFAULT: "rgb(var(--md-sys-color-on-primary-container))"
+			}
+		},
+		inverse: {
+			DEFAULT: "rgb(var(--md-sys-color-inverse-primary))"
+		}
+	},
+
+	// Secondary tones
+	nsecondary: {
+		DEFAULT: "rgb(var(--md-sys-color-secondary))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-secondary))"
+		},
+		container: {
+			DEFAULT: "rgb(var(--md-sys-color-secondary-container))",
+			on: {
+				DEFAULT: "rgb(var(--md-sys-color-on-secondary-container))"
+			}
+		}
+	},
+
+	// Tertiary tones
+	tertiary: {
+		DEFAULT: "rgb(var(--md-sys-color-tertiary))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-tertiary))"
+		},
+		container: {
+			DEFAULT: "rgb(var(--md-sys-color-tertiary-container))",
+			on: {
+				DEFAULT: "rgb(var(--md-sys-color-on-tertiary-container))"
+			}
+		}
+	},
+
+	// Neutral tones (md3 names them as 'surface')
+	surface: {
+		DEFAULT: "rgb(var(--md-sys-color-surface))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-surface))",
+			inverse: {
+				DEFAULT: "rgb(var(--md-sys-color-inverse-on-surface))"
+			}
+		},
+		// Neutral variant tones
+		variant: {
+			DEFAULT: "rgb(var(--md-sys-color-surface-variant))",
+			on: {
+				DEFAULT: "rgb(var(--md-sys-color-on-surface-variant))"
+			}
+		}
+	},
+
+	// Background tones
+	nbackground: {
+		DEFAULT: "rgb(var(--md-sys-color-background))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-background))"
+		}
+	},
+
+	outline: {
+		DEFAULT: "rgb(var(--md-sys-color-outline))",
+		variant: {
+			DEFAULT: "rgb(var(--md-sys-color-outline-variant))"
+		}
+	},
+
+	// On Error tones
+	error: {
+		DEFAULT: "rgb(var(--md-sys-color-error))",
+		on: {
+			DEFAULT: "rgb(var(--md-sys-color-on-error))"
+		},
+		container: {
+			DEFAULT: "rgb(var(--md-sys-color-error-container))",
+			on: {
+				DEFAULT: "rgb(var(--md-sys-color-on-error-container))"
+			}
+		}
+	},
+
 	border: "rgb(var(--primary) / 0.3)",
 	input: "rgb(var(--input) )",
 	ring: "rgb(var(--ring) )",
diff --git a/apps/aitino/theme/typography.cjs b/apps/aitino/theme/typography.cjs
index 9f2009da9..76d2e0fea 100644
--- a/apps/aitino/theme/typography.cjs
+++ b/apps/aitino/theme/typography.cjs
@@ -4,13 +4,13 @@ const typography = (colors, alpha) => {
 	return {
 		main: {
 			css: {
-				"--tw-prose-body": colorConfig.foreground.replace(")", ") / 0.8 )"), // UNSTABLE METHOD! find a better way to do this using <alpha-value>
-				"--tw-prose-headings": colorConfig.foreground,
+				"--tw-prose-body": colors.neutral[300],
+				"--tw-prose-headings": colors.white,
 				"--tw-prose-lead": colors.neutral[400],
-				"--tw-prose-links": colorConfig.accent.DEFAULT,
+				"--tw-prose-links": colorConfig.tertiary.DEFAULT.replace(alpha, 1),
 				"--tw-prose-bold": colors.white,
 				"--tw-prose-counters": colors.neutral[400],
-				"--tw-prose-bullets": colorConfig.secondary.DEFAULT.replace(alpha, 0.4),
+				"--tw-prose-bullets": colorConfig.nsecondary.DEFAULT.replace(alpha, 0.4),
 				"--tw-prose-hr": colors.neutral[700],
 				"--tw-prose-quotes": colors.neutral[100],
 				"--tw-prose-quote-borders": colorConfig.secondary.DEFAULT.replace(alpha, 0.3),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f21b82127..ca49222da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -187,14 +187,14 @@ importers:
   apps/anzelmo:
     dependencies:
       bits-ui:
-        specifier: ^0.17.0
-        version: 0.17.0(svelte@5.0.0-next.31)
+        specifier: ^0.18.2
+        version: 0.18.3(svelte@5.0.0-next.31)
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
       lucide-svelte:
-        specifier: ^0.330.0
-        version: 0.330.0(svelte@5.0.0-next.31)
+        specifier: ^0.341.0
+        version: 0.341.0(svelte@5.0.0-next.31)
       mdsvex:
         specifier: ^0.11.0
         version: 0.11.0(svelte@5.0.0-next.31)
@@ -215,8 +215,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.1(svelte@5.0.0-next.31)(vite@5.0.12)
       '@types/eslint':
-        specifier: 8.56.2
-        version: 8.56.2
+        specifier: 8.56.3
+        version: 8.56.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.0.1
         version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3)
@@ -287,8 +287,8 @@ importers:
         specifier: ^4.2.0
         version: 4.2.0
       lucide-svelte:
-        specifier: ^0.330.0
-        version: 0.330.0(svelte@5.0.0-next.31)
+        specifier: ^0.341.0
+        version: 0.341.0(svelte@5.0.0-next.31)
       mapbox-gl:
         specifier: ^3.1.2
         version: 3.1.2
@@ -299,15 +299,15 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
       tailwind-variants:
-        specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.1)
+        specifier: ^0.2.0
+        version: 0.2.0(tailwindcss@3.4.1)
     devDependencies:
       '@supabase/supabase-js':
         specifier: ^2.33.2
         version: 2.39.2
       '@sveltejs/adapter-vercel':
-        specifier: ^4.0.4
-        version: 4.0.4(@sveltejs/kit@2.5.0)
+        specifier: ^5.1.0
+        version: 5.1.0(@sveltejs/kit@2.5.0)
       '@sveltejs/kit':
         specifier: ^2.4.3
         version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@5.0.0-next.31)(vite@5.0.12)
@@ -318,17 +318,17 @@ importers:
         specifier: ^4.2.2
         version: 4.2.2
       '@types/eslint':
-        specifier: 8.56.2
-        version: 8.56.2
+        specifier: 8.56.3
+        version: 8.56.3
       '@types/mapbox-gl':
-        specifier: ^2.7.21
-        version: 2.7.21
+        specifier: ^3.1.0
+        version: 3.1.0
       '@typescript-eslint/eslint-plugin':
-        specifier: ^6.0.0
-        version: 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
+        specifier: ^7.1.0
+        version: 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser':
-        specifier: ^6.0.0
-        version: 6.17.0(eslint@8.56.0)(typescript@5.3.3)
+        specifier: ^7.0.2
+        version: 7.1.0(eslint@8.56.0)(typescript@5.3.3)
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.33)
@@ -624,7 +624,7 @@ importers:
         specifier: ^4.0.4
         version: 4.0.4(@sveltejs/kit@2.5.0)
       '@sveltejs/kit':
-        specifier: ^2.0.0
+        specifier: ^2.4.3
         version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.0
@@ -699,8 +699,8 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       lucide-svelte:
-        specifier: ^0.330.0
-        version: 0.330.0(svelte@5.0.0-next.31)
+        specifier: ^0.341.0
+        version: 0.341.0(svelte@5.0.0-next.31)
       mdsvex:
         specifier: ^0.11.0
         version: 0.11.0(svelte@5.0.0-next.31)
@@ -708,8 +708,8 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
       tailwind-variants:
-        specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.1)
+        specifier: ^0.2.0
+        version: 0.2.0(tailwindcss@3.4.1)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
@@ -724,8 +724,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.1(svelte@5.0.0-next.31)(vite@5.0.12)
       '@types/eslint':
-        specifier: 8.56.2
-        version: 8.56.2
+        specifier: 8.56.3
+        version: 8.56.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.0.1
         version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3)
@@ -787,8 +787,8 @@ importers:
         specifier: ^0.0.19
         version: 0.0.19
       bits-ui:
-        specifier: ^0.14.0
-        version: 0.14.0(svelte@5.0.0-next.31)
+        specifier: ^0.18.3
+        version: 0.18.3(svelte@5.0.0-next.31)
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
@@ -799,8 +799,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       lucide-svelte:
-        specifier: ^0.330.0
-        version: 0.330.0(svelte@5.0.0-next.31)
+        specifier: ^0.341.0
+        version: 0.341.0(svelte@5.0.0-next.31)
       mdsvex:
         specifier: ^0.11.0
         version: 0.11.0(svelte@5.0.0-next.31)
@@ -815,8 +815,8 @@ importers:
         specifier: ^2.39.2
         version: 2.39.2
       '@sveltejs/adapter-vercel':
-        specifier: ^4.0.4
-        version: 4.0.4(@sveltejs/kit@2.5.0)
+        specifier: ^5.1.0
+        version: 5.1.0(@sveltejs/kit@2.5.0)
       '@sveltejs/kit':
         specifier: ^2.4.3
         version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@5.0.0-next.31)(vite@5.0.12)
@@ -836,8 +836,8 @@ importers:
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.1)
       '@types/eslint':
-        specifier: 8.56.2
-        version: 8.56.2
+        specifier: 8.56.3
+        version: 8.56.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.0.1
         version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3)
@@ -914,8 +914,8 @@ importers:
         specifier: ^4.2.0
         version: 4.2.0
       lucide-svelte:
-        specifier: ^0.330.0
-        version: 0.330.0(svelte@5.0.0-next.31)
+        specifier: ^0.341.0
+        version: 0.341.0(svelte@5.0.0-next.31)
       mdsvex:
         specifier: ^0.11.0
         version: 0.11.0(svelte@5.0.0-next.31)
@@ -923,15 +923,15 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
       tailwind-variants:
-        specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.1)
+        specifier: ^0.2.0
+        version: 0.2.0(tailwindcss@3.4.1)
     devDependencies:
       '@supabase/supabase-js':
         specifier: ^2.39.2
         version: 2.39.2
       '@sveltejs/adapter-vercel':
-        specifier: ^4.0.4
-        version: 4.0.4(@sveltejs/kit@2.5.0)
+        specifier: ^5.1.0
+        version: 5.1.0(@sveltejs/kit@2.5.0)
       '@sveltejs/kit':
         specifier: ^2.4.3
         version: 2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@5.0.0-next.31)(vite@5.0.12)
@@ -951,8 +951,8 @@ importers:
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.1)
       '@types/eslint':
-        specifier: 8.56.2
-        version: 8.56.2
+        specifier: 8.56.3
+        version: 8.56.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.0.1
         version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3)
@@ -1802,8 +1802,8 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /@melt-ui/svelte@0.68.0(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-/QvA98hnYEodZtHJ71+ocum/WWp30hVNt3F8uiZKnNYwZDaiQYjlyR9AaGKYcZLCe6R68op1mfCzc0kTzJilyA==}
+  /@melt-ui/svelte@0.71.2(svelte@5.0.0-next.31):
+    resolution: {integrity: sha512-GDUErhAphEoEOLpcBjQ84BgzRR6M3344fQE4QYFffwT7aedWak7CvNsECgeig1Y5xvfDmeEaFnGlOQXIBucJYw==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -1816,8 +1816,8 @@ packages:
       svelte: 5.0.0-next.31
     dev: false
 
-  /@melt-ui/svelte@0.71.2(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-GDUErhAphEoEOLpcBjQ84BgzRR6M3344fQE4QYFffwT7aedWak7CvNsECgeig1Y5xvfDmeEaFnGlOQXIBucJYw==}
+  /@melt-ui/svelte@0.74.2(svelte@5.0.0-next.31):
+    resolution: {integrity: sha512-bIfZakPK4h6mOeoeqFnpksUGxkGp5JO2xtfhv/eXjG2rTogsSeVZRPe8eTtE7HoCbokP1+mVM9LqWxipsYTjUA==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -1826,7 +1826,7 @@ packages:
       '@internationalized/date': 3.5.1
       dequal: 2.0.3
       focus-trap: 7.5.4
-      nanoid: 5.0.4
+      nanoid: 5.0.5
       svelte: 5.0.0-next.31
     dev: false
 
@@ -2147,6 +2147,19 @@ packages:
       - encoding
       - supports-color
 
+  /@sveltejs/adapter-vercel@5.1.0(@sveltejs/kit@2.5.0):
+    resolution: {integrity: sha512-Z9yRJ4H2/7LcBlvN2/TKu1H0hWoRGonr8kPhP1GJ23LRW76IbiiX5gs/MLc6+ZGogCZYVJ4USmx6m+RFtvQTRw==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.4.0
+    dependencies:
+      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@5.0.0-next.31)(vite@5.0.12)
+      '@vercel/nft': 0.26.2
+      esbuild: 0.19.11
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12):
     resolution: {integrity: sha512-1uyXvzC2Lu1FZa30T4y5jUAC21R309ZMRG0TPt+PPPbNUoDpy8zSmSNVWYaBWxYDqLGQ5oPNWvjvvF2IjJ1jmA==}
     engines: {node: '>=18.13'}
@@ -2522,6 +2535,13 @@ packages:
       '@types/json-schema': 7.0.15
     dev: true
 
+  /@types/eslint@8.56.3:
+    resolution: {integrity: sha512-PvSf1wfv2wJpVIFUMSb+i4PvqNYkB9Rkp9ZDO3oaWzq4SKhsQk4mrMBr3ZH06I0hKrVGLBacmgl8JM4WVjb9dg==}
+    dependencies:
+      '@types/estree': 1.0.5
+      '@types/json-schema': 7.0.15
+    dev: true
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -2544,8 +2564,8 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/mapbox-gl@2.7.21:
-    resolution: {integrity: sha512-Dx9MuF2kKgT/N22LsMUB4b3acFZh9clVqz9zv1fomoiPoBrJolwYxpWA/9LPO/2N0xWbKi4V+pkjTaFkkx/4wA==}
+  /@types/mapbox-gl@3.1.0:
+    resolution: {integrity: sha512-hI6cQDjw1bkJw7MC/eHMqq5TWUamLwsujnUUeiIX2KDRjxRNSYMjnHz07+LATz9I9XIsKumOtUz4gRYnZOJ/FA==}
     dependencies:
       '@types/geojson': 7946.0.14
     dev: true
@@ -2680,6 +2700,35 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/eslint-plugin@7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-j6vT/kCulhG5wBmGtstKeiVr1rdXE4nk+DT1k6trYkwlrvW9eOF5ZbgKnd/YR6PcM4uTEXa0h6Fcvf6X7Dxl0w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.1.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.1.0
+      '@typescript-eslint/type-utils': 7.1.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.1.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 7.1.0
+      debug: 4.3.4
+      eslint: 8.56.0
+      graphemer: 1.4.0
+      ignore: 5.3.0
+      natural-compare: 1.4.0
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/parser@6.17.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-C4bBaX2orvhK+LlwrY8oWGmSl4WolCfYm513gEccdWZj0CwGadbIADb0FtVEcI+WzUyjyoBj2JRP8g25E6IB8A==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2743,6 +2792,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/parser@7.1.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-V1EknKUubZ1gWFjiOZhDSNToOjs63/9O0puCgGS8aDOgpZY326fzFu15QAUjwaXzRZjf/qdsdBrckYdv9YxB8w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 7.1.0
+      '@typescript-eslint/types': 7.1.0
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 7.1.0
+      debug: 4.3.4
+      eslint: 8.56.0
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/scope-manager@5.62.0:
     resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2775,6 +2845,14 @@ packages:
       '@typescript-eslint/visitor-keys': 7.0.1
     dev: true
 
+  /@typescript-eslint/scope-manager@7.1.0:
+    resolution: {integrity: sha512-6TmN4OJiohHfoOdGZ3huuLhpiUgOGTpgXNUPJgeZOZR3DnIpdSgtt83RS35OYNNXxM4TScVlpVKC9jyQSETR1A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.1.0
+      '@typescript-eslint/visitor-keys': 7.1.0
+    dev: true
+
   /@typescript-eslint/type-utils@6.17.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-hDXcWmnbtn4P2B37ka3nil3yi3VCQO2QEB9gBiHJmQp5wmyQWqnjA85+ZcE8c4FqnaB6lBwMrPkgd4aBYz3iNg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2835,6 +2913,26 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/type-utils@7.1.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-UZIhv8G+5b5skkcuhgvxYWHjk7FW7/JP5lPASMEUoliAPwIH/rxoUSQPia2cuOj9AmDZmwUl1usKm85t5VUMew==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.1.0(eslint@8.56.0)(typescript@5.3.3)
+      debug: 4.3.4
+      eslint: 8.56.0
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/types@5.62.0:
     resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2855,6 +2953,11 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
+  /@typescript-eslint/types@7.1.0:
+    resolution: {integrity: sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
   /@typescript-eslint/typescript-estree@5.62.0(typescript@5.3.3):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2942,6 +3045,28 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@7.1.0(typescript@5.3.3):
+    resolution: {integrity: sha512-k7MyrbD6E463CBbSpcOnwa8oXRdHzH1WiVzOipK3L5KSML92ZKgUBrTlehdi7PEIMT8k0bQixHUGXggPAlKnOQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 7.1.0
+      '@typescript-eslint/visitor-keys': 7.1.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3019,6 +3144,25 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/utils@7.1.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-WUFba6PZC5OCGEmbweGpnNJytJiLG7ZvDBJJoUcX4qZYf1mGZ97mO2Mps6O2efxJcJdRNpqweCistDbZMwIVHw==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 7.1.0
+      '@typescript-eslint/types': 7.1.0
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      eslint: 8.56.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys@5.62.0:
     resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3051,6 +3195,14 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@typescript-eslint/visitor-keys@7.1.0:
+    resolution: {integrity: sha512-FhUqNWluiGNzlvnDZiXad4mZRhtghdoKW6e98GoEOYSu5cND+E39rG5KwJMUzeENwm1ztYBRqof8wMLP+wNPIA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.1.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
@@ -3559,17 +3711,6 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /bits-ui@0.14.0(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-S1LNwp/Sge1Ro1g0iJ+msIUeJYmoNhXBFShnLDOUOKQe3JG1wd027KxZnVd7db6UWr1IqlJdd4/bbB7NYXeYDw==}
-    peerDependencies:
-      svelte: ^4.0.0
-    dependencies:
-      '@internationalized/date': 3.5.1
-      '@melt-ui/svelte': 0.68.0(svelte@5.0.0-next.31)
-      nanoid: 5.0.4
-      svelte: 5.0.0-next.31
-    dev: false
-
   /bits-ui@0.15.1(svelte@4.2.9):
     resolution: {integrity: sha512-1Np8bT6W6SC2tKESfm0CySW+7+xU5S0GuUZqIxC41atZE3WIRiRlzXEYHxW88w6UaLFzZ51ns4E7pchkdV5XCQ==}
     peerDependencies:
@@ -3592,24 +3733,24 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /bits-ui@0.17.0(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-K73jjco1qPmvGXMQtTkZG6K36UmNrPR21u+C1jzoRWmF3NnUfDP4hPJnAci0LosUycfvOxtaHB1M4awvLvQXyQ==}
+  /bits-ui@0.18.1(svelte@5.0.0-next.31):
+    resolution: {integrity: sha512-6junivBQ3EIHeF9j8wDa5pgzegtOwaI61ny4X8F7h2SIJi4RJWwZknkT7O5qPLeGoIYNeYV7N6EOBrr1w9/Mxg==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
       '@internationalized/date': 3.5.1
       '@melt-ui/svelte': 0.71.2(svelte@5.0.0-next.31)
-      nanoid: 5.0.4
+      nanoid: 5.0.5
       svelte: 5.0.0-next.31
     dev: false
 
-  /bits-ui@0.18.1(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-6junivBQ3EIHeF9j8wDa5pgzegtOwaI61ny4X8F7h2SIJi4RJWwZknkT7O5qPLeGoIYNeYV7N6EOBrr1w9/Mxg==}
+  /bits-ui@0.18.3(svelte@5.0.0-next.31):
+    resolution: {integrity: sha512-kcEJWiOHlHv1R3EAmkVDdTnvucT3A5VL4h5ORkJjGUDrpCtPFoMO7jDF6P9XwpD3qVfIVQhN4OldPRNMXW9/RQ==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
       '@internationalized/date': 3.5.1
-      '@melt-ui/svelte': 0.71.2(svelte@5.0.0-next.31)
+      '@melt-ui/svelte': 0.74.2(svelte@5.0.0-next.31)
       nanoid: 5.0.5
       svelte: 5.0.0-next.31
     dev: false
@@ -5968,8 +6109,8 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /lucide-svelte@0.330.0(svelte@5.0.0-next.31):
-    resolution: {integrity: sha512-HDsc2a+MhCEtBUU6JTQMlqk2liukjR/bHS61EtYjP2dPx0fywP5rmr6y592MFx/o4xXzFM93ANrHDayxQKzSvQ==}
+  /lucide-svelte@0.341.0(svelte@5.0.0-next.31):
+    resolution: {integrity: sha512-RdLUlxgm97pKGS5dKchdhLuxmYBpwpcLvZ5XQH3HPO5rZZU8JvfzFs8vnbZH/tsDeA0UeSzdzZyOYbWkOAbarA==}
     peerDependencies:
       svelte: ^3 || ^4 || ^5.0.0-next.42
     dependencies:
diff --git a/shell.nix b/shell.nix
new file mode 100644
index 000000000..790ce6c9c
--- /dev/null
+++ b/shell.nix
@@ -0,0 +1,13 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell {
+    buildInputs = with pkgs; [
+        nodejs
+        nodePackages.pnpm
+    ];
+
+    shellHook = ''
+        fish
+        export NODE_PATH=$NODE_PATH:$(npm root -g)
+    '';
+}