diff --git a/apps/api/src/parser.py b/apps/api/src/parser.py
index ba0e6aa7..c5e2fa70 100644
--- a/apps/api/src/parser.py
+++ b/apps/api/src/parser.py
@@ -62,15 +62,15 @@ def process_crew(crew: Crew) -> tuple[str, CrewProcessed]:
     if not crew.prompt:
         raise HTTPException(400, "got no prompt")
     if len(crew_model.agents) == 0:
-        raise ValueError("crew had no agents")
+        raise HTTPException(400, "crew had no agents")
     # Validate agents
     for agent in crew_model.agents:
         if agent.role == "":
-            raise ValueError(f"agent {agent.id} had no role")
+            raise HTTPException(400, f"agent {agent.id} had no role")
         if agent.title == "":
-            raise ValueError(f"agent {agent.id} had no title")
+            raise HTTPException(400, f"agent {agent.id} had no title")
         if agent.system_message == "":
-            raise ValueError(f"agent {agent.id} had no system message")
+            raise HTTPException(400, f"agent {agent.id} had no system message")
 
     message: str = crew.prompt["content"]
     return message, crew_model
diff --git a/apps/web/.env.example b/apps/web/.env.example
deleted file mode 100644
index 2e45028d..00000000
--- a/apps/web/.env.example
+++ /dev/null
@@ -1,3 +0,0 @@
-PUBLIC_SUPABASE_URL=""
-PUBLIC_SUPABASE_ANON_KEY=""
-PUBLIC_API_URL=""
diff --git a/apps/web/src/lib/api/index.ts b/apps/web/src/lib/api/index.ts
index cb9075af..60a7d166 100644
--- a/apps/web/src/lib/api/index.ts
+++ b/apps/web/src/lib/api/index.ts
@@ -1,7 +1,8 @@
 import createClient from 'openapi-fetch';
 import type { paths, components } from '$lib/api/v0.d.ts';
+import { PUBLIC_API_URI } from '$env/static/public';
 
-const api = createClient<paths>({ baseUrl: 'https://api.aiti.no/' });
+const api = createClient<paths>({ baseUrl: PUBLIC_API_URI });
 export default api;
 
 type schemas = components['schemas'];
diff --git a/apps/web/src/lib/components/ui/prompt-editor/prompt-editor.svelte b/apps/web/src/lib/components/ui/prompt-editor/prompt-editor.svelte
index 5d72b9d0..b0619705 100644
--- a/apps/web/src/lib/components/ui/prompt-editor/prompt-editor.svelte
+++ b/apps/web/src/lib/components/ui/prompt-editor/prompt-editor.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Loader2 } from 'lucide-svelte';
-	import { PUBLIC_API_URL } from '$env/static/public';
 
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Button } from '$lib/components/ui/button';
@@ -24,27 +23,28 @@
 			const temperature = 0; // Default to 0 if not provided
 			const prompt_type = 'generic'; // Default to generic if not provided
 
-			const apiUrl = `${PUBLIC_API_URL}/improve?word_limit=${wordLimit}&prompt=${encodeURIComponent(value)}&temperature=${temperature}&prompt_type=${prompt_type}`;
-
-			try {
-				const response = await fetch(apiUrl);
-				if (!response.ok) {
-					state = 'error';
-					console.log(`request failed: ${response.status}, ${response.statusText}`);
-				}
-
-				let data = await response.json();
-				console.log(data);
-				state = 'idle';
-				if (data.startsWith('```markdown')) {
-					data = data.substring(11); // Remove the starting ```markdown
-					data = data.substring(0, data.lastIndexOf('```')); // Remove the closing ```
-				}
-				value = data;
-			} catch (error) {
-				state = 'error';
-				console.log(`HTTP error! status: ${error}`);
-			}
+			// TODO: implement openapi fetche
+			// 	const apiUrl = `${PUBLIC_API_URL}/improve?word_limit=${wordLimit}&prompt=${encodeURIComponent(value)}&temperature=${temperature}&prompt_type=${prompt_type}`;
+			//
+			// 	try {
+			// 		const response = await fetch(apiUrl);
+			// 		if (!response.ok) {
+			// 			state = 'error';
+			// 			console.log(`request failed: ${response.status}, ${response.statusText}`);
+			// 		}
+			//
+			// 		let data = await response.json();
+			// 		console.log(data);
+			// 		state = 'idle';
+			// 		if (data.startsWith('```markdown')) {
+			// 			data = data.substring(11); // Remove the starting ```markdown
+			// 			data = data.substring(0, data.lastIndexOf('```')); // Remove the closing ```
+			// 		}
+			// 		value = data;
+			// 	} catch (error) {
+			// 		state = 'error';
+			// 		console.log(`HTTP error! status: ${error}`);
+			// 	}
 		} catch (error) {
 			state = 'error';
 			console.error('Error fetching improved prompt:', error);
diff --git a/apps/web/src/lib/types/index.ts b/apps/web/src/lib/types/index.ts
index 89ac191c..d062cda7 100644
--- a/apps/web/src/lib/types/index.ts
+++ b/apps/web/src/lib/types/index.ts
@@ -3,6 +3,7 @@ import type { Writable } from 'svelte/store';
 
 import type { Variant } from '$lib/components/ui/button';
 import type Stripe from 'stripe';
+import type { schemas } from '$lib/api';
 
 export type SvelteEvent<E extends Event = Event, T extends EventTarget = Element> = E & {
 	currentTarget: EventTarget & T;
@@ -28,6 +29,12 @@ export interface ContextMap {
 export interface CrewContext {
 	receiver: Writable<{ node: Node; targetCount: number } | null>;
 	count: Writable<{ agents: number; prompts: number }>;
+	profileId: Writable<string>;
+	crew: Writable<schemas['Crew']>;
+	agents: Writable<schemas['Agent'][]>;
+	publishedAgents: Writable<schemas['Agent'][]>;
+	nodes: Writable<Node[]>;
+	edges: Writable<Edge[]>;
 }
 
 export type Categories =
diff --git a/apps/web/src/routes/app/crews/[id]/+layout.svelte b/apps/web/src/routes/app/crews/[id]/+layout.svelte
index 4d8b1dc3..e3012d06 100644
--- a/apps/web/src/routes/app/crews/[id]/+layout.svelte
+++ b/apps/web/src/routes/app/crews/[id]/+layout.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
 	import { SvelteFlowProvider } from '@xyflow/svelte';
-	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
-
-	setContext('crew', {
-		receiver: writable(null),
-		count: writable({ agents: 0, prompts: 0 })
-	});
 </script>
 
 <SvelteFlowProvider>
diff --git a/apps/web/src/routes/app/crews/[id]/+page.server.ts b/apps/web/src/routes/app/crews/[id]/+page.server.ts
index 6d67dcaa..79ba5b1b 100644
--- a/apps/web/src/routes/app/crews/[id]/+page.server.ts
+++ b/apps/web/src/routes/app/crews/[id]/+page.server.ts
@@ -1,6 +1,9 @@
 import { error, redirect } from '@sveltejs/kit';
 import api, { type schemas } from '$lib/api';
 import type { Edge, Node } from '@xyflow/svelte';
+import { writable } from 'svelte/store';
+import { getWritablePrompt } from '$lib/utils.js';
+import type { CrewContext } from '$lib/types/index.js';
 
 const processEdges = (crewEdges: schemas['Crew']['edges']): Edge[] => {
 	let edges: Edge[] = [];
@@ -57,7 +60,7 @@ const getNodesByCrewId = async (crew_id: string): Promise<Node[]> => {
 	return nodes;
 };
 
-export const load = async ({ locals: { getSession }, params }) => {
+export const load = async ({ locals: { getSession }, params }): Promise<CrewContext> => {
 	const { id } = params;
 	const session = await getSession();
 	const profileId = session?.user?.id as string;
@@ -135,13 +138,21 @@ export const load = async ({ locals: { getSession }, params }) => {
 		throw error(500, 'Failed to load published agents');
 	}
 
+	// TODO: get the prompt count and receiver agent if it exists
+	const count = { agents: userAgents.length, prompts: 0 };
+	const receiver = null;
+	const nodes = getWritablePrompt(await getNodesByCrewId(crew.id));
+	const edges = processEdges(crew.edges);
+
 	return {
-		profileId: profileId,
-		crew: crew,
-		myAgents: userAgents,
-		publishedAgents: publishedAgents,
-		nodes: await getNodesByCrewId(crew.id),
-		edges: processEdges(crew.edges)
+		count: writable(count),
+		receiver: writable(receiver),
+		profileId: writable(profileId),
+		crew: writable(crew),
+		agents: writable(userAgents),
+		publishedAgents: writable(publishedAgents),
+		nodes: writable(nodes),
+		edges: writable(edges)
 	};
 };
 
diff --git a/apps/web/src/routes/app/crews/[id]/+page.svelte b/apps/web/src/routes/app/crews/[id]/+page.svelte
index c09cd1f8..1c30c4a4 100644
--- a/apps/web/src/routes/app/crews/[id]/+page.svelte
+++ b/apps/web/src/routes/app/crews/[id]/+page.svelte
@@ -18,30 +18,24 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { AgentLibrary } from '$lib/components/ui/library';
 	import * as CustomNode from '$lib/components/ui/custom-node';
-	import { getContext, getWritablePrompt, getCleanNodes } from '$lib/utils';
+	import { getContext, getCleanNodes } from '$lib/utils';
 	import type { PanelAction } from '$lib/types';
-	import { AGENT_LIMIT, PROMPT_LIMIT } from '$lib/config.js';
+	import { AGENT_LIMIT, PROMPT_LIMIT } from '$lib/config';
 	import { goto } from '$app/navigation';
+	import { setContext } from 'svelte';
 
 	export let data;
 
-	const { receiver, count } = getContext('crew');
-	let initialized = false;
-
-	$: if (initialized) {
-		data.crew.receiver_id = $receiver ? $receiver.node.id : null;
-	}
-	let title = data.crew.title;
-	$: data.crew.title = title;
-	let description = data.crew.description;
-	$: data.crew.description = description;
+	setContext('crew', data);
+	let { count, receiver, profileId, crew, agents, publishedAgents, nodes, edges } =
+		getContext('crew');
 
 	let openAgentLibrary = false;
 
 	let status: 'saving' | 'running' | 'idle' = 'idle';
 
-	let actions: PanelAction[];
-	$: actions = [
+	let panelActions: PanelAction[];
+	$: panelActions = [
 		{
 			name: 'Run',
 			loading: status === 'running',
@@ -67,8 +61,8 @@
 					{
 						nodes: getCleanNodes($nodes),
 						edges: $edges,
-						title,
-						description,
+						title: $crew.title,
+						description: $crew.description,
 						receiver_id: $receiver?.node.id ?? null
 					},
 					null,
@@ -138,21 +132,13 @@
 		return { nodes, edges };
 	}
 
-	const nodes = writable<Node[]>(getWritablePrompt(data.nodes));
-	const edges = writable<Edge[]>(data.edges);
-
-	$: data.nodes = getCleanNodes($nodes);
-	$: data.edges = $edges;
-
-	layout();
-
 	async function save() {
 		status = 'saving';
 
 		const response = await (
 			await fetch('?/save', {
 				method: 'POST',
-				body: JSON.stringify(data.crew)
+				body: JSON.stringify(crew)
 			})
 		).json();
 
@@ -187,9 +173,9 @@
 	function addAgent(data: any) {
 		if ($count.agents >= AGENT_LIMIT) return;
 
-		const existingNode = $nodes.find((node) => node.id === data.id);
+		const existingNode = $nodes.find((node) => node.id === id);
 		if (existingNode) {
-			console.log(`Node with ID ${data.id} already exists.`);
+			console.log(`Node with ID ${id} already exists.`);
 			return;
 		}
 
@@ -197,7 +183,7 @@
 		nodes.update((v) => [
 			...v,
 			{
-				id: data.id,
+				id: id,
 				type: 'agent',
 				position,
 				selectable: false,
@@ -230,6 +216,8 @@
 
 		$count.prompts++;
 	}
+
+	layout();
 </script>
 
 <div style="height:100vh;">
@@ -240,9 +228,8 @@
 		{nodeTypes}
 		fitView
 		oninit={() => {
-			setReceiver(data.crew.receiver_id);
-			initialized = true;
-			data.nodes.forEach((n) => {
+			setReceiver($receiver ? $receiver.node.id : null);
+			getCleanNodes($nodes).forEach((n) => {
 				if (n.type === 'agent') {
 					$count.agents++;
 				} else {
@@ -284,7 +271,12 @@
 		<Background class="!bg-background" />
 
 		<Panel position="top-right">
-			<RightEditorSidebar bind:description bind:title {actions} let:action>
+			<RightEditorSidebar
+				bind:description={$crew.description}
+				bind:title={$crew.title}
+				actions={panelActions}
+				let:action
+			>
 				{#if action.isCustom}
 					<Dialog.Root open={openAgentLibrary} onOpenChange={(o) => (openAgentLibrary = o)}>
 						<Dialog.Trigger>
@@ -294,8 +286,8 @@
 						</Dialog.Trigger>
 						<Dialog.Content class="max-w-6xl">
 							<AgentLibrary
-								myAgents={data.myAgents}
-								publishedAgents={data.publishedAgents}
+								myAgents={agents}
+								{publishedAgents}
 								on:load-agent={({ detail }) => {
 									addAgent(detail);
 								}}
diff --git a/apps/web/src/routes/app/crews/[id]/CrewPanel.svelte b/apps/web/src/routes/app/crews/[id]/CrewPanel.svelte
new file mode 100644
index 00000000..e42866c3
--- /dev/null
+++ b/apps/web/src/routes/app/crews/[id]/CrewPanel.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { Panel, useSvelteFlow } from '@xyflow/svelte';
+	import RightEditorSidebar from '$lib/components/RightEditorSidebar.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { AgentLibrary } from '$lib/components/ui/library';
+	import { goto } from '$app/navigation';
+	import { getContext } from '$lib/utils';
+	import type { PanelAction } from '$lib/types';
+	import { PROMPT_LIMIT } from '$lib/config';
+	import { writable } from 'svelte/store';
+	import { toast } from 'svelte-sonner';
+	import api from '$lib/api';
+	import { error } from '@sveltejs/kit';
+
+	let { count, receiver, profileId, crew, agents, publishedAgents, nodes, edges } =
+		getContext('crew');
+
+	async function save() {
+		toast.message('Saving crew...');
+
+		const response = await api
+			.PATCH('/crews/{crew_id}', {
+				params: {
+					path: {
+						crew_id: $crew.id
+					}
+				},
+				body: {
+					receiver_id: $crew.receiver_id,
+					prompt: $crew.prompt,
+					profile_id: $crew.profile_id,
+					published: $crew.published,
+					title: $crew.title,
+					description: $crew.description,
+					edges: $crew.edges,
+					nodes: $agents.map((n: any) => n.id)
+				}
+			})
+			.then(({ data: d, error: e }) => {
+				if (e) {
+					console.error(`Error saving crew: ${e.detail}`);
+					toast.error(`Failed to save crew! Please report to dev team with logs from the console.`);
+					return null;
+				}
+				if (!d) {
+					console.error(`No data returned from agents`);
+					toast.error(`Failed to save crew! Please report to dev team with logs from the console.`);
+					return null;
+				}
+				toast.success('Crew successfully saved!');
+				return d;
+			});
+
+		return response ? true : false;
+	}
+
+	const { deleteElements, getNodes, getViewport, setCenter } = useSvelteFlow();
+	function addPrompt() {
+		if ($count.prompts >= PROMPT_LIMIT) return;
+
+		const position = { ...getViewport() };
+		setCenter(position.x, position.y, { zoom: position.zoom });
+
+		nodes.update((v) => [
+			...v,
+			{
+				id: crypto.randomUUID(),
+				type: 'prompt',
+				selectable: false,
+				position,
+				data: {
+					title: writable(''),
+					content: writable('')
+				}
+			}
+		]);
+
+		$count.prompts++;
+	}
+
+	let panelActions: PanelAction[];
+	$: panelActions = [
+		{
+			name: 'Run',
+			loading: status === 'running',
+			buttonVariant: 'default',
+			onclick: async () => {
+				goto('/app/session');
+			}
+		},
+		{ name: 'Add Prompt', buttonVariant: 'outline', onclick: addPrompt },
+		{
+			name: 'Add Agent',
+			isCustom: true
+		},
+		{
+			name: 'Export',
+			onclick: () => {
+				const jsonString = JSON.stringify(
+					{
+						nodes: getCleanNodes($nodes),
+						edges: $edges,
+						title: $crew.title,
+						description: $crew.description,
+						receiver_id: $receiver?.node.id ?? null
+					},
+					null,
+					2
+				);
+				const blob = new Blob([jsonString], { type: 'application/json' });
+				const url = window.URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = 'crew.json';
+				document.body.appendChild(a);
+				a.click();
+				window.URL.revokeObjectURL(url);
+				document.body.removeChild(a);
+			}
+		},
+		{
+			name: 'Save',
+			loading: status === 'saving',
+			onclick: save
+		},
+		{ name: 'Layout', onclick: layout }
+	];
+</script>
+
+<Panel position="top-right">
+	<RightEditorSidebar
+		bind:description={$crew.description}
+		bind:title={$crew.title}
+		actions={panelActions}
+		let:action
+	>
+		{#if action.isCustom}
+			<Dialog.Root open={openAgentLibrary} onOpenChange={(o) => (openAgentLibrary = o)}>
+				<Dialog.Trigger>
+					<Button variant={action.buttonVariant ?? 'outline'} class="w-full">
+						{action.name}
+					</Button>
+				</Dialog.Trigger>
+				<Dialog.Content class="max-w-6xl">
+					<AgentLibrary
+						myAgents={agents}
+						{publishedAgents}
+						on:load-agent={({ detail }) => {
+							addAgent(detail);
+						}}
+					/>
+				</Dialog.Content>
+			</Dialog.Root>
+		{/if}
+	</RightEditorSidebar>
+</Panel>
diff --git a/apps/web/src/routes/app/session/[slug]/Chat.svelte b/apps/web/src/routes/app/session/[slug]/Chat.svelte
index 14ebc1d8..b63ea186 100644
--- a/apps/web/src/routes/app/session/[slug]/Chat.svelte
+++ b/apps/web/src/routes/app/session/[slug]/Chat.svelte
@@ -6,7 +6,6 @@
 	import { afterUpdate } from 'svelte';
 	import { supabase } from '$lib/supabase';
 	import { toast } from 'svelte-sonner';
-	import { PUBLIC_API_URL } from '$env/static/public';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import type { schemas } from '$lib/api';
 
@@ -83,9 +82,10 @@
 		}
 
 		// 'Resume' the conversation to Crew API
-		await fetch(
-			`${PUBLIC_API_URL}/crew?id=${session.crew_id}&profile_id=${session.profile_id}&session_id=${session.id}&reply=${newMessageContent}`
-		);
+		// TODO: implement openapi fetch
+		// await fetch(
+		// 	`${PUBLIC_API_URL}/crew?id=${session.crew_id}&profile_id=${session.profile_id}&session_id=${session.id}&reply=${newMessageContent}`
+		// );
 
 		// Update local status
 		waitingForUser = true;