From 76d0dfd9b6b84136c93ae1e2b233f8b49dd7fe84 Mon Sep 17 00:00:00 2001
From: iandjx <3683356+iandjx@users.noreply.github.com>
Date: Thu, 13 Feb 2025 17:37:11 +0800
Subject: [PATCH] fix type errors

---
 webapp/.eslintignore                          |   1 +
 webapp/.eslintrc.json                         |  12 +-
 webapp/package.json                           |   3 +-
 webapp/src/components/AgentForm.tsx           |   7 +-
 webapp/src/components/AgentList2.tsx          |  33 +-
 webapp/src/components/ApiKeyList.tsx          |  27 +-
 webapp/src/components/AvatarUploader.tsx      |  12 +-
 webapp/src/components/ChatAppForm.tsx         |  49 ++-
 webapp/src/components/ChatAppForm2.tsx        |  32 +-
 webapp/src/components/CreateTeamModal.tsx     |  11 +-
 webapp/src/components/CrewAppForm.tsx         |   7 +-
 webapp/src/components/CrewAppForm2.tsx        |  12 +-
 webapp/src/components/InviteForm.tsx          |  16 +-
 webapp/src/components/InviteFormModal.tsx     |  54 +--
 webapp/src/components/Layout2.tsx             |  56 +--
 webapp/src/components/MemberList.tsx          | 258 +++++++-------
 webapp/src/components/ModelForm.tsx           |  15 +-
 webapp/src/components/NewButtonSection.tsx    |   2 +-
 webapp/src/components/OrgSelector2.tsx        |   6 +-
 .../src/components/PageTitleWithNewButton.tsx |  15 +-
 webapp/src/components/ParameterForm.tsx       |   9 +-
 webapp/src/components/PermissionsEditor.tsx   | 121 +++----
 webapp/src/components/TaskFlow.tsx            |  24 +-
 webapp/src/components/TaskForm.tsx            |  48 ++-
 webapp/src/components/TeamSettingsForm.tsx    |  28 +-
 webapp/src/components/ToolList2.tsx           |   6 +-
 .../src/components/agents/NewAgentSheet.tsx   | 104 +++---
 webapp/src/components/apikeys/ApiKeyForm.tsx  |   6 +-
 .../components/apps/AgentCreatedDisplay.tsx   | 327 +++++++++---------
 .../components/apps/AgentSelectDisplay.tsx    |  12 +-
 .../src/components/apps/CreateAgentSheet.tsx  |  86 +++--
 .../components/apps/ToolsDialogContent.tsx    |   9 +-
 .../apps/crew-apps/AgentSelection.tsx         |  18 +-
 .../connections/EmbeddingModelSelect.tsx      |   6 +-
 .../connections/VectorDBSelection.tsx         |  12 +-
 .../src/components/modal/CreateToolModal.tsx  |   3 +
 .../src/components/sessions/SessionTable.tsx  |  24 +-
 webapp/src/components/tasks/NewTaskSheet.tsx  |   2 +-
 webapp/src/components/tools/ToolForm.tsx      |  18 +-
 .../tools/form/FunctionToolForm.tsx           |  12 +-
 .../components/tools/form/ToolDetailsForm.tsx |  13 +-
 webapp/src/components/tools/tools-create.tsx  |  12 +-
 webapp/src/components/tools/tools-edit.tsx    | 162 ++++-----
 webapp/src/components/tools/tools-library.tsx | 223 ++++++------
 webapp/src/components/tools/tools-mytools.tsx |  18 +-
 .../stepper-create-dependencies.tsx           |   2 +-
 .../stepper-create-parameters.tsx             |   2 +-
 .../stepper-edit-config.tsx                   |   9 +-
 .../stepper-edit-dependencies.tsx             |  22 +-
 .../stepper-edit-version-history.tsx          |   8 +-
 .../tools/toolsdialogscreens/Custom.tsx       |   2 +-
 .../tools/toolsdialogscreens/Initial.tsx      |  24 +-
 .../tools/toolsdialogscreens/Install.tsx      |   3 +-
 .../tools/toolsdialogscreens/Tool.tsx         |   9 +-
 .../src/components/variables/VariableForm.tsx |  18 +-
 .../components/multi-select-dialog.tsx        |  30 +-
 .../src/modules/components/multi-select.tsx   |   4 +-
 webapp/src/modules/components/stepper.tsx     |   6 +-
 webapp/src/modules/components/ui/checkbox.tsx |   3 +-
 webapp/src/modules/components/ui/command.tsx  |   1 -
 webapp/src/modules/components/ui/dialog.tsx   |   6 +-
 .../modules/components/ui/dropdown-menu.tsx   |   9 +-
 webapp/src/modules/components/ui/select.tsx   |  18 +-
 webapp/src/modules/components/ui/sheet.tsx    |   3 +-
 webapp/src/modules/components/ui/sidebar.tsx  |  29 +-
 webapp/src/pages/[resourceSlug]/agents.tsx    |   1 +
 webapp/src/pages/[resourceSlug]/agents2.tsx   |   3 +
 webapp/src/pages/[resourceSlug]/app/add.tsx   |   6 +-
 webapp/src/pages/[resourceSlug]/app/add2.tsx  |  34 +-
 webapp/src/pages/[resourceSlug]/apps.tsx      | 131 ++++---
 webapp/src/pages/[resourceSlug]/apps_bak.tsx  | 127 -------
 .../[resourceSlug]/connections/index.tsx      |   3 +-
 .../datasource/[datasourceId]/index.tsx       |  38 +-
 .../src/pages/[resourceSlug]/datasources.tsx  |  12 +-
 webapp/src/pages/[resourceSlug]/models.tsx    |   1 +
 webapp/src/pages/[resourceSlug]/org.tsx       |   2 +
 .../[resourceSlug]/org/[memberId]/edit.tsx    |   3 +
 .../session/[sessionId]/index.tsx             |   9 +-
 webapp/src/pages/[resourceSlug]/tasks.tsx     |   9 +-
 webapp/src/pages/[resourceSlug]/team.tsx      | 188 +++++-----
 .../[resourceSlug]/team/[memberId]/edit.tsx   |   8 +-
 .../[resourceSlug]/tool/[toolId]/edit.tsx     |   3 +
 webapp/src/pages/[resourceSlug]/tool/add.tsx  |   3 +
 webapp/src/pages/[resourceSlug]/tools.tsx     |   1 +
 webapp/src/pages/[resourceSlug]/vectordbs.tsx |   1 +
 webapp/src/pages/apikey/add.tsx               |   2 +-
 webapp/src/pages/apikeys.tsx                  |   3 +-
 webapp/src/pages/billing.tsx                  |  10 +-
 webapp/src/pages/login.tsx                    |  33 +-
 webapp/src/pages/register.tsx                 |  38 +-
 webapp/src/sync-server/main.ts                |   3 +-
 webapp/tsconfig.json                          |   2 +-
 92 files changed, 1489 insertions(+), 1324 deletions(-)
 create mode 100644 webapp/.eslintignore
 delete mode 100644 webapp/src/pages/[resourceSlug]/apps_bak.tsx

diff --git a/webapp/.eslintignore b/webapp/.eslintignore
new file mode 100644
index 000000000..51008763a
--- /dev/null
+++ b/webapp/.eslintignore
@@ -0,0 +1 @@
+src/test/* 
\ No newline at end of file
diff --git a/webapp/.eslintrc.json b/webapp/.eslintrc.json
index b8470f5aa..27b0adefc 100644
--- a/webapp/.eslintrc.json
+++ b/webapp/.eslintrc.json
@@ -1,4 +1,5 @@
 {
+	"parser": "@typescript-eslint/parser",
 	"ignorePatterns": [
 		"*.config.js",
 		"*.config.ts",
@@ -8,21 +9,22 @@
 	],
 	"extends": [
 		// "next/core-web-vitals",
-		"plugin:prettier/recommended"
+		// "plugin:prettier/recommended"
 	],
 	"parserOptions": {
-		"ecmaVersion": "latest"
+		"ecmaVersion": "latest",
+    	"sourceType": "module",
+    	"project": "./tsconfig.json"
 	},
 	"plugins": [
 		"simple-import-sort"
 	],
 	"rules": {
-		"simple-import-sort/imports": "error",
+		// "simple-import-sort/imports": "error",
 		"react-hooks/exhaustive-deps": "off",
 		"@next/next/no-img-element": "off",
 		"import/no-anonymous-default-export": "off",
-		"jsx-a11y/alt-text": "off",
-		"prettier/prettier": ["error", { "bracketSameLine": true }]
+		"jsx-a11y/alt-text": "off"
 
 	}
 }
diff --git a/webapp/package.json b/webapp/package.json
index 2e63a9123..77fa3b6b4 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -18,7 +18,8 @@
     "dev:email": "email dev --dir ./src/emails",
     "test:unit": "jest --verbose --testPathIgnorePatterns=./test/ --coverage",
     "test:coverage": "jest --verbose --testPathIgnorePatterns=./test/ --collectCoverage --coverageReporters cobertura",
-    "test:integration": "jest --detectOpenHandles --testPathPattern=./test/"
+    "test:integration": "jest --detectOpenHandles --testPathPattern=./test/",
+    "format:tsx": "prettier --write \"src/**/*.tsx\""
   },
   "keywords": [],
   "author": "RNA DIGITAL PTY LTD",
diff --git a/webapp/src/components/AgentForm.tsx b/webapp/src/components/AgentForm.tsx
index d35512c41..4c2ff6fc0 100644
--- a/webapp/src/components/AgentForm.tsx
+++ b/webapp/src/components/AgentForm.tsx
@@ -347,7 +347,12 @@ export default function AgentForm({
 								Avatar
 							</label>
 							<div className='mt-2'>
-								<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+								<AvatarUploader
+									existingAvatar={icon}
+									callback={iconCallback}
+									isDialogOpen={false}
+									setIsDialogOpen={() => {}}
+								/>
 							</div>
 						</div>
 					</div>
diff --git a/webapp/src/components/AgentList2.tsx b/webapp/src/components/AgentList2.tsx
index 2e6d80ab3..7eb0a8e43 100644
--- a/webapp/src/components/AgentList2.tsx
+++ b/webapp/src/components/AgentList2.tsx
@@ -51,9 +51,9 @@ const DeleteDialog = ({
 	onDelete: () => void;
 }) => {
 	return (
-		<Dialog 
-			open={openDeleteDialog} 
-			onOpenChange={(open) => {
+		<Dialog
+			open={openDeleteDialog}
+			onOpenChange={open => {
 				setOpenDeleteDialog(open);
 				if (!open) {
 					// Reset focus and state when dialog closes
@@ -61,7 +61,7 @@ const DeleteDialog = ({
 				}
 			}}
 		>
-			<DialogContent 
+			<DialogContent
 				onPointerDownOutside={() => {
 					setOpenDeleteDialog(false);
 					document.body.style.pointerEvents = 'auto';
@@ -91,7 +91,7 @@ const DeleteDialog = ({
 					</DialogDescription>
 				</DialogHeader>
 				<DialogFooter className='flex items-center justify-center gap-6 mx-auto mt-4'>
-						<Button 
+					<Button
 						onClick={() => {
 							setOpenDeleteDialog(false);
 							document.body.style.pointerEvents = 'auto';
@@ -100,7 +100,7 @@ const DeleteDialog = ({
 					>
 						Cancel
 					</Button>
-					<Button 
+					<Button
 						onClick={() => {
 							onDelete();
 							setOpenDeleteDialog(false);
@@ -143,7 +143,7 @@ export default function AgentList2({ agents, fetchAgents }) {
 
 	async function deleteAgent(agentId) {
 		if (!agentId) return;
-		
+
 		API.deleteAgent(
 			{
 				_csrf: csrf,
@@ -155,7 +155,7 @@ export default function AgentList2({ agents, fetchAgents }) {
 				toast.success('Agent deleted successfully');
 				setSelectedAgentId(null);
 			},
-			(error) => {
+			error => {
 				toast.error(error || 'Error deleting agent');
 				setSelectedAgentId(null);
 			},
@@ -165,7 +165,11 @@ export default function AgentList2({ agents, fetchAgents }) {
 
 	return (
 		<>
-			<DeleteDialog openDeleteDialog={openDeleteDialog} setOpenDeleteDialog={setOpenDeleteDialog} onDelete={() => deleteAgent(selectedAgentId)} />
+			<DeleteDialog
+				openDeleteDialog={openDeleteDialog}
+				setOpenDeleteDialog={setOpenDeleteDialog}
+				onDelete={() => deleteAgent(selectedAgentId)}
+			/>
 			<main className='text-foreground flex flex-col gap-2'>
 				<section className='flex items-center justify-between mb-4'>
 					<h4 className='text-gray-900 font-semibold text-2xl'>Agents</h4>
@@ -182,7 +186,8 @@ export default function AgentList2({ agents, fetchAgents }) {
 						<Button
 							onClick={() => setOpenNewAgentSheet(true)}
 							asChild
-							className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg cursor-pointer'>
+							className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg cursor-pointer'
+						>
 							<div>
 								<CirclePlus width={10.5} />
 								<p className='font-semibold text-sm'>New Agent</p>
@@ -192,6 +197,7 @@ export default function AgentList2({ agents, fetchAgents }) {
 				</section>
 				{agents.length <= 0 ? (
 					<CreateAgentSheet
+						//@ts-ignore
 						setAgentDisplay={setAgentDisplay}
 						openEditSheet={openEditSheet}
 						setOpenEditSheet={setOpenEditSheet}
@@ -206,7 +212,8 @@ export default function AgentList2({ agents, fetchAgents }) {
 							return (
 								<Card
 									key={agent.id}
-									className='rounded-2xl gap-[21px] flex flex-col border-0 shadow-none lg:border lg:border-gray-200 max-h-80 overflow-auto'>
+									className='rounded-2xl gap-[21px] flex flex-col border-0 shadow-none lg:border lg:border-gray-200 max-h-80 overflow-auto'
+								>
 									<CardHeader>
 										<CardTitle>
 											<div className='flex flex-col gap-2'>
@@ -222,7 +229,8 @@ export default function AgentList2({ agents, fetchAgents }) {
 																onClick={() => {
 																	setSelectedAgentId(agent._id);
 																	setOpenDeleteDialog(true);
-																}}>
+																}}
+															>
 																Delete
 															</DropdownMenuItem>
 															<DropdownMenuItem onClick={() => alert('Pin action triggered')}>
@@ -305,6 +313,7 @@ export default function AgentList2({ agents, fetchAgents }) {
 			</main>
 
 			<NewAgentSheet
+				//@ts-ignore
 				setAgentDisplay={setAgentDisplay}
 				openEditSheet={openNewAgentSheet}
 				setOpenEditSheet={setOpenNewAgentSheet}
diff --git a/webapp/src/components/ApiKeyList.tsx b/webapp/src/components/ApiKeyList.tsx
index b887b141f..5bcca29f0 100644
--- a/webapp/src/components/ApiKeyList.tsx
+++ b/webapp/src/components/ApiKeyList.tsx
@@ -121,23 +121,27 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 						<tr>
 							<th
 								scope='col'
-								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
+								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
+							>
 								Name
 							</th>
 							<th
 								scope='col'
-								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
+								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
+							>
 								Description
 							</th>
 
 							<th
 								scope='col'
-								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
+								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
+							>
 								Token
 							</th>
 							<th
 								scope='col'
-								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
+								className='w-min px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
+							>
 								Expiry
 							</th>
 
@@ -145,7 +149,8 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 
 							<th
 								scope='col'
-								className='w-min px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
+								className='w-min px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
+							>
 								Actions
 							</th>
 						</tr>
@@ -167,7 +172,8 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 											? 'bg-red-400'
 											: 'hover:bg-gray-50 dark:hover:bg-gray-500 dark:text-gray-50'
 									)}
-									style={{ borderColor: deletingMap[key._id] ? 'red' : '' }}>
+									style={{ borderColor: deletingMap[key._id] ? 'red' : '' }}
+								>
 									<td className={'px-6 py-4 whitespace-nowrap'} onClick={() => router.push(``)}>
 										<div className='text-sm text-gray-900 dark:text-white'>{key.name}</div>
 									</td>
@@ -178,7 +184,8 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 									</td>
 									<td
 										className='px-6 py-4 whitespace-nowrap'
-										onClick={() => handleCopyClick(key?.token)}>
+										onClick={() => handleCopyClick(key?.token)}
+									>
 										<div className='text-sm max-w-36 text-gray-900 dark:text-white truncate hover:text-blue-600 hover:underline cursor-pointer'>
 											{key?.token}
 										</div>
@@ -195,7 +202,8 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 												setRegeneratingKey(key);
 												setRegenerateOpen(true);
 											}}
-											className='text-gray-900 hover:text-gray-400'>
+											className='text-gray-900 hover:text-gray-400'
+										>
 											<ArrowPathIcon className='h-5 w-5' aria-hidden='true' />
 										</button>
 
@@ -208,7 +216,8 @@ export default function ApiKeyList({ keys, fetchKeys }: { keys: any[]; fetchKeys
 													setDeleteOpen(true);
 												}}
 												className='text-red-500 hover:text-red-700'
-												data-tooltip-target='delete-tooltip'>
+												data-tooltip-target='delete-tooltip'
+											>
 												<TrashIcon className='h-5 w-5' aria-hidden='true' />
 											</button>
 										</>
diff --git a/webapp/src/components/AvatarUploader.tsx b/webapp/src/components/AvatarUploader.tsx
index c304f83a0..3e4bb59c8 100644
--- a/webapp/src/components/AvatarUploader.tsx
+++ b/webapp/src/components/AvatarUploader.tsx
@@ -10,7 +10,13 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { toast } from 'react-toastify';
 
-export default function AvatarUploader({ callback, existingAvatar, isDialogOpen, setIsDialogOpen }) {  // add isOpen prop
+export default function AvatarUploader({
+	callback,
+	existingAvatar,
+	isDialogOpen,
+	setIsDialogOpen
+}) {
+	// add isOpen prop
 	const [files, setFiles] = useState([]);
 	const [uploading, setUploading] = useState(false);
 	const [error, setError] = useState(null);
@@ -115,8 +121,8 @@ export default function AvatarUploader({ callback, existingAvatar, isDialogOpen,
 					) : files?.length > 0 ? (
 						<img
 							src={files[0].preview}
-							className="h-full w-full object-cover"
-							alt="Avatar preview"
+							className='h-full w-full object-cover'
+							alt='Avatar preview'
 						/>
 					) : files?.length === 0 ? (
 						<CameraIcon className='h-full transition-all hover:stroke-gray-600 stroke-gray-400 w-8 inline-flex align-center justify-center' />
diff --git a/webapp/src/components/ChatAppForm.tsx b/webapp/src/components/ChatAppForm.tsx
index 7502d2264..5ff17621d 100644
--- a/webapp/src/components/ChatAppForm.tsx
+++ b/webapp/src/components/ChatAppForm.tsx
@@ -462,12 +462,16 @@ export default function ChatAppForm({
 						<div className='sm:col-span-12'>
 							<label
 								htmlFor='name'
-								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
-							>
+								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
 								Avatar
 							</label>
 							<div className='mt-2'>
-								<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+								<AvatarUploader
+									existingAvatar={icon}
+									callback={iconCallback}
+									isDialogOpen={modalOpen === 'avatar'}
+									setIsDialogOpen={setModalOpen}
+								/>
 							</div>
 						</div>
 					</div>
@@ -477,8 +481,7 @@ export default function ChatAppForm({
 							<div className='sm:col-span-12'>
 								<label
 									htmlFor='appName'
-									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
-								>
+									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
 									App Name
 								</label>
 								<input
@@ -498,8 +501,7 @@ export default function ChatAppForm({
 								<div className='w-full'>
 									<label
 										htmlFor='description'
-										className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
-									>
+										className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
 										App Description
 									</label>
 									<textarea
@@ -550,8 +552,7 @@ export default function ChatAppForm({
 							<div className='sm:col-span-'>
 								<label
 									htmlFor='maxMessages'
-									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
-								>
+									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
 									Max Messages
 								</label>
 								<input
@@ -589,8 +590,7 @@ export default function ChatAppForm({
 									<div className='sm:col-span-12'>
 										<label
 											htmlFor='agentName'
-											className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
-										>
+											className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
 											Agent Name
 										</label>
 										<input
@@ -610,16 +610,14 @@ export default function ChatAppForm({
 										<div className='space-y-px rounded-md shadow-sm w-full'>
 											<label
 												htmlFor='systemMessage'
-												className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400 mb-2'
-											>
+												className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400 mb-2'>
 												System Message
 											</label>
 
 											<div className='bg-white dark:bg-slate-800 relative rounded-md rounded-b-none px-0 ring-1 ring-outset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-indigo-600'>
 												<label
 													htmlFor='role'
-													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'
-												>
+													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'>
 													Role
 												</label>
 												<textarea
@@ -649,8 +647,7 @@ export default function ChatAppForm({
 											<div className='bg-white dark:bg-slate-800 relative rounded-none px-0 ring-1 ring-outset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-indigo-600'>
 												<label
 													htmlFor='goal'
-													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'
-												>
+													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'>
 													Goal
 												</label>
 												<textarea
@@ -679,8 +676,7 @@ export default function ChatAppForm({
 											<div className='bg-white dark:bg-slate-800 relative rounded-md rounded-t-none px-0 ring-1 ring-outset ring-gray-300 focus-within:z-10 focus-within:ring-2 focus-within:ring-indigo-600'>
 												<label
 													htmlFor='backstory'
-													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'
-												>
+													className='p-2 pb-0 block text-xs font-medium text-gray-900 dark:text-slate-400'>
 													Backstory
 												</label>
 												<textarea
@@ -749,21 +745,18 @@ export default function ChatAppForm({
 						onClick={e => {
 							e.preventDefault();
 							step > 0 ? setStep(0) : router.push(`/${resourceSlug}/apps`);
-						}}
-					>
+						}}>
 						<svg
 							className='h-4 w-4 mr-2'
 							fill='none'
 							stroke='currentColor'
 							viewBox='0 0 24 24'
-							xmlns='http://www.w3.org/2000/svg'
-						>
+							xmlns='http://www.w3.org/2000/svg'>
 							<path
 								strokeLinecap='round'
 								strokeLinejoin='round'
 								strokeWidth='2'
-								d='M15 19l-7-7 7-7'
-							></path>
+								d='M15 19l-7-7 7-7'></path>
 						</svg>
 						<span>Back</span>
 					</button>
@@ -776,15 +769,13 @@ export default function ChatAppForm({
 								}
 								setRun(false);
 							}}
-							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-						>
+							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
 							Save
 						</button>
 						<button
 							type='submit'
 							onClick={() => setRun(true)}
-							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 inline-flex items-center'
-						>
+							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 inline-flex items-center'>
 							<PlayIcon className='h-4 w-4 mr-2' />
 							Save and Run
 						</button>
diff --git a/webapp/src/components/ChatAppForm2.tsx b/webapp/src/components/ChatAppForm2.tsx
index 74e063639..1bd70ce35 100644
--- a/webapp/src/components/ChatAppForm2.tsx
+++ b/webapp/src/components/ChatAppForm2.tsx
@@ -294,10 +294,10 @@ export default function Apps({
 	const handleAgentUpdate = async (updatedAgent: Agent) => {
 		try {
 			setIsAgentUpdating(true);
-			
-			 // First fetch fresh data
+
+			// First fetch fresh data
 			await fetchFormData();
-			
+
 			// Then find the latest version of the agent from updated choices
 			const freshAgent = agentChoices.find(a => a._id === updatedAgent._id);
 			if (freshAgent) {
@@ -325,7 +325,7 @@ export default function Apps({
 
 	const refreshAgentData = async () => {
 		if (isAgentUpdating) return;
-		
+
 		try {
 			await fetchFormData();
 			if (selectedAgent?._id) {
@@ -355,7 +355,8 @@ export default function Apps({
 				<div className='flex border border-gray-200 rounded-lg'>
 					<form
 						className='flex flex-col justify-between border border-gray-200 rounded-l-lg w-full minh-[790px]'
-						onSubmit={appPost}>
+						onSubmit={appPost}
+					>
 						<article className='flex flex-col p-5 gap-6'>
 							<div className='flex items-center gap-3 h-24'>
 								<img className='rounded-3xl' src='/apps/identicon.png' />
@@ -387,7 +388,8 @@ export default function Apps({
 														setAppName('');
 													}
 												}}
-												className='hover:text-[#4F46E5] transition-colors'>
+												className='hover:text-[#4F46E5] transition-colors'
+											>
 												<Pencil width={20} />
 											</button>
 										</div>
@@ -463,7 +465,8 @@ export default function Apps({
 									<div key={starter.id} className='flex items-center gap-2'>
 										<div
 											className='bg-gray-50 px-4 py-3 w-full border border-gray-300 rounded-lg'
-											onClick={() => setEditingStarterId(starter.id)}>
+											onClick={() => setEditingStarterId(starter.id)}
+										>
 											{editingStarterId === starter.id ? (
 												<input
 													type='text'
@@ -500,7 +503,8 @@ export default function Apps({
 								))}
 								<p
 									className='text-[#4F46E5] cursor-pointer self-end hover:text-[#3730a3]'
-									onClick={handleAddStarter}>
+									onClick={handleAddStarter}
+								>
 									+ Add
 								</p>
 							</div>
@@ -534,7 +538,8 @@ export default function Apps({
 							<div className='sm:col-span-'>
 								<label
 									htmlFor='maxMessages'
-									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+								>
 									Max Messages
 								</label>
 								<input
@@ -554,13 +559,15 @@ export default function Apps({
 							<Button
 								type='button'
 								variant='ghost'
-								className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'>
+								className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'
+							>
 								Cancel
 							</Button>
 							<Button
 								onClick={() => setRun(false)}
 								variant='ghost'
-								className='ml-auto bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'>
+								className='ml-auto bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'
+							>
 								Save
 							</Button>
 							<Button
@@ -569,7 +576,8 @@ export default function Apps({
 									setRun(true);
 								}}
 								variant='ghost'
-								className='ml-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'>
+								className='ml-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'
+							>
 								Save & Launch
 							</Button>
 						</article>
diff --git a/webapp/src/components/CreateTeamModal.tsx b/webapp/src/components/CreateTeamModal.tsx
index 6955dec49..3b01f7313 100644
--- a/webapp/src/components/CreateTeamModal.tsx
+++ b/webapp/src/components/CreateTeamModal.tsx
@@ -17,8 +17,7 @@ export default function CreateTeamModal({ open, setOpen, callback }) {
 					enterTo='opacity-100'
 					leave='ease-in duration-200'
 					leaveFrom='opacity-100'
-					leaveTo='opacity-0'
-				>
+					leaveTo='opacity-0'>
 					<div className='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity' />
 				</TransitionChild>
 
@@ -31,20 +30,18 @@ export default function CreateTeamModal({ open, setOpen, callback }) {
 							enterTo='opacity-100 translate-y-0 sm:scale-100'
 							leave='ease-in duration-200'
 							leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-							leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-						>
+							leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'>
 							<DialogPanel className='relative transform rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:p-6 overflow-visible md:min-w-[400px] dark:bg-slate-800 dark:text-white'>
 								<div>
 									<div className=''>
 										<DialogTitle
 											as='h3'
-											className='mb-4 border-b pb-4 text-base font-semibold leading-6 text-gray-900 dark:text-white'
-										>
+											className='mb-4 border-b pb-4 text-base font-semibold leading-6 text-gray-900 dark:text-white'>
 											New Team
 										</DialogTitle>
 									</div>
 								</div>
-								<TeamForm compact={true} callback={callback} />
+								<TeamForm callback={callback} />
 							</DialogPanel>
 						</TransitionChild>
 					</div>
diff --git a/webapp/src/components/CrewAppForm.tsx b/webapp/src/components/CrewAppForm.tsx
index f7ae5de3a..1974f983c 100644
--- a/webapp/src/components/CrewAppForm.tsx
+++ b/webapp/src/components/CrewAppForm.tsx
@@ -370,7 +370,12 @@ export default function CrewAppForm({
 								Avatar
 							</label>
 							<div className='mt-2'>
-								<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+								<AvatarUploader
+									existingAvatar={icon}
+									callback={iconCallback}
+									isDialogOpen={modalOpen === 'avatar'}
+									setIsDialogOpen={setModalOpen}
+								/>
 							</div>
 						</div>
 					</div>
diff --git a/webapp/src/components/CrewAppForm2.tsx b/webapp/src/components/CrewAppForm2.tsx
index 46cbd4f30..091df0eca 100644
--- a/webapp/src/components/CrewAppForm2.tsx
+++ b/webapp/src/components/CrewAppForm2.tsx
@@ -397,7 +397,8 @@ export default function CrewAppForm({
 				<div className='flex border border-gray-200 rounded-lg'>
 					<form
 						className='flex flex-col justify-between border border-gray-200 rounded-l-lg w-full minh-[790px]'
-						onSubmit={appPost}>
+						onSubmit={appPost}
+					>
 						<article className='flex flex-col p-5 gap-6'>
 							<div className='flex items-center gap-3 h-24'>
 								<img className='rounded-3xl' src='/apps/identicon.png' />
@@ -429,7 +430,8 @@ export default function CrewAppForm({
 														setAppName('');
 													}
 												}}
-												className='hover:text-[#4F46E5] transition-colors'>
+												className='hover:text-[#4F46E5] transition-colors'
+											>
 												<Pencil width={20} />
 											</button>
 										</div>
@@ -521,14 +523,16 @@ export default function CrewAppForm({
 										setModalOpen('confirmOutsideOrg');
 									}
 									setRun(false);
-								}}>
+								}}
+							>
 								Save
 							</Button>
 							<Button
 								className='bg-indigo-500'
 								type='submit'
 								disabled={missingAgents?.length > 0}
-								onClick={() => setRun(true)}>
+								onClick={() => setRun(true)}
+							>
 								Save and Run
 							</Button>
 						</div>
diff --git a/webapp/src/components/InviteForm.tsx b/webapp/src/components/InviteForm.tsx
index 18be36d82..3253c1cdb 100644
--- a/webapp/src/components/InviteForm.tsx
+++ b/webapp/src/components/InviteForm.tsx
@@ -13,7 +13,7 @@ import Select from 'react-tailwindcss-select';
 import { toast } from 'react-toastify';
 import { SubscriptionPlan } from 'struct/billing';
 
-export default function InviteForm({ callback, setOpen }: { callback?: Function; setOpen: any; }) {
+export default function InviteForm({ callback, setOpen }: { callback?: Function; setOpen: any }) {
 	const [accountContext]: any = useAccountContext();
 	const { csrf, account } = accountContext as any;
 	const { stripePlan } = account?.stripe || {};
@@ -159,14 +159,14 @@ export default function InviteForm({ callback, setOpen }: { callback?: Function;
 
 					{error && <p className='text-sm text-red-600'>{error}</p>}
 
-					<div className="w-full flex justify-between">
+					<div className='w-full flex justify-between'>
 						<button
-						onClick={() => {
-							setName('');
-							setEmail('');
-							setSelectedRole(TeamRoleOptions[0].value);
-							setOpen(false);
-						  }}
+							onClick={() => {
+								setName('');
+								setEmail('');
+								setSelectedRole(TeamRoleOptions[0].value);
+								setOpen(false);
+							}}
 							className='rounded-md bg-transparent px-4 py-2 mt-2 border border-gray-300 backdrop-blur-sm text-sm font-semibold text-black'
 						>
 							Cancel
diff --git a/webapp/src/components/InviteFormModal.tsx b/webapp/src/components/InviteFormModal.tsx
index 15dfe9f3f..0f76e058f 100644
--- a/webapp/src/components/InviteFormModal.tsx
+++ b/webapp/src/components/InviteFormModal.tsx
@@ -35,34 +35,34 @@ export default function InviteFormModal({ open, setOpen, callback }) {
 				</Transition.Child>
 
 				<div className='fixed inset-0 flex items-center justify-center z-10 overflow-y-auto'>
-				{/* lg:ms-[144px] */}
-						<Transition.Child
-							as={Fragment}
-							enter='ease-out duration-300'
-							enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-							enterTo='opacity-100 translate-y-0 sm:scale-100'
-							leave='ease-in duration-200'
-							leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-							leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-						>
-							<Dialog.Panel className='absolute left-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:p-6 md:min-w-[400px] dark:bg-slate-800 dark:text-gray-50 w-full max-w-xl'>
-								<div>
-									<div className=''>
-										<Dialog.Title
-											as='h3'
-											className='mb-4 border-b pb-4 font-semibold text-xl leading-6 text-gray-900 dark:text-gray-50'
-										>
-											Invite Team Member
-										</Dialog.Title>
-									</div>
+					{/* lg:ms-[144px] */}
+					<Transition.Child
+						as={Fragment}
+						enter='ease-out duration-300'
+						enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+						enterTo='opacity-100 translate-y-0 sm:scale-100'
+						leave='ease-in duration-200'
+						leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+						leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+					>
+						<Dialog.Panel className='absolute left-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:p-6 md:min-w-[400px] dark:bg-slate-800 dark:text-gray-50 w-full max-w-xl'>
+							<div>
+								<div className=''>
+									<Dialog.Title
+										as='h3'
+										className='mb-4 border-b pb-4 font-semibold text-xl leading-6 text-gray-900 dark:text-gray-50'
+									>
+										Invite Team Member
+									</Dialog.Title>
 								</div>
-								<InviteForm
-									callback={callback}
-									setOpen={setOpen}
-									// fetchInviteFormData={fetchInviteFormData}
-								/>
-							</Dialog.Panel>
-						</Transition.Child>
+							</div>
+							<InviteForm
+								callback={callback}
+								setOpen={setOpen}
+								// fetchInviteFormData={fetchInviteFormData}
+							/>
+						</Dialog.Panel>
+					</Transition.Child>
 				</div>
 			</Dialog>
 		</Transition.Root>
diff --git a/webapp/src/components/Layout2.tsx b/webapp/src/components/Layout2.tsx
index 538c3b984..ec0e16807 100644
--- a/webapp/src/components/Layout2.tsx
+++ b/webapp/src/components/Layout2.tsx
@@ -77,7 +77,8 @@ const agentNavigation: any[] = [
 				height='24'
 				viewBox='0 0 24 24'
 				fill='none'
-				xmlns='http://www.w3.org/2000/svg'>
+				xmlns='http://www.w3.org/2000/svg'
+			>
 				<path
 					d='M22.125 11.85C21.7125 11.5875 21.225 11.7375 20.9625 12.1125L16.9875 18.4125C16.9125 18.4875 16.8375 18.6 16.8 18.7125C16.725 18.825 16.6875 18.9375 16.6875 19.05L15.375 22.5L18 19.8375C18.075 19.7625 18.15 19.6875 18.225 19.6125C18.3 19.5375 18.375 19.425 18.4125 19.3125L22.3875 13.0125C22.6125 12.6 22.5 12.075 22.125 11.85Z'
 					fill='currentColor'
@@ -254,7 +255,7 @@ export default withRouter(function Layout(props) {
 	const orgs = account?.orgs || [];
 	const scrollRef = useRef(null);
 
-	const calculateUntilDate = (dateCreated) => {
+	const calculateUntilDate = dateCreated => {
 		if (typeof window === 'undefined') return 'N/A'; // Return N/A on server-side
 		try {
 			if (!dateCreated) return 'N/A';
@@ -334,13 +335,15 @@ export default withRouter(function Layout(props) {
 										<li key={link.name} className='p-2.5 flex gap-2 items-center'>
 											<Link
 												className='flex items-center gap-2'
-												href={link.noResourceSlug ? link.path : `/${resourceSlug}${link.path}`}>
+												href={link.noResourceSlug ? link.path : `/${resourceSlug}${link.path}`}
+											>
 												{link.icon ? link.icon : <img width={15} src={link.imgPath} />}
 												<p
 													className={cn(
 														'cursor-pointer hover:text-gray-300',
 														path?.endsWith(link.path) ? 'text-gray-100' : 'text-gray-300'
-													)}>
+													)}
+												>
 													{link.name}
 												</p>
 											</Link>
@@ -354,13 +357,15 @@ export default withRouter(function Layout(props) {
 									<Link
 										key={item.id}
 										href={`/${resourceSlug}${item.href}`}
-										className='p-2.5 flex gap-2 items-center'>
+										className='p-2.5 flex gap-2 items-center'
+									>
 										{item.icon}
 										<p
 											className={cn(
 												'cursor-pointer hover:text-gray-300',
 												path?.endsWith(item.href) ? 'text-gray-100' : 'text-gray-300'
-											)}>
+											)}
+										>
 											{item.name}
 										</p>
 									</Link>
@@ -379,7 +384,8 @@ export default withRouter(function Layout(props) {
 											null,
 											router
 										);
-									}}>
+									}}
+								>
 									<LogOut width={15} />
 									<p>Logout</p>
 								</button>
@@ -414,12 +420,12 @@ export default withRouter(function Layout(props) {
 								Until {calculateUntilDate(account?.currentOrgDateCreated)}
 							</p>
 							<Progress value={account?.stripe?.stripeAddons?.storage} />
-								<p 
-									className='text-sm text-[#4f46e5] cursor-pointer font-bold' 
-									onClick={() => router.push('/billing')}
-								>
-									Upgrade your plan
-								</p>
+							<p
+								className='text-sm text-[#4f46e5] cursor-pointer font-bold'
+								onClick={() => router.push('/billing')}
+							>
+								Upgrade your plan
+							</p>
 						</div>
 						<TrialNag />
 					</SidebarFooter>
@@ -447,7 +453,8 @@ export default withRouter(function Layout(props) {
 										<span className='hidden lg:flex lg:items-center ps-2'>
 											<span
 												className='text-sm font-semibold leading-6 text-gray-900 dark:text-white'
-												aria-hidden='true'>
+												aria-hidden='true'
+											>
 												{account.name}
 											</span>
 											<ChevronDownIcon
@@ -463,7 +470,8 @@ export default withRouter(function Layout(props) {
 										enterTo='transform opacity-100 scale-100'
 										leave='transition ease-in duration-75'
 										leaveFrom='transform opacity-100 scale-100'
-										leaveTo='transform opacity-0 scale-95'>
+										leaveTo='transform opacity-0 scale-95'
+									>
 										<Menu.Items className='absolute right-0 z-10 mt-2.5 w-64 origin-top-right rounded-md bg-white dark:bg-slate-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none'>
 											{account && (
 												<div className='px-3 py-3 dark:text-white' key='accountdetails'>
@@ -495,7 +503,8 @@ export default withRouter(function Layout(props) {
 																			null,
 																			router
 																		);
-																	}}>
+																	}}
+																>
 																	Log out
 																</button>
 															);
@@ -510,7 +519,8 @@ export default withRouter(function Layout(props) {
 																		<Switch
 																			checked={developerMode}
 																			onChange={() => toggleDeveloperMode()}
-																			className='group relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-0 active:bg-transparent'>
+																			className='group relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-0 active:bg-transparent'
+																		>
 																			<span className='sr-only'>Use setting</span>
 																			<span
 																				aria-hidden='true'
@@ -541,17 +551,20 @@ export default withRouter(function Layout(props) {
 																	</p>
 																	<button
 																		className='w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-slate-700 dark:text-white'
-																		onClick={() => toggleTheme('light')}>
+																		onClick={() => toggleTheme('light')}
+																	>
 																		Light
 																	</button>
 																	<button
 																		className='w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-slate-700 dark:text-white'
-																		onClick={() => toggleTheme('dark')}>
+																		onClick={() => toggleTheme('dark')}
+																	>
 																		Dark
 																	</button>
 																	<button
 																		className='w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-slate-700 dark:text-white'
-																		onClick={() => toggleUseSystemTheme()}>
+																		onClick={() => toggleUseSystemTheme()}
+																	>
 																		System
 																	</button>
 
@@ -565,7 +578,8 @@ export default withRouter(function Layout(props) {
 																className={cn(
 																	active ? 'bg-gray-50 dark:bg-slate-700' : '',
 																	'block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-white'
-																)}>
+																)}
+															>
 																{item.name}
 															</a>
 														);
diff --git a/webapp/src/components/MemberList.tsx b/webapp/src/components/MemberList.tsx
index ad4ee7b13..4a6b2a235 100644
--- a/webapp/src/components/MemberList.tsx
+++ b/webapp/src/components/MemberList.tsx
@@ -10,135 +10,141 @@ import { useReducer } from 'react';
 import submittingReducer from 'utils/submittingreducer';
 
 export default function MemberList({
-    members,
-    permissions,
-    fetchTeam,
-    deleteCallback
+	members,
+	permissions,
+	fetchTeam,
+	deleteCallback
 }: {
-    members: any[];
-    permissions?: any;
-    fetchTeam?: any;
-    deleteCallback?: Function;
+	members: any[];
+	permissions?: any;
+	fetchTeam?: any;
+	deleteCallback?: Function;
 }) {
-    const [accountContext]: any = useAccountContext();
-    const { account, permissions: userPermissions } = accountContext as any;
-    const router = useRouter();
-    const isOrg = router.asPath.includes('/org');
-    const { resourceSlug } = router.query;
-    const [deleting, setDeleting] = useReducer(submittingReducer, {});
+	const [accountContext]: any = useAccountContext();
+	const { account, permissions: userPermissions } = accountContext as any;
+	const router = useRouter();
+	const isOrg = router.asPath.includes('/org');
+	const { resourceSlug } = router.query;
+	const [deleting, setDeleting] = useReducer(submittingReducer, {});
 
-    async function deleteMember(memberId) {
-        setDeleting({ [memberId]: true });
-        try {
-            await deleteCallback(memberId);
-        } finally {
-            setDeleting({ [memberId]: false });
-        }
-    }
+	async function deleteMember(memberId) {
+		setDeleting({ [memberId]: true });
+		try {
+			await deleteCallback(memberId);
+		} finally {
+			setDeleting({ [memberId]: false });
+		}
+	}
 
-    return (
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
-                <thead className="bg-gray-100 rounded-md dark:bg-slate-800">
-                    <tr>
-                        <th
-                            scope="col"
-                            className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300"
-                        >
-                            Name
-                        </th>
-						<th
-                            scope="col"
-                            className="px-6 pl-0 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300"
-                        >
-                            Status
-                        </th>
-                        <th
-                            scope="col"
-                            className="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300"
-                        >
-                            Role
-                        </th>
-						<th></th>
-                        <th
-                            scope="col"
-                            className="px-4 py-3 w-20 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300"
-                        >
-                            Action
-                        </th>
-                    </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 dark:bg-slate-800 dark:divide-slate-700">
-                    {members &&
-                        members.map((member) => {
-                            const isMe = member?._id?.toString() === account?._id?.toString();
-                            return (
-                                <tr
-                                    key={member._id}
-                                    className={classNames(
-                                        'hover:bg-gray-50 dark:hover:bg-slate-700',
-                                        isMe && 'font-semibold'
-                                    )}
-                                >
-                                    <td className="px-4 py-3 whitespace-nowrap">
-                                        <div className="text-md text-gray-900 dark:text-gray-300">{member.name}</div>
-                                        <DevBadge label="ID" value={member?._id} />
-										<div className="text-sm text-gray-500 dark:text-gray-300">{member.email}</div>
-                                    </td>
-                                    <td className="px-6 pl-0 py-3 whitespace-nowrap">
-                                        {member.emailVerified ? (
-                                            <div className="flex items-center space-x-1">
-											<div className="p2 border border-green-500 rounded-full">
-												<CheckIcon className="h-3 w-3 text-green-500" aria-hidden="true" />
-											</div> 
-											<span className="inline-block text-md">Verified</span>
+	return (
+		<table className='min-w-full divide-y divide-gray-200 dark:divide-slate-700'>
+			<thead className='bg-gray-100 rounded-md dark:bg-slate-800'>
+				<tr>
+					<th
+						scope='col'
+						className='px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300'
+					>
+						Name
+					</th>
+					<th
+						scope='col'
+						className='px-6 pl-0 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300'
+					>
+						Status
+					</th>
+					<th
+						scope='col'
+						className='px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300'
+					>
+						Role
+					</th>
+					<th></th>
+					<th
+						scope='col'
+						className='px-4 py-3 w-20 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300'
+					>
+						Action
+					</th>
+				</tr>
+			</thead>
+			<tbody className='divide-y divide-gray-200 dark:bg-slate-800 dark:divide-slate-700'>
+				{members &&
+					members.map(member => {
+						const isMe = member?._id?.toString() === account?._id?.toString();
+						return (
+							<tr
+								key={member._id}
+								className={classNames(
+									'hover:bg-gray-50 dark:hover:bg-slate-700',
+									isMe && 'font-semibold'
+								)}
+							>
+								<td className='px-4 py-3 whitespace-nowrap'>
+									<div className='text-md text-gray-900 dark:text-gray-300'>{member.name}</div>
+									<DevBadge label='ID' value={member?._id} />
+									<div className='text-sm text-gray-500 dark:text-gray-300'>{member.email}</div>
+								</td>
+								<td className='px-6 pl-0 py-3 whitespace-nowrap'>
+									{member.emailVerified ? (
+										<div className='flex items-center space-x-1'>
+											<div className='p2 border border-green-500 rounded-full'>
+												<CheckIcon className='h-3 w-3 text-green-500' aria-hidden='true' />
 											</div>
-                                        ) : (
-                                            <MinusIcon className="h-5 w-5 text-yellow-500" aria-hidden="true" />
-                                        )}
-                                    </td>
-									<td className="px-6 py-3 whitespace-nowrap">
-                                        {permissions && permissions[member._id.toString()] ? (
-                                            roleNameMap[permissions[member._id.toString()]]
-                                        ) : isOrg ? (
-                                            'Org Member'
-                                        ) : (
-                                            <MinusIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-                                        )}
-                                    </td>
-									<td className="px-20 py-3"></td>
-                                    <td className="px-6 py-5 whitespace-nowrap text-right text-sm font-medium flex justify-end space-x-1 items-center">
-                                        {userPermissions.get(
-                                            Permissions[isOrg ? 'EDIT_ORG_MEMBER' : 'EDIT_TEAM_MEMBER']
-                                        ) &&
-                                            !isMe && (
-                                                <a
-                                                    href={`/${resourceSlug}/${isOrg ? 'org' : 'team'}/${member._id}/edit`}
-                                                    className="p-1 border rounded-md border-gray-300 group"
-                                                >
-                                                    <PencilIcon className="h-4 w-4 text-gray-400 group-hover:text-gray-600 dark:text-gray-300 transition-all duration-100 ease" aria-hidden="true" />
-                                                </a>
-                                            )}
-                                        {userPermissions.get(
-                                            Permissions[isOrg ? 'REMOVE_ORG_MEMBER' : 'REMOVE_TEAM_MEMBER']
-                                        ) &&
-                                            !isMe && (
-                                                <button
-                                                    onClick={() => deleteMember(member._id)}
-                                                    className="p-1 border rounded-md border-gray-300 group"
-                                                    disabled={deleting[member._id]}
-                                                >
-                                                    {deleting[member._id] ? (
-                                                        <ButtonSpinner size={14} />
-                                                    ) : (
-                                                        <TrashIcon className="h-4 w-4 text-gray-400 group-hover:text-gray-600 dark:text-gray-300 transition-all duration-100 ease" aria-hidden="true" />
-                                                    )}
-                                                </button>
-                                            )}
-                                    </td>
-                                </tr>
-                            );
-                        })}
-                </tbody>
-            </table>
-    );
+											<span className='inline-block text-md'>Verified</span>
+										</div>
+									) : (
+										<MinusIcon className='h-5 w-5 text-yellow-500' aria-hidden='true' />
+									)}
+								</td>
+								<td className='px-6 py-3 whitespace-nowrap'>
+									{permissions && permissions[member._id.toString()] ? (
+										roleNameMap[permissions[member._id.toString()]]
+									) : isOrg ? (
+										'Org Member'
+									) : (
+										<MinusIcon className='h-5 w-5 text-gray-500' aria-hidden='true' />
+									)}
+								</td>
+								<td className='px-20 py-3'></td>
+								<td className='px-6 py-5 whitespace-nowrap text-right text-sm font-medium flex justify-end space-x-1 items-center'>
+									{userPermissions.get(
+										Permissions[isOrg ? 'EDIT_ORG_MEMBER' : 'EDIT_TEAM_MEMBER']
+									) &&
+										!isMe && (
+											<a
+												href={`/${resourceSlug}/${isOrg ? 'org' : 'team'}/${member._id}/edit`}
+												className='p-1 border rounded-md border-gray-300 group'
+											>
+												<PencilIcon
+													className='h-4 w-4 text-gray-400 group-hover:text-gray-600 dark:text-gray-300 transition-all duration-100 ease'
+													aria-hidden='true'
+												/>
+											</a>
+										)}
+									{userPermissions.get(
+										Permissions[isOrg ? 'REMOVE_ORG_MEMBER' : 'REMOVE_TEAM_MEMBER']
+									) &&
+										!isMe && (
+											<button
+												onClick={() => deleteMember(member._id)}
+												className='p-1 border rounded-md border-gray-300 group'
+												disabled={deleting[member._id]}
+											>
+												{deleting[member._id] ? (
+													<ButtonSpinner size={14} />
+												) : (
+													<TrashIcon
+														className='h-4 w-4 text-gray-400 group-hover:text-gray-600 dark:text-gray-300 transition-all duration-100 ease'
+														aria-hidden='true'
+													/>
+												)}
+											</button>
+										)}
+								</td>
+							</tr>
+						);
+					})}
+			</tbody>
+		</table>
+	);
 }
diff --git a/webapp/src/components/ModelForm.tsx b/webapp/src/components/ModelForm.tsx
index fca589feb..e2674ca85 100644
--- a/webapp/src/components/ModelForm.tsx
+++ b/webapp/src/components/ModelForm.tsx
@@ -115,7 +115,8 @@ export default function ModelForm({
 						<div>
 							<label
 								htmlFor='modelName'
-								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+							>
 								Name
 							</label>
 							<div className='mt-2'>
@@ -133,7 +134,8 @@ export default function ModelForm({
 						<div className='sm:col-span-12'>
 							<label
 								htmlFor='type'
-								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+							>
 								Vendor
 							</label>
 							<div className='mt-2'>
@@ -154,7 +156,8 @@ export default function ModelForm({
 											...oldModel,
 											type: newType
 										}));
-									}}>
+									}}
+								>
 									<option disabled value=''>
 										Select a type...
 									</option>
@@ -178,13 +181,15 @@ export default function ModelForm({
 					{!compact && (
 						<Link
 							className='text-sm font-semibold leading-6 text-gray-900'
-							href={`/${resourceSlug}/models`}>
+							href={`/${resourceSlug}/models`}
+						>
 							Back
 						</Link>
 					)}
 					<button
 						type='submit'
-						className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
+						className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+					>
 						Save
 					</button>
 				</div>
diff --git a/webapp/src/components/NewButtonSection.tsx b/webapp/src/components/NewButtonSection.tsx
index cb8022aaf..7d20264c4 100644
--- a/webapp/src/components/NewButtonSection.tsx
+++ b/webapp/src/components/NewButtonSection.tsx
@@ -17,7 +17,7 @@ export default function NewButtonSection({
 	buttonIcon: any;
 	buttonMessage: string;
 	disabled?: boolean;
-	setOpen: (open: boolean) => void;
+	setOpen?: (open: boolean) => void;
 	link?: string;
 }) {
 	return (
diff --git a/webapp/src/components/OrgSelector2.tsx b/webapp/src/components/OrgSelector2.tsx
index b3e56df8f..1b12a8481 100644
--- a/webapp/src/components/OrgSelector2.tsx
+++ b/webapp/src/components/OrgSelector2.tsx
@@ -93,7 +93,8 @@ export default function OrgSelector2({ orgs }) {
 				style={{
 					pointerEvents: isOpen ? 'auto' : 'none',
 					zIndex: isOpen ? 10 : -1
-				}}>
+				}}
+			>
 				{orgs
 					.filter(o => o?.teams?.length > 0)
 					.map((org, oi) => (
@@ -110,7 +111,8 @@ export default function OrgSelector2({ orgs }) {
 											resourceSlug === team.id ? 'bg-indigo-200' : ''
 										)}
 										key={`org_${oi}_team_${ti}`}
-										onClick={() => switchTeam(org.id, team.id)}>
+										onClick={() => switchTeam(org.id, team.id)}
+									>
 										{team.name}
 									</DropdownMenuItem>
 								))}
diff --git a/webapp/src/components/PageTitleWithNewButton.tsx b/webapp/src/components/PageTitleWithNewButton.tsx
index 48c9f7922..77ae1e6f4 100644
--- a/webapp/src/components/PageTitleWithNewButton.tsx
+++ b/webapp/src/components/PageTitleWithNewButton.tsx
@@ -13,7 +13,7 @@ export default function PageTitleWithNewButton({
 	showButton = true,
 	slug = true,
 	searchQuery,
-	setSearchQuery,
+	setSearchQuery
 }: {
 	onClick?: any;
 	list?: any[];
@@ -29,14 +29,17 @@ export default function PageTitleWithNewButton({
 	const [accountContext]: any = useAccountContext();
 	const { teamName, account, csrf } = accountContext as any;
 	const resourceSlug = router?.query?.resourceSlug || account?.currentTeam;
-	
+
 	const b = (
 		<button
 			onClick={onClick}
 			type='button'
 			className='inline-flex items-center rounded-md bg-gradient-to-r from-indigo-500 via-indigo-700 to-purple-800 px-4 py-2 h-full text-sm text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:bg-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed'
 		>
-			<PlusIcon className='-ml-0.5 mr-1.5 h-3 w-3 rounded-full border border-white' aria-hidden='true' />
+			<PlusIcon
+				className='-ml-0.5 mr-1.5 h-3 w-3 rounded-full border border-white'
+				aria-hidden='true'
+			/>
 			{buttonText}
 		</button>
 	);
@@ -49,7 +52,7 @@ export default function PageTitleWithNewButton({
 					<input
 						type='text'
 						value={searchQuery}
-						onChange={(e) => setSearchQuery(e.target.value)}
+						onChange={e => setSearchQuery(e.target.value)}
 						placeholder='Search Member'
 						className='pt-[0.40rem] pl-9 border rounded-md h-full w-[200px]'
 					/>
@@ -57,7 +60,9 @@ export default function PageTitleWithNewButton({
 				{showButton && (
 					<>
 						{slug && (
-							<>{buttonText ? href ? <Link href={`/${resourceSlug}${href}`}>{b}</Link> : b : null}</>
+							<>
+								{buttonText ? href ? <Link href={`/${resourceSlug}${href}`}>{b}</Link> : b : null}
+							</>
 						)}
 						{!slug && <>{buttonText ? href ? <Link href={`/${href}`}>{b}</Link> : b : null}</>}
 					</>
diff --git a/webapp/src/components/ParameterForm.tsx b/webapp/src/components/ParameterForm.tsx
index fc8d6a000..cb2c738b5 100644
--- a/webapp/src/components/ParameterForm.tsx
+++ b/webapp/src/components/ParameterForm.tsx
@@ -58,7 +58,8 @@ export default function ParameterForm({
 							disabled={readonlyKeys}
 							value={param.type}
 							onChange={e => updateParameter(index, 'type', e.target.value)}
-							className='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'>
+							className='rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+						>
 							<option value=''>Select Type</option>
 							<option value='string'>String</option>
 							<option value='integer'>Number</option>
@@ -95,7 +96,8 @@ export default function ParameterForm({
 							<button
 								type='button'
 								onClick={() => removeParameter(index)}
-								className='text-red-500 hover:text-red-700'>
+								className='text-red-500 hover:text-red-700'
+							>
 								<TrashIcon className='h-5' />
 							</button>
 						)}
@@ -107,7 +109,8 @@ export default function ParameterForm({
 					<button
 						type='button'
 						onClick={addParameter}
-						className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
+						className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+					>
 						{addButtonText}
 					</button>
 				</div>
diff --git a/webapp/src/components/PermissionsEditor.tsx b/webapp/src/components/PermissionsEditor.tsx
index 62566c148..0ebeaf463 100644
--- a/webapp/src/components/PermissionsEditor.tsx
+++ b/webapp/src/components/PermissionsEditor.tsx
@@ -25,7 +25,13 @@ const isPermissionAllowed = (currentPermission, permissionKey) => {
 	return currentPermission && currentPermission.get(metadata.parent);
 };
 
-function PermissionsEditor({ editingPermission, filterBits, memberName, memberEmail, initialRole }) {
+function PermissionsEditor({
+	editingPermission,
+	filterBits,
+	memberName,
+	memberEmail,
+	initialRole
+}) {
 	const [accountContext]: any = useAccountContext();
 	const { account, csrf, permissions: currentPermission } = accountContext as any;
 	const router = useRouter();
@@ -86,7 +92,7 @@ function PermissionsEditor({ editingPermission, filterBits, memberName, memberEm
 	async function handleRoleChange(e) {
 		const newRole = e.target.value;
 		setSelectedRole(newRole);
-		
+
 		const rolePermissions = Roles[newRole];
 		if (rolePermissions) {
 			const body = new FormData();
@@ -116,10 +122,10 @@ function PermissionsEditor({ editingPermission, filterBits, memberName, memberEm
 				text='Custom permissions are only availalbe on the Enterprise plan'
 				enterprise={true}
 			/>
-			<div className="flex items-center space-x-6 h-20">
-				<div className="flex flex-col justify-center h-full">
-					<span className="text-2xl font-medium text-gray-800 dark:text-white">{memberName}</span>
-					<span className="text-sm font-medium text-gray-600 dark:text-white">{memberEmail}</span>
+			<div className='flex items-center space-x-6 h-20'>
+				<div className='flex flex-col justify-center h-full'>
+					<span className='text-2xl font-medium text-gray-800 dark:text-white'>{memberName}</span>
+					<span className='text-sm font-medium text-gray-600 dark:text-white'>{memberEmail}</span>
 				</div>
 				<form onSubmit={permissionsPost} className='flex items-center h-full'>
 					<select
@@ -136,61 +142,56 @@ function PermissionsEditor({ editingPermission, filterBits, memberName, memberEm
 					</select>
 				</form>
 			</div>
-					<div className='md:grid md:grid-cols-3 gap-4 dark:text-white'>
-						{Object.entries(Metadata)
-							.filter(e => !filterBits || filterBits.includes(parseInt(e[0])))
-							.map(([key, { title, label, desc, heading }], index) => {
-								const isEnabled = isPermissionAllowed(currentPermission, key);
-								return (
-									<>
-										{heading && <h2 className='font-semibold mt-4 col-span-3'>{heading}</h2>}
-										<div
-											key={`perm_${title}_${key}`}
-											className={classNames(
-												heading && index % 3 === 0 && 'col-span-3',
-												'py-4 border-b px-2'
-											)}
-										>
-											<label className="flex items-start space-x-2">
-												<input
-													className={`mt-1 mr-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 ${!isEnabled ? 'cursor-not-allowed' : ''}`}
-													type='checkbox'
-													disabled={!isEnabled}
-													name={`permission_bit_${key}`}
-													value='true'
-													checked={editingPermissionState.get(parseInt(key))}
-													onChange={e => {
-														if (!isEnterprise) {
-															return setModalOpen(true);
-														}
-														editingPermissionState.set(
-															parseInt(key),
-															e.target.checked ? true : false
-														);
-														_updateState(Date.now());
-													}}
-												/>
-												<div className="flex-1">
-													<strong>{title}</strong>
-													<span className="block text-sm text-gray-600 dark:text-gray-300">
-														{desc}
-													</span>
-												</div>
-											</label>
+			<div className='md:grid md:grid-cols-3 gap-4 dark:text-white'>
+				{Object.entries(Metadata)
+					.filter(e => !filterBits || filterBits.includes(parseInt(e[0])))
+					.map(([key, { title, label, desc, heading }], index) => {
+						const isEnabled = isPermissionAllowed(currentPermission, key);
+						return (
+							<>
+								{heading && <h2 className='font-semibold mt-4 col-span-3'>{heading}</h2>}
+								<div
+									key={`perm_${title}_${key}`}
+									className={classNames(
+										heading && index % 3 === 0 && 'col-span-3',
+										'py-4 border-b px-2'
+									)}
+								>
+									<label className='flex items-start space-x-2'>
+										<input
+											className={`mt-1 mr-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 ${!isEnabled ? 'cursor-not-allowed' : ''}`}
+											type='checkbox'
+											disabled={!isEnabled}
+											name={`permission_bit_${key}`}
+											value='true'
+											checked={editingPermissionState.get(parseInt(key))}
+											onChange={e => {
+												if (!isEnterprise) {
+													return setModalOpen(true);
+												}
+												editingPermissionState.set(parseInt(key), e.target.checked ? true : false);
+												_updateState(Date.now());
+											}}
+										/>
+										<div className='flex-1'>
+											<strong>{title}</strong>
+											<span className='block text-sm text-gray-600 dark:text-gray-300'>{desc}</span>
 										</div>
-									</>
-								);
-							})}
-					</div>
-					{isEnterprise && (
-						<button
-							type='submit'
-							value='submit'
-							className='mt-4 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-						>
-							Submit
-						</button>
-					)}
+									</label>
+								</div>
+							</>
+						);
+					})}
+			</div>
+			{isEnterprise && (
+				<button
+					type='submit'
+					value='submit'
+					className='mt-4 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+				>
+					Submit
+				</button>
+			)}
 		</>
 	);
 }
diff --git a/webapp/src/components/TaskFlow.tsx b/webapp/src/components/TaskFlow.tsx
index 2c7425232..0c348de37 100644
--- a/webapp/src/components/TaskFlow.tsx
+++ b/webapp/src/components/TaskFlow.tsx
@@ -135,26 +135,30 @@ export default function TaskFlow({
 					<div
 						key={rowIndex}
 						className='flex items-center'
-						style={{ height: '80px', alignItems: 'center' }}>
+						style={{ height: '80px', alignItems: 'center' }}
+					>
 						{row.map((item, itemIndex) =>
 							item.type === 'start' ? (
 								<div
 									key={itemIndex}
-									className='ml-4 flex items-center justify-center w-20 h-12 bg-indigo-50 text-indigo-500	 rounded-full text-sm'>
+									className='ml-4 flex items-center justify-center w-20 h-12 bg-indigo-50 text-indigo-500	 rounded-full text-sm'
+								>
 									Start
 								</div>
 							) : item.type === 'line' ? (
 								<div
 									key={itemIndex}
 									className='h-0 border-t-2 border-dashed'
-									style={{ width: `${item.width}px` }}></div>
+									style={{ width: `${item.width}px` }}
+								></div>
 							) : item.type === 'fill' ? (
 								rowIndex < rows.length - 1 || !createTaskFits ? (
 									// Only add filler lines for non-last rows or when combo box doesn't fit
 									<div
 										key={itemIndex}
 										className='border-t-2 border-dashed'
-										style={{ flexGrow: 1, width: `${item.width}px` }}></div>
+										style={{ flexGrow: 1, width: `${item.width}px` }}
+									></div>
 								) : null
 							) : item.type === 'comboBox' ? (
 								<DropdownMenu>
@@ -172,7 +176,8 @@ export default function TaskFlow({
 												onClick={e => {
 													e.preventDefault();
 													handleAddTask(task);
-												}}>
+												}}
+											>
 												{task.name}
 											</DropdownMenuItem>
 										))}
@@ -186,7 +191,8 @@ export default function TaskFlow({
 										display: 'flex',
 										alignItems: 'center',
 										width: `${item.width}px`
-									}}>
+									}}
+								>
 									<span className='text-xs absolute -left-3 rounded-full bg-white px-2 py-1 botder border-gray-200'>
 										{item.number}
 									</span>
@@ -195,7 +201,8 @@ export default function TaskFlow({
 									</span>
 									<button
 										onClick={e => handleDeleteTask(e, item.task.value)}
-										className='text-gray-500 hover:text-red-500 transition-colors'>
+										className='text-gray-500 hover:text-red-500 transition-colors'
+									>
 										<Trash2Icon className='w-4 h-4' />
 									</button>
 								</div>
@@ -210,7 +217,8 @@ export default function TaskFlow({
 						setModalOpen('task');
 					}}
 					className='ml-2 w-[180px]'
-					variant='outline'>
+					variant='outline'
+				>
 					Create New Task
 				</Button>
 			</div>
diff --git a/webapp/src/components/TaskForm.tsx b/webapp/src/components/TaskForm.tsx
index 37928fff4..0917d1454 100644
--- a/webapp/src/components/TaskForm.tsx
+++ b/webapp/src/components/TaskForm.tsx
@@ -416,7 +416,8 @@ export default function TaskForm({
 						<div className='col-span-full'>
 							<label
 								htmlFor='task_name'
-								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+							>
 								Name<span className='text-red-700'> *</span>
 							</label>
 							<Input
@@ -432,7 +433,8 @@ export default function TaskForm({
 						<div className='col-span-full'>
 							<label
 								htmlFor='task_description'
-								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+								className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+							>
 								Task Description<span className='text-red-700'> *</span>
 							</label>
 							<Textarea
@@ -463,7 +465,8 @@ export default function TaskForm({
 							<div className='flex w-full mb-2 items-center'>
 								<label
 									htmlFor='expectedOutput'
-									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+								>
 									Expected Output<span className='text-red-700'> *</span>
 								</label>
 
@@ -473,7 +476,8 @@ export default function TaskForm({
 								<Switch
 									checked={isStructuredOutput}
 									onChange={setIsStructuredOutput}
-									className='group inline-flex h-5 w-11 items-center rounded-full bg-gray-400 transition data-[checked]:bg-blue-600'>
+									className='group inline-flex h-5 w-11 items-center rounded-full bg-gray-400 transition data-[checked]:bg-blue-600'
+								>
 									<span className='size-3 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
 								</Switch>
 							</div>
@@ -499,7 +503,8 @@ export default function TaskForm({
 										className='text-sm text-blue-500 dark:text-blue-400 underline'
 										href='https://docs.agentcloud.dev/documentation/guides/structure-output'
 										target='_blank'
-										rel='noreferrer'>
+										rel='noreferrer'
+									>
 										Instructions on how to create a schema for structure output
 									</a>
 								</>
@@ -594,7 +599,8 @@ export default function TaskForm({
 											};
 										});
 									}
-								}}>
+								}}
+							>
 								<SelectTrigger className='bg-white mt-4'>
 									<SelectValue
 										placeholder={
@@ -624,7 +630,8 @@ export default function TaskForm({
 								<InfoAlert
 									textColor='black'
 									className='col-span-full bg-yellow-100 text-yellow-900 p-4 text-sm rounded-md mt-3'
-									message='Agent Tool Conflict Warning'>
+									message='Agent Tool Conflict Warning'
+								>
 									We noticed you have added an agent with a tool associated to them. Please note,
 									since the tools are associated to the agents, they can be used on any task where
 									the agent is working. If you would like a more deterministic approach, please only
@@ -687,7 +694,8 @@ export default function TaskForm({
 									} else {
 										setFormFields(null);
 									}
-								}}>
+								}}
+							>
 								<SelectTrigger className='bg-white mt-2'>
 									<SelectValue placeholder='Select a human input type' />
 								</SelectTrigger>
@@ -716,7 +724,8 @@ export default function TaskForm({
 							<div className='p-6 bg-gray-100 rounded-md text-sm col-span-full '>
 								<label
 									htmlFor='requiresHumanInput'
-									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+									className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+								>
 									Assign Task Output to Variable
 								</label>
 
@@ -740,7 +749,8 @@ export default function TaskForm({
 															taskOutputVariableName: value
 														};
 													});
-												}}>
+												}}
+											>
 												<SelectTrigger className='bg-white'>
 													<SelectValue placeholder='Select a variable' />
 												</SelectTrigger>
@@ -768,12 +778,14 @@ export default function TaskForm({
 							<ToolTip
 								content='Hides intermediate thought messages from agents and only display the final task output.'
 								placement='top-start'
-								arrow={false}>
+								arrow={false}
+							>
 								<div className='mt-2'>
 									<div className='sm:col-span-12'>
 										<label
 											htmlFor='displayOnlyFinalOutput'
-											className='select-none flex items-center text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+											className='select-none flex items-center text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+										>
 											<input
 												type='checkbox'
 												id='displayOnlyFinalOutput'
@@ -804,12 +816,14 @@ export default function TaskForm({
 							<ToolTip
 								content='Stores the task output in a file that can be downloaded by the user after the task is completed.'
 								placement='top-start'
-								arrow={false}>
+								arrow={false}
+							>
 								<div className='mt-2'>
 									<div className='sm:col-span-12'>
 										<label
 											htmlFor='storeTaskOutput'
-											className='select-none flex items-center text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+											className='select-none flex items-center text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+										>
 											<input
 												type='checkbox'
 												id='storeTaskOutput'
@@ -839,7 +853,8 @@ export default function TaskForm({
 								<div className='mt-2'>
 									<label
 										htmlFor='name'
-										className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+										className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+									>
 										Task Output File Name<span className='text-red-700'> *</span>
 									</label>
 									<input
@@ -889,7 +904,8 @@ export default function TaskForm({
 					{!compact && <Link href={`/${resourceSlug}/tasks`}>Back</Link>}
 					<button
 						type='submit'
-						className={`rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${compact ? 'w-full' : ''}`}>
+						className={`rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${compact ? 'w-full' : ''}`}
+					>
 						Save
 					</button>
 				</div>
diff --git a/webapp/src/components/TeamSettingsForm.tsx b/webapp/src/components/TeamSettingsForm.tsx
index 38c496c0a..2075c594d 100644
--- a/webapp/src/components/TeamSettingsForm.tsx
+++ b/webapp/src/components/TeamSettingsForm.tsx
@@ -7,10 +7,16 @@ import cn from 'utils/cn';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 import { toast } from 'react-toastify';
-import { FiEdit } from 'react-icons/fi';  // Pencil icon from react-icons
+import { FiEdit } from 'react-icons/fi'; // Pencil icon from react-icons
 import { FaCircle } from 'react-icons/fa';
 
-export default function TeamSettingsForm({ callback, memberCount }: { callback?: Function; memberCount: number }) {
+export default function TeamSettingsForm({
+	callback,
+	memberCount
+}: {
+	callback?: Function;
+	memberCount: number;
+}) {
 	const [accountContext]: any = useAccountContext();
 	const { csrf, account, teamName } = accountContext as any;
 	const router = useRouter();
@@ -19,9 +25,7 @@ export default function TeamSettingsForm({ callback, memberCount }: { callback?:
 	const [saving, setSaving] = useState(false);
 	const [isEditing, setIsEditing] = useState(false);
 
-
-
-	async function handleSubmit(e : any) {
+	async function handleSubmit(e: any) {
 		setSaving(true);
 		e.preventDefault();
 
@@ -54,10 +58,10 @@ export default function TeamSettingsForm({ callback, memberCount }: { callback?:
 		<div>
 			{/* If not editing, show team name with pencil icon */}
 			{!isEditing ? (
-				<div className="flex items-center space-x-2">
-					<span className="text-2xl font-medium text-gray-800 dark:text-white">{name}</span>
-					<div onClick={() => setIsEditing(true)} className="cursor-pointer">
-						<FiEdit className="text-md text-gray-400 hover:text-indigo-600" />
+				<div className='flex items-center space-x-2'>
+					<span className='text-2xl font-medium text-gray-800 dark:text-white'>{name}</span>
+					<div onClick={() => setIsEditing(true)} className='cursor-pointer'>
+						<FiEdit className='text-md text-gray-400 hover:text-indigo-600' />
 					</div>
 				</div>
 			) : (
@@ -99,7 +103,11 @@ export default function TeamSettingsForm({ callback, memberCount }: { callback?:
 					</div>
 				</form>
 			)}
-			<span className="text-gray-500 text-sm">Team<FaCircle className="inline-block h-1 w-2 mx-[0.20rem]" />{memberCount} Members</span>
+			<span className='text-gray-500 text-sm'>
+				Team
+				<FaCircle className='inline-block h-1 w-2 mx-[0.20rem]' />
+				{memberCount} Members
+			</span>
 		</div>
 	);
 }
diff --git a/webapp/src/components/ToolList2.tsx b/webapp/src/components/ToolList2.tsx
index a81e9775f..d8852793e 100644
--- a/webapp/src/components/ToolList2.tsx
+++ b/webapp/src/components/ToolList2.tsx
@@ -76,14 +76,16 @@ export default function ToolList2({ tools, fetchTools }: { tools: Tool[]; fetchT
 							className='w-fit text-gray-500 bg-transparent'
 							variant='underline'
 							value='my-tools'
-							onClick={() => setActiveTab('my-tools')}>
+							onClick={() => setActiveTab('my-tools')}
+						>
 							My Tools
 						</TabsTrigger>
 						<TabsTrigger
 							className='w-fit text-gray-500 bg-transparent'
 							variant='underline'
 							value='tool-library'
-							onClick={() => setActiveTab('tool-library')}>
+							onClick={() => setActiveTab('tool-library')}
+						>
 							Tool Library
 						</TabsTrigger>
 					</TabsList>
diff --git a/webapp/src/components/agents/NewAgentSheet.tsx b/webapp/src/components/agents/NewAgentSheet.tsx
index 9a879b302..934533c06 100644
--- a/webapp/src/components/agents/NewAgentSheet.tsx
+++ b/webapp/src/components/agents/NewAgentSheet.tsx
@@ -9,7 +9,7 @@ import { useAccountContext } from 'context/account';
 import { AgentDataReturnType, AgentsDataReturnType } from 'controllers/agent';
 import useAutocompleteDropdown from 'hooks/useAutoCompleteDropdown';
 import { BookText, ChevronDown, CircleUserRound, Cpu, Database } from 'lucide-react';
-import { MultiSelectWithDialog } from 'modules/components/multi-select-dialog';
+import { MultiSelect } from 'modules/components/multi-select';
 import { Button } from 'modules/components/ui/button';
 import {
 	DropdownMenu,
@@ -33,17 +33,16 @@ import posthog from 'posthog-js';
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
+import { Agent } from 'struct/agent';
 import { ModelEmbeddingLength, ModelType } from 'struct/model';
 import { ToolType } from 'struct/tool';
 
-import { ToolsDialogContent } from './ToolsDialogContent';
-import { Dialog, DialogContent } from 'modules/components/ui/dialog';
-import { MultiSelect } from 'modules/components/multi-select';
+// import { ToolsDialogContent } from './ToolsDialogContent';
 // import { MultiSelectComboBox } from '../MultiSelectComboBox/multi-select-combobox';
 
 export const NewAgentSheet = ({
 	selectedAgentTools,
-	selectedAgent,  // Add selectedAgent to props
+	selectedAgent, // Add selectedAgent to props
 	setAgentDisplay,
 	openEditSheet,
 	setOpenEditSheet,
@@ -52,7 +51,7 @@ export const NewAgentSheet = ({
 	callback
 }: {
 	selectedAgentTools?: any;
-	selectedAgent?: Agent;  // Add type
+	selectedAgent?: Agent; // Add type
 	setAgentDisplay?: (agent: AgentDataReturnType['agent']) => void;
 	openEditSheet: boolean;
 	setOpenEditSheet: (open: boolean) => void;
@@ -151,22 +150,22 @@ export const NewAgentSheet = ({
 		const foundTool = tools.find(t => t._id === tid);
 		if (!foundTool) {
 			return acc;
-			}
-			
-			// Format tool value correctly as an object with label and value
-			const toolVal = { 
-				label: foundTool.name, 
-				value: foundTool._id.toString() // Ensure value is string
-			};
-			
-			if ((foundTool?.type as ToolType) !== ToolType.RAG_TOOL) {
-				acc.initialTools.push(toolVal);
-			} else {
-				acc.initialDatasources.push(toolVal);
-			}
-			return acc;
+		}
+
+		// Format tool value correctly as an object with label and value
+		const toolVal = {
+			label: foundTool.name,
+			value: foundTool._id.toString() // Ensure value is string
 		};
 
+		if ((foundTool?.type as ToolType) !== ToolType.RAG_TOOL) {
+			acc.initialTools.push(toolVal);
+		} else {
+			acc.initialDatasources.push(toolVal);
+		}
+		return acc;
+	};
+
 	useEffect(() => {
 		setAgent(cloneState?.agent);
 		setIcon(cloneState?.agent?.icon);
@@ -252,7 +251,8 @@ export const NewAgentSheet = ({
 
 			// Set initial tools and datasources from selectedAgentTools
 			if (selectedAgentTools) {
-				const { initialTools, initialDatasources } = selectedAgentTools.reduce((acc, tool) => {
+				const { initialTools, initialDatasources } = selectedAgentTools.reduce(
+					(acc, tool) => {
 						const toolValue = tool._id;
 						if (tool.type !== ToolType.RAG_TOOL) {
 							acc.initialTools.push(toolValue);
@@ -286,9 +286,14 @@ export const NewAgentSheet = ({
 			backstory: e.target.backstory.value,
 			toolIds: [...(toolState || []), ...(datasourceState || [])],
 			iconId: icon?.id,
-			variableIds: Array.from(
-				new Set([...roleSelectedVariables, ...goalSelectedVariables, ...backstorySelectedVariables])
-			) || [],
+			variableIds:
+				Array.from(
+					new Set([
+						...roleSelectedVariables,
+						...goalSelectedVariables,
+						...backstorySelectedVariables
+					])
+				) || [],
 			cloning: cloneState?.agent && editing
 		};
 
@@ -299,7 +304,7 @@ export const NewAgentSheet = ({
 				() => {
 					toast.success('Agent Updated');
 					setOpenEditSheet(false);
-					callback && callback(agentState._id, body);
+					callback && callback(agentState._id.toString(), body);
 				},
 				res => {
 					toast.error(res);
@@ -557,7 +562,12 @@ export const NewAgentSheet = ({
 
 								</div> */}
 
-									<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+									<AvatarUploader
+										existingAvatar={icon}
+										callback={iconCallback}
+										isDialogOpen={modalOpen === 'avatar'}
+										setIsDialogOpen={setModalOpen}
+									/>
 									<div className='flex flex-col gap-2 justify-center'>
 										<p className='bg-gray-100 text-gray-500 rounded-sm p-2 text-sm'>
 											Leave blank to auto-generate a profile photo based on the name.
@@ -609,21 +619,24 @@ export const NewAgentSheet = ({
 									<div className='flex gap-2 items-center text-xs'>
 										<p>Suggestions:</p>
 										<div className='flex items-center gap-2'>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('Technical Support')}>
-											Technical Support
-										</p>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('Code Helper')}>
-											Code Helper
-										</p>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('API Integrator')}>
-											API Integrator
-										</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('Technical Support')}
+											>
+												Technical Support
+											</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('Code Helper')}
+											>
+												Code Helper
+											</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('API Integrator')}
+											>
+												API Integrator
+											</p>
 										</div>
 									</div>
 								</div>
@@ -701,7 +714,8 @@ export const NewAgentSheet = ({
 															...oldAgent,
 															modelId: model._id
 														}))
-													}>
+													}
+												>
 													{model.name}
 												</DropdownMenuItem>
 											))}
@@ -803,12 +817,14 @@ export const NewAgentSheet = ({
 							<section className='border-t border-gray-200 pt-4 flex justify-between sticky bottom-0 bg-white text-sm'>
 								<Button
 									onClick={() => setOpenEditSheet(false)}
-									className='text-foreground hover:bg-transparent hover:text-foreground p-0 border border-gray-200 py-2.5 px-5 bg-white'>
+									className='text-foreground hover:bg-transparent hover:text-foreground p-0 border border-gray-200 py-2.5 px-5 bg-white'
+								>
 									Cancel
 								</Button>
 								<Button
 									type='submit'
-									className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2'>
+									className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2'
+								>
 									Save
 								</Button>
 							</section>
diff --git a/webapp/src/components/apikeys/ApiKeyForm.tsx b/webapp/src/components/apikeys/ApiKeyForm.tsx
index 5bc2f1ede..41d269d9f 100644
--- a/webapp/src/components/apikeys/ApiKeyForm.tsx
+++ b/webapp/src/components/apikeys/ApiKeyForm.tsx
@@ -89,7 +89,8 @@ export default function ApiKeyForm({ callback }: { callback: () => void }) {
 					onSubmit={handleSubmit(onSubmit)}
 					action='/forms/account/apikey/add'
 					method='POST'
-					className='space-y-4'>
+					className='space-y-4'
+				>
 					<div className='w-full'>
 						<InputField<ApiKeyFormValues>
 							name='name'
@@ -169,7 +170,8 @@ export default function ApiKeyForm({ callback }: { callback: () => void }) {
 						</Link>
 						<button
 							type='submit'
-							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
+							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+						>
 							Submit
 						</button>
 					</div>
diff --git a/webapp/src/components/apps/AgentCreatedDisplay.tsx b/webapp/src/components/apps/AgentCreatedDisplay.tsx
index d16448d2e..f6456380c 100644
--- a/webapp/src/components/apps/AgentCreatedDisplay.tsx
+++ b/webapp/src/components/apps/AgentCreatedDisplay.tsx
@@ -14,183 +14,188 @@ import { Tool, ToolType } from 'struct/tool';
 import { CreateAgentSheet } from './CreateAgentSheet';
 
 // Add memo to prevent unnecessary re-renders
-export const AgentCreatedDisplay = React.memo(({
-	setSelectedAgent,
-	openEditSheet,
-	setOpenEditSheet,
-	selectedAgent,
-	selectedAgentModel,
-	selectedAgentTools,
-	onAgentUpdate,
-	isUpdating,
-	onChangeAgent // Add this prop
-}: {
-	setSelectedAgent: (agent: Agent) => void;
-	openEditSheet: boolean;
-	setOpenEditSheet: React.Dispatch<React.SetStateAction<boolean>>;
-	selectedAgent: Agent;
-	selectedAgentModel: Model;
-	selectedAgentTools: Tool[];
-	onAgentUpdate?: () => Promise<void>;
-	isUpdating?: boolean;
-	onChangeAgent: () => void; // Add this prop type
-}) => {
-	const [isExpanded, setIsExpanded] = useState(true);
+export const AgentCreatedDisplay = React.memo(
+	({
+		setSelectedAgent,
+		openEditSheet,
+		setOpenEditSheet,
+		selectedAgent,
+		selectedAgentModel,
+		selectedAgentTools,
+		onAgentUpdate,
+		isUpdating,
+		onChangeAgent // Add this prop
+	}: {
+		setSelectedAgent: (agent: Agent) => void;
+		openEditSheet: boolean;
+		setOpenEditSheet: React.Dispatch<React.SetStateAction<boolean>>;
+		selectedAgent: Agent;
+		selectedAgentModel: Model;
+		selectedAgentTools: Tool[];
+		onAgentUpdate?: () => Promise<void>;
+		isUpdating?: boolean;
+		onChangeAgent: () => void; // Add this prop type
+	}) => {
+		const [isExpanded, setIsExpanded] = useState(true);
 
-	// Handle agent updates through parent's fetch function
-	const handleAgentEdit = async (agentId, body) => {
-		if (isUpdating) return;
+		// Handle agent updates through parent's fetch function
+		const handleAgentEdit = async (agentId, body) => {
+			if (isUpdating) return;
 
-		try {
-			// Trigger parent's fetch function first to get fresh data
-			if (onAgentUpdate) {
-				await onAgentUpdate();
-			}
+			try {
+				// Trigger parent's fetch function first to get fresh data
+				if (onAgentUpdate) {
+					await onAgentUpdate();
+				}
 
-			// Let parent component handle the agent update through its own state management
-			setOpenEditSheet(false);
-		} catch (error) {
-			console.error('Error updating agent:', error);
-		}
-	};
+				// Let parent component handle the agent update through its own state management
+				setOpenEditSheet(false);
+			} catch (error) {
+				console.error('Error updating agent:', error);
+			}
+		};
 
-	// Memoize tools and datasources based on both selectedAgentTools and localAgent
-	const { datasources, tools } = useMemo(() => ({
-		datasources: selectedAgentTools?.filter(tool => 
-			tool.type === ToolType.RAG_TOOL && selectedAgent?.toolIds?.includes(tool._id)
-		) || [],
-		tools: selectedAgentTools?.filter(tool => 
-			tool.type !== ToolType.RAG_TOOL && selectedAgent?.toolIds?.includes(tool._id)
-		) || []
-	}), [selectedAgentTools, selectedAgent?.toolIds]);
+		// Memoize tools and datasources based on both selectedAgentTools and localAgent
+		const { datasources, tools } = useMemo(
+			() => ({
+				datasources:
+					selectedAgentTools?.filter(
+						tool => tool.type === ToolType.RAG_TOOL && selectedAgent?.toolIds?.includes(tool._id)
+					) || [],
+				tools:
+					selectedAgentTools?.filter(
+						tool => tool.type !== ToolType.RAG_TOOL && selectedAgent?.toolIds?.includes(tool._id)
+					) || []
+			}),
+			[selectedAgentTools, selectedAgent?.toolIds]
+		);
 
-	const handleEditClick = (e: React.MouseEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
-		setOpenEditSheet(true);
-	};
+		const handleEditClick = (e: React.MouseEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setOpenEditSheet(true);
+		};
 
-	return (
-		<div className='flex flex-col gap-4 rounded-lg pb-6 border border-gray-200'>
-			<div className='flex items-center justify-between bg-gray-100 border border-gray-200 px-4 py-2 rounded-t-lg'>
-				<p>Agent</p>
-				<div className='flex items-center gap-2'>
-					<Button
-						onClick={handleEditClick}
-						disabled={isUpdating}
-						className='bg-background text-foreground text-xs font-medium hover:bg-background'
-					>
-						Edit
-					</Button>
-					<Button
-						onClick={onChangeAgent}
-						disabled={isUpdating}
-						className='bg-background text-foreground text-xs font-medium hover:bg-background'
-					>
-						Change Agent
-					</Button>
-				</div>
-			</div>
-			<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
-				<div>
-					<div className='flex gap-4 p-4 items-center'>
-						<Blockies seed={selectedAgent.name} size={10} scale={4} className='rounded-full' />
-						<div className='flex items-start gap-2 w-full flex-col lg:flex-row lg:items-center'>
-							<div>
-								<p className='font-medium text-foreground'>{selectedAgent.name}</p>
-							</div>
-							<div className='flex items-center gap-2 text-gray-500 text-xs bg-gray-100 p-1 w-fit rounded-sm'>
-								<Cpu width={15} />
-								<p>{selectedAgentModel.name}</p>
-							</div>
-						</div>
-						<CollapsibleTrigger className='border border-gray-200 p-2 rounded-lg h-fit'>
-								{isExpanded ? (
-								<ChevronUp width={15} height={15} />
-							) : (
-								<ChevronDown width={15} height={15} />
-							)}
-						</CollapsibleTrigger>
+		return (
+			<div className='flex flex-col gap-4 rounded-lg pb-6 border border-gray-200'>
+				<div className='flex items-center justify-between bg-gray-100 border border-gray-200 px-4 py-2 rounded-t-lg'>
+					<p>Agent</p>
+					<div className='flex items-center gap-2'>
+						<Button
+							onClick={handleEditClick}
+							disabled={isUpdating}
+							className='bg-background text-foreground text-xs font-medium hover:bg-background'>
+							Edit
+						</Button>
+						<Button
+							onClick={onChangeAgent}
+							disabled={isUpdating}
+							className='bg-background text-foreground text-xs font-medium hover:bg-background'>
+							Change Agent
+						</Button>
 					</div>
-					<CollapsibleContent>
-						<div className='px-4'>
-							<div>
-								<div className='p-2 flex flex-col gap-1'>
-									<p className='text-xs text-gray-500'>Role</p>
-									<p>{selectedAgent.role}</p>
-								</div>
-								<div className='p-2 flex flex-col gap-1 border-b border-gray-200'>
-									<p className='text-xs text-gray-500'>Goal</p>
-									<p>{selectedAgent.goal}</p>
+				</div>
+				<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+					<div>
+						<div className='flex gap-4 p-4 items-center'>
+							<Blockies seed={selectedAgent.name} size={10} scale={4} className='rounded-full' />
+							<div className='flex items-start gap-2 w-full flex-col lg:flex-row lg:items-center'>
+								<div>
+									<p className='font-medium text-foreground'>{selectedAgent.name}</p>
 								</div>
-								<div className='p-2 flex flex-col gap-1'>
-									<p className='text-xs text-gray-500'>Backstory</p>
-									<p>{selectedAgent.backstory}</p>
+								<div className='flex items-center gap-2 text-gray-500 text-xs bg-gray-100 p-1 w-fit rounded-sm'>
+									<Cpu width={15} />
+									<p>{selectedAgentModel.name}</p>
 								</div>
 							</div>
-							<div className='flex gap-6 flex-col lg:flex-row'>
-								<div className='flex flex-col gap-2 px-4 py-2 border border-gray-300 w-full rounded-lg'>
-									<div className='flex items-center gap-2'>
-										<Wrench width={15} color='#9CA3AF' />
-										<p className='text-sm'>Tools</p>
+							<CollapsibleTrigger className='border border-gray-200 p-2 rounded-lg h-fit'>
+								{isExpanded ? (
+									<ChevronUp width={15} height={15} />
+								) : (
+									<ChevronDown width={15} height={15} />
+								)}
+							</CollapsibleTrigger>
+						</div>
+						<CollapsibleContent>
+							<div className='px-4'>
+								<div>
+									<div className='p-2 flex flex-col gap-1'>
+										<p className='text-xs text-gray-500'>Role</p>
+										<p>{selectedAgent.role}</p>
+									</div>
+									<div className='p-2 flex flex-col gap-1 border-b border-gray-200'>
+										<p className='text-xs text-gray-500'>Goal</p>
+										<p>{selectedAgent.goal}</p>
 									</div>
-									<div className='flex flex-col gap-2'>
-										{tools.map(tool => (
-											<div
-												key={tool._id.toString()}
-												className='flex items-center gap-2 bg-gray-100 p-1 rounded'
-											>
-												<Wrench width={15} color='#9CA3AF' />
-												<p className='line-clamp-1 text-sm'>{tool.name}</p>
-											</div>
-										))}
+									<div className='p-2 flex flex-col gap-1'>
+										<p className='text-xs text-gray-500'>Backstory</p>
+										<p>{selectedAgent.backstory}</p>
 									</div>
 								</div>
-
-								<div className='flex flex-col gap-2 px-4 py-2 border border-gray-300 w-full rounded-lg'>
-									<div className='flex items-center gap-2'>
-										<Wrench width={15} color='#9CA3AF' />
-										<p className='text-sm'>Data Sources</p>
+								<div className='flex gap-6 flex-col lg:flex-row'>
+									<div className='flex flex-col gap-2 px-4 py-2 border border-gray-300 w-full rounded-lg'>
+										<div className='flex items-center gap-2'>
+											<Wrench width={15} color='#9CA3AF' />
+											<p className='text-sm'>Tools</p>
+										</div>
+										<div className='flex flex-col gap-2'>
+											{tools.map(tool => (
+												<div
+													key={tool._id.toString()}
+													className='flex items-center gap-2 bg-gray-100 p-1 rounded'>
+													<Wrench width={15} color='#9CA3AF' />
+													<p className='line-clamp-1 text-sm'>{tool.name}</p>
+												</div>
+											))}
+										</div>
 									</div>
-									<div className='flex flex-col gap-2'>
-										{datasources.map(datasource => (
-											<div
-												className='flex items-center gap-2 bg-gray-100 p-1 rounded'
-												key={datasource._id.toString()}
-											>
-												<File width={15} color='#2F2A89' />
-												<p className='line-clamp-1 text-sm'>{datasource.name}</p>
-											</div>
-										))}
+
+									<div className='flex flex-col gap-2 px-4 py-2 border border-gray-300 w-full rounded-lg'>
+										<div className='flex items-center gap-2'>
+											<Wrench width={15} color='#9CA3AF' />
+											<p className='text-sm'>Data Sources</p>
+										</div>
+										<div className='flex flex-col gap-2'>
+											{datasources.map(datasource => (
+												<div
+													className='flex items-center gap-2 bg-gray-100 p-1 rounded'
+													key={datasource._id.toString()}>
+													<File width={15} color='#2F2A89' />
+													<p className='line-clamp-1 text-sm'>{datasource.name}</p>
+												</div>
+											))}
+										</div>
 									</div>
 								</div>
 							</div>
-						</div>
-					</CollapsibleContent>
-				</div>
-			</Collapsible>
-			<CreateAgentSheet
-				selectedAgentTools={selectedAgentTools}
-				selectedAgent={selectedAgent}
-				openEditSheet={openEditSheet}
-				setOpenEditSheet={setOpenEditSheet}
-				editing={true}
-				agentId={selectedAgent?._id}
-				callback={handleAgentEdit}
-				disabled={isUpdating}
-			/>
-		</div>
-	);
-}, (prevProps, nextProps) => {
-	// More accurate memo comparison
-	if (prevProps.isUpdating || nextProps.isUpdating) return false;
-	if (prevProps.openEditSheet !== nextProps.openEditSheet) return false;
-	
-	const agentChanged = JSON.stringify(prevProps.selectedAgent) !== JSON.stringify(nextProps.selectedAgent);
-	const toolsChanged = JSON.stringify(prevProps.selectedAgentTools) !== JSON.stringify(nextProps.selectedAgentTools);
-	const modelChanged = prevProps.selectedAgentModel?.name !== nextProps.selectedAgentModel?.name;
-	
-	return !agentChanged && !toolsChanged && !modelChanged;
-});
+						</CollapsibleContent>
+					</div>
+				</Collapsible>
+				<CreateAgentSheet
+					selectedAgentTools={selectedAgentTools}
+					selectedAgent={selectedAgent}
+					openEditSheet={openEditSheet}
+					setOpenEditSheet={setOpenEditSheet}
+					editing={true}
+					agentId={selectedAgent?._id.toString()}
+					callback={handleAgentEdit}
+				/>
+			</div>
+		);
+	},
+	(prevProps, nextProps) => {
+		// More accurate memo comparison
+		if (prevProps.isUpdating || nextProps.isUpdating) return false;
+		if (prevProps.openEditSheet !== nextProps.openEditSheet) return false;
+
+		const agentChanged =
+			JSON.stringify(prevProps.selectedAgent) !== JSON.stringify(nextProps.selectedAgent);
+		const toolsChanged =
+			JSON.stringify(prevProps.selectedAgentTools) !== JSON.stringify(nextProps.selectedAgentTools);
+		const modelChanged = prevProps.selectedAgentModel?.name !== nextProps.selectedAgentModel?.name;
+
+		return !agentChanged && !toolsChanged && !modelChanged;
+	}
+);
 
 AgentCreatedDisplay.displayName = 'AgentCreatedDisplay';
diff --git a/webapp/src/components/apps/AgentSelectDisplay.tsx b/webapp/src/components/apps/AgentSelectDisplay.tsx
index 33b235d23..9be89c12c 100644
--- a/webapp/src/components/apps/AgentSelectDisplay.tsx
+++ b/webapp/src/components/apps/AgentSelectDisplay.tsx
@@ -45,7 +45,8 @@ export const AgentSelectDisplay = ({
 					<Button
 						asChild
 						className='order-1 lg:order-2 bg-background border border-gray-300 hover:bg-background text-foreground'
-						onClick={() => setOpenEditSheet(true)}>
+						onClick={() => setOpenEditSheet(true)}
+					>
 						<div className='w-full lg:w-fit text-xs font-medium flex items-center gap-2 cursor-pointer'>
 							<CirclePlus width={15} color='#6B7280' />
 							<p>New Agent</p>
@@ -62,7 +63,8 @@ export const AgentSelectDisplay = ({
 					return (
 						<Card
 							key={agent._id.toString()}
-							className='w-full rounded-2xl py-2 px-4 gap-[21px] flex flex-col border-0 shadow-none lg:border lg:border-gray-200'>
+							className='w-full rounded-2xl py-2 px-4 gap-[21px] flex flex-col border-0 shadow-none lg:border lg:border-gray-200'
+						>
 							<CardHeader>
 								<CardTitle>
 									<div className='flex flex-col gap-2'>
@@ -77,7 +79,8 @@ export const AgentSelectDisplay = ({
 									return (
 										<div
 											key={tools.id}
-											className='bg-background flex items-center gap-1 py-1 px-2 rounded text-sm text-gray-500 font-medium'>
+											className='bg-background flex items-center gap-1 py-1 px-2 rounded text-sm text-gray-500 font-medium'
+										>
 											{tools.type === ToolType.RAG_TOOL ? (
 												<Database width={15} color='#9CA3AF' />
 											) : (
@@ -92,7 +95,8 @@ export const AgentSelectDisplay = ({
 								<Button
 									onClick={() => setSelectedAgent(agent)}
 									asChild
-									className='w-full cursor-pointer bg-background border border-gray-300 mt-2 hover:bg-background text-foreground'>
+									className='w-full cursor-pointer bg-background border border-gray-300 mt-2 hover:bg-background text-foreground'
+								>
 									<p>Select</p>
 								</Button>
 							</CardFooter>
diff --git a/webapp/src/components/apps/CreateAgentSheet.tsx b/webapp/src/components/apps/CreateAgentSheet.tsx
index fad05fec6..f9438d43e 100644
--- a/webapp/src/components/apps/CreateAgentSheet.tsx
+++ b/webapp/src/components/apps/CreateAgentSheet.tsx
@@ -39,11 +39,12 @@ import { ToolType } from 'struct/tool';
 import { ToolsDialogContent } from './ToolsDialogContent';
 import { Dialog, DialogContent } from 'modules/components/ui/dialog';
 import { MultiSelect } from 'modules/components/multi-select';
+import { Agent } from 'struct/agent';
 // import { MultiSelectComboBox } from '../MultiSelectComboBox/multi-select-combobox';
 
 export const CreateAgentSheet = ({
 	selectedAgentTools,
-	selectedAgent,  // Add selectedAgent to props
+	selectedAgent, // Add selectedAgent to props
 	setAgentDisplay,
 	openEditSheet,
 	setOpenEditSheet,
@@ -52,7 +53,7 @@ export const CreateAgentSheet = ({
 	callback
 }: {
 	selectedAgentTools?: any;
-	selectedAgent?: Agent;  // Add type
+	selectedAgent?: Agent; // Add type
 	setAgentDisplay?: (agent: AgentDataReturnType['agent']) => void;
 	openEditSheet: boolean;
 	setOpenEditSheet: (open: boolean) => void;
@@ -151,22 +152,22 @@ export const CreateAgentSheet = ({
 		const foundTool = tools.find(t => t._id === tid);
 		if (!foundTool) {
 			return acc;
-			}
-			
-			// Format tool value correctly as an object with label and value
-			const toolVal = { 
-				label: foundTool.name, 
-				value: foundTool._id.toString() // Ensure value is string
-			};
-			
-			if ((foundTool?.type as ToolType) !== ToolType.RAG_TOOL) {
-				acc.initialTools.push(toolVal);
-			} else {
-				acc.initialDatasources.push(toolVal);
-			}
-			return acc;
+		}
+
+		// Format tool value correctly as an object with label and value
+		const toolVal = {
+			label: foundTool.name,
+			value: foundTool._id.toString() // Ensure value is string
 		};
 
+		if ((foundTool?.type as ToolType) !== ToolType.RAG_TOOL) {
+			acc.initialTools.push(toolVal);
+		} else {
+			acc.initialDatasources.push(toolVal);
+		}
+		return acc;
+	};
+
 	useEffect(() => {
 		setAgent(cloneState?.agent);
 		setIcon(cloneState?.agent?.icon);
@@ -252,7 +253,8 @@ export const CreateAgentSheet = ({
 
 			// Set initial tools and datasources from selectedAgentTools
 			if (selectedAgentTools) {
-				const { initialTools, initialDatasources } = selectedAgentTools.reduce((acc, tool) => {
+				const { initialTools, initialDatasources } = selectedAgentTools.reduce(
+					(acc, tool) => {
 						const toolValue = tool._id;
 						if (tool.type !== ToolType.RAG_TOOL) {
 							acc.initialTools.push(toolValue);
@@ -286,9 +288,14 @@ export const CreateAgentSheet = ({
 			backstory: e.target.backstory.value,
 			toolIds: [...(toolState || []), ...(datasourceState || [])],
 			iconId: icon?.id,
-			variableIds: Array.from(
-				new Set([...roleSelectedVariables, ...goalSelectedVariables, ...backstorySelectedVariables])
-			) || [],
+			variableIds:
+				Array.from(
+					new Set([
+						...roleSelectedVariables,
+						...goalSelectedVariables,
+						...backstorySelectedVariables
+					])
+				) || [],
 			cloning: cloneState?.agent && editing
 		};
 
@@ -299,7 +306,7 @@ export const CreateAgentSheet = ({
 				() => {
 					toast.success('Agent Updated');
 					setOpenEditSheet(false);
-					callback && callback(agentState._id, body);
+					callback && callback(agentState._id.toString(), body);
 				},
 				res => {
 					toast.error(res);
@@ -557,7 +564,12 @@ export const CreateAgentSheet = ({
 
 								</div> */}
 
-									<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+									<AvatarUploader
+										existingAvatar={icon}
+										callback={iconCallback}
+										isDialogOpen={modalOpen === 'avatar'}
+										setIsDialogOpen={setModalOpen}
+									/>
 									<div className='flex flex-col gap-2 justify-center'>
 										<p className='bg-gray-100 text-gray-500 rounded-sm p-2 text-sm'>
 											Leave blank to auto-generate a profile photo based on the name.
@@ -609,21 +621,21 @@ export const CreateAgentSheet = ({
 									<div className='flex gap-2 items-center text-xs'>
 										<p>Suggestions:</p>
 										<div className='flex items-center gap-2'>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('Technical Support')}>
-											Technical Support
-										</p>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('Code Helper')}>
-											Code Helper
-										</p>
-										<p
-											className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
-											onClick={() => setRole('API Integrator')}>
-											API Integrator
-										</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('Technical Support')}>
+												Technical Support
+											</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('Code Helper')}>
+												Code Helper
+											</p>
+											<p
+												className='text-gray-900 py-1 px-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-colors'
+												onClick={() => setRole('API Integrator')}>
+												API Integrator
+											</p>
 										</div>
 									</div>
 								</div>
diff --git a/webapp/src/components/apps/ToolsDialogContent.tsx b/webapp/src/components/apps/ToolsDialogContent.tsx
index e495f0e2d..0ae5f3eff 100644
--- a/webapp/src/components/apps/ToolsDialogContent.tsx
+++ b/webapp/src/components/apps/ToolsDialogContent.tsx
@@ -81,20 +81,23 @@ export const ToolsDialogContent = ({
 					<div className='flex w-full justify-between items-center border-t border-gray-200 py-4'>
 						<Button
 							onClick={handleCloseDialog}
-							className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'>
+							className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'
+						>
 							Cancel
 						</Button>
 						{selectedTool && screen === 'tool' && (
 							<Button
 								onClick={() => setScreen('install')}
-								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+							>
 								Save
 							</Button>
 						)}
 						{screen === 'new' && (
 							<Button
 								onClick={() => setScreen('install')}
-								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+							>
 								Save
 							</Button>
 						)}
diff --git a/webapp/src/components/apps/crew-apps/AgentSelection.tsx b/webapp/src/components/apps/crew-apps/AgentSelection.tsx
index b909b81ae..46080cc2c 100644
--- a/webapp/src/components/apps/crew-apps/AgentSelection.tsx
+++ b/webapp/src/components/apps/crew-apps/AgentSelection.tsx
@@ -111,7 +111,8 @@ const AgentSelection = ({
 								</div>
 								<button
 									onClick={e => handleAgentRemove(e, agentItem.value)}
-									className='text-gray-400 hover:text-gray-600'>
+									className='text-gray-400 hover:text-gray-600'
+								>
 									<XMarkIcon className='w-5 h-5' />
 								</button>
 							</div>
@@ -123,7 +124,8 @@ const AgentSelection = ({
 				<div>
 					<button
 						onClick={() => setShowAgentSelect(true)}
-						className='text-blue-600 hover:text-blue-700 flex items-center gap-2'>
+						className='text-blue-600 hover:text-blue-700 flex items-center gap-2'
+					>
 						<PlusIcon className='w-5 h-5' />
 						Add Agent
 					</button>
@@ -135,7 +137,8 @@ const AgentSelection = ({
 									<button
 										key={agent._id as string}
 										onClick={() => handleAgentSelect(agent)}
-										className='text-gray-600 hover:text-blue-600'>
+										className='text-gray-600 hover:text-blue-600'
+									>
 										{agent.name}
 									</button>
 								))}
@@ -153,13 +156,15 @@ const AgentSelection = ({
 								onClick={e => {
 									e.preventDefault();
 									setOpenEditSheet(true);
-								}}>
+								}}
+							>
 								<PlusIcon className='w-5 h-5' />
 								New Agent
 							</button>
 							<button
 								onClick={() => setShowAgentSelect(false)}
-								className='text-gray-400 hover:text-gray-600'>
+								className='text-gray-400 hover:text-gray-600'
+							>
 								<XMarkIcon className='w-5 h-5' />
 							</button>
 						</div>
@@ -186,7 +191,8 @@ const AgentSelection = ({
 								<div
 									key={agent._id as string}
 									className='border rounded-lg p-4 cursor-pointer hover:border-blue-500 flex flex-col'
-									onClick={() => handleAgentSelect(agent)}>
+									onClick={() => handleAgentSelect(agent)}
+								>
 									<img src='/apps/identicon.png' className='w-12 h-12 rounded-full mb-2' />
 									<h4 className='font-semibold'>{agent.name}</h4>
 									<p className='text-gray-600 text-sm'>{agent.role}</p>
diff --git a/webapp/src/components/connections/EmbeddingModelSelect.tsx b/webapp/src/components/connections/EmbeddingModelSelect.tsx
index 3c7d19043..401a65541 100644
--- a/webapp/src/components/connections/EmbeddingModelSelect.tsx
+++ b/webapp/src/components/connections/EmbeddingModelSelect.tsx
@@ -155,7 +155,8 @@ const EmbeddingModelSelect = () => {
 	return (
 		<form
 			className='flex-1 border border-gray-300 p-4 flex flex-col gap-y-3 mt-6'
-			onSubmit={handleSubmit(addNewModel)}>
+			onSubmit={handleSubmit(addNewModel)}
+		>
 			<div className='text-sm flex gap-1 dark:text-white mb-4'>
 				<span>Use Existing Model</span>
 				<ToolTip content='Select an existing embedding model from your team'>
@@ -246,7 +247,8 @@ const EmbeddingModelSelect = () => {
 			<div className='flex justify-end mt-4'>
 				<button
 					type='submit'
-					className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
+					className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+				>
 					Continue
 				</button>
 			</div>
diff --git a/webapp/src/components/connections/VectorDBSelection.tsx b/webapp/src/components/connections/VectorDBSelection.tsx
index 39f7d862d..8a43447c9 100644
--- a/webapp/src/components/connections/VectorDBSelection.tsx
+++ b/webapp/src/components/connections/VectorDBSelection.tsx
@@ -229,7 +229,8 @@ const VectorDBSelection = () => {
 							setValue('byoVectorDb', false);
 							setSelectedDB(null);
 						}
-					}}>
+					}}
+				>
 					<SelectTrigger>
 						<SelectValue placeholder='Select a vector database' />
 					</SelectTrigger>
@@ -261,7 +262,8 @@ const VectorDBSelection = () => {
 							} else {
 								setValue('byoVectorDb', false);
 							}
-						}}>
+						}}
+					>
 						{connector.value === selectedDB && (
 							<CheckCircleIcon className='h-8 w-8 text-primary-500 absolute top-4 right-4' />
 						)}
@@ -313,7 +315,8 @@ const VectorDBSelection = () => {
 			<div className='flex justify-end mt-4 ml-auto'>
 				<button
 					type='submit'
-					className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 flex items-center justify-center'>
+					className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 flex items-center justify-center'
+				>
 					{loading && <ButtonSpinner />}
 					{loading ? 'Saving Datasource ...' : 'Continue'}
 				</button>
@@ -395,7 +398,8 @@ const PineConeFields = ({
 				<button
 					type='button'
 					className='bg-white w-full flex p-4 items-center'
-					onClick={() => connectWithAPIKey()}>
+					onClick={() => connectWithAPIKey()}
+				>
 					<span className='text-sm font-medium'>Connect Securely with Pinecone</span>
 					<div className='px-5 py-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white rounded-md ml-auto'>
 						Connect{' '}
diff --git a/webapp/src/components/modal/CreateToolModal.tsx b/webapp/src/components/modal/CreateToolModal.tsx
index 14b6a0b8f..fbb2cda55 100644
--- a/webapp/src/components/modal/CreateToolModal.tsx
+++ b/webapp/src/components/modal/CreateToolModal.tsx
@@ -36,6 +36,9 @@ export default function CreateToolModal({ open, setOpen, callback, initialType =
 						datasources={datasources}
 						initialType={ToolType.FUNCTION_TOOL}
 						fetchFormData={fetchToolFormData}
+						setDisplayScreen={() => {}}
+						fetchTools={() => {}}
+						setActiveTab={() => {}}
 					/>
 				</div>
 			</DialogContent>
diff --git a/webapp/src/components/sessions/SessionTable.tsx b/webapp/src/components/sessions/SessionTable.tsx
index 65cc65a33..a0c6787fd 100644
--- a/webapp/src/components/sessions/SessionTable.tsx
+++ b/webapp/src/components/sessions/SessionTable.tsx
@@ -35,7 +35,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 					<Card
 						key={session._id.toString()}
 						className='cursor-pointer'
-						onClick={() => router.push(`/${resourceSlug}/session/${session._id}`)}>
+						onClick={() => router.push(`/${resourceSlug}/session/${session._id}`)}
+					>
 						<CardContent className='pt-6'>
 							<div className='flex items-center justify-between'>
 								<div className='flex items-center gap-2'>
@@ -61,7 +62,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 												'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
 											session.status === SessionStatus.TERMINATED &&
 												'bg-gray-100 text-gray-800 hover:bg-gray-100'
-										)}>
+										)}
+									>
 										<div className='flex items-center gap-2'>
 											{session.status === SessionStatus.RUNNING
 												? 'Live'
@@ -76,7 +78,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 										onClick={e => {
 											e.stopPropagation();
 											onDelete?.(session._id.toString());
-										}}>
+										}}
+									>
 										<Trash2 className='h-4 w-4' />
 									</Button>
 								</div>
@@ -121,7 +124,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 						<TableRow
 							key={session._id.toString()}
 							onClick={() => router.push(`/${resourceSlug}/session/${session._id}`)}
-							className='cursor-pointer'>
+							className='cursor-pointer'
+						>
 							<TableCell className='px-4'>
 								{session.app.type === 'chat' ? (
 									<ChatBubbleLeftRightIcon width={20} className='text-gray-800' />
@@ -153,14 +157,16 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 											'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
 										session.status === SessionStatus.TERMINATED &&
 											'bg-gray-100 text-gray-800 hover:bg-gray-100'
-									)}>
+									)}
+								>
 									<div className='flex items-center justify-center gap-2'>
 										{session.status === SessionStatus.RUNNING && (
 											<svg
 												viewBox='0 0 24 24'
 												className='w-4 h-4'
 												fill='none'
-												stroke='currentColor'>
+												stroke='currentColor'
+											>
 												<path d='M5 3l14 9-14 9V3z' strokeWidth={2} />
 											</svg>
 										)}
@@ -186,7 +192,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 												viewBox='0 0 24 24'
 												className='w-4 h-4'
 												fill='none'
-												stroke='currentColor'>
+												stroke='currentColor'
+											>
 												<circle cx='12' cy='12' r='10' strokeWidth={2} />
 											</svg>
 										)}
@@ -206,7 +213,8 @@ export function SessionTable({ sessions, onDelete }: SessionTableProps) {
 										onClick={e => {
 											e.stopPropagation();
 											onDelete?.(session._id.toString());
-										}}>
+										}}
+									>
 										<Trash2 className='h-4 w-4' />
 									</Button>
 								</div>
diff --git a/webapp/src/components/tasks/NewTaskSheet.tsx b/webapp/src/components/tasks/NewTaskSheet.tsx
index 7fdb7f458..56cf04657 100644
--- a/webapp/src/components/tasks/NewTaskSheet.tsx
+++ b/webapp/src/components/tasks/NewTaskSheet.tsx
@@ -22,7 +22,7 @@ export default function NewTaskSheet({
 	const { account, csrf, teamName } = accountContext as any;
 	const router = useRouter();
 	const { resourceSlug } = router.query;
-	const [state, dispatch] = useState();
+	const [state, dispatch] = useState<any>();
 	const [cloneState, setCloneState] = useState(null);
 	const [error, setError] = useState();
 	const [loading, setLoading] = useState(true);
diff --git a/webapp/src/components/tools/ToolForm.tsx b/webapp/src/components/tools/ToolForm.tsx
index 8d84e2e6f..03370b61f 100644
--- a/webapp/src/components/tools/ToolForm.tsx
+++ b/webapp/src/components/tools/ToolForm.tsx
@@ -455,7 +455,8 @@ export default function ToolForm({
 											onChange={e => {
 												setCurrentTab(tabs.find(t => t.name === e.target.value));
 											}}
-											defaultValue={currentTab.name}>
+											defaultValue={currentTab.name}
+										>
 											{tabs
 												.filter(tab => !tab.toolTypes || tab.toolTypes?.includes(toolType))
 												.map(tab => (
@@ -481,13 +482,15 @@ export default function ToolForm({
 																	: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
 																'whitespace-nowrap border-b-2 px-2 py-4 text-sm font-medium flex'
 															)}
-															aria-current={currentTab.name === tab.name ? 'page' : undefined}>
+															aria-current={currentTab.name === tab.name ? 'page' : undefined}
+														>
 															{tab.name}
 															{tab.name === 'Version History' && tool?.functionLogs && (
 																<svg
 																	className='ms-2 h-2 w-2 fill-red-500'
 																	viewBox='0 0 6 6'
-																	aria-hidden='true'>
+																	aria-hidden='true'
+																>
 																	<circle cx='3' cy='3' r='3' />
 																</svg>
 															)}
@@ -588,7 +591,8 @@ export default function ToolForm({
 												className='text-sm text-blue-500 dark:text-blue-400 underline'
 												href='https://qdrant.tech/documentation/concepts/filtering/#filtering'
 												target='_blank'
-												rel='noreferrer'>
+												rel='noreferrer'
+											>
 												Instructions on how to format filters
 											</a>
 											<ScriptEditor
@@ -629,14 +633,16 @@ export default function ToolForm({
 					{!compact && (
 						<Button
 							className='text-sm font-semibold leading-6 bg-indigo-600 text-white hover:bg-indigo-500'
-							onClick={() => setDisplayScreen('tools')}>
+							onClick={() => setDisplayScreen('tools')}
+						>
 							Back
 						</Button>
 					)}
 					<button
 						type='submit'
 						disabled={submitting}
-						className={`flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${compact ? 'w-full' : ''}`}>
+						className={`flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${compact ? 'w-full' : ''}`}
+					>
 						{submitting && <ButtonSpinner className='mr-2' />}
 						Save
 					</button>
diff --git a/webapp/src/components/tools/form/FunctionToolForm.tsx b/webapp/src/components/tools/form/FunctionToolForm.tsx
index 948df8ec6..863958e98 100644
--- a/webapp/src/components/tools/form/FunctionToolForm.tsx
+++ b/webapp/src/components/tools/form/FunctionToolForm.tsx
@@ -43,7 +43,8 @@ export default function FunctionToolForm({
 						name='runtime'
 						className='w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:ring-slate-600 dark:text-white'
 						value={runtimeState}
-						onChange={e => setRuntimeState(e.target.value)}>
+						onChange={e => setRuntimeState(e.target.value)}
+					>
 						{runtimeOptions.map(option => (
 							<option key={option.value} value={option.value}>
 								{option.label}
@@ -68,7 +69,8 @@ export default function FunctionToolForm({
 						className={cn(
 							'rounded-[5px] overflow-hidden',
 							isModal ? 'col-span-6' : 'md:col-span-3 col-span-6'
-						)}>
+						)}
+					>
 						<ScriptEditor
 							height='32.5em'
 							code={toolCode}
@@ -87,13 +89,15 @@ export default function FunctionToolForm({
 						className={cn(
 							'rounded overflow-hidden',
 							isModal ? 'col-span-6' : 'md:col-span-3 col-span-6'
-						)}>
+						)}
+					>
 						<SyntaxHighlighter
 							language='python'
 							style={style}
 							showLineNumbers={true}
 							PreTag={PreWithRef}
-							customStyle={{ margin: 0, maxHeight: 'unset', height: '40em' }}>
+							customStyle={{ margin: 0, maxHeight: 'unset', height: '40em' }}
+						>
 							{wrappedCode}
 						</SyntaxHighlighter>
 					</div>
diff --git a/webapp/src/components/tools/form/ToolDetailsForm.tsx b/webapp/src/components/tools/form/ToolDetailsForm.tsx
index 7cd0a0f6b..d12779028 100644
--- a/webapp/src/components/tools/form/ToolDetailsForm.tsx
+++ b/webapp/src/components/tools/form/ToolDetailsForm.tsx
@@ -19,12 +19,16 @@ export default function ToolDetailsForm({
 			<div className='sm:col-span-12'>
 				<label
 					htmlFor='name'
-					className='block text-sm font-medium leading-6 text-gray-900 dark:text-gray-50'
-				>
+					className='block text-sm font-medium leading-6 text-gray-900 dark:text-gray-50'>
 					Avatar
 				</label>
 				<div className='mt-2'>
-					<AvatarUploader existingAvatar={icon} callback={iconCallback} />
+					<AvatarUploader
+						existingAvatar={icon}
+						callback={iconCallback}
+						isDialogOpen={false}
+						setIsDialogOpen={() => {}}
+					/>
 				</div>
 			</div>
 			<div>
@@ -53,8 +57,7 @@ export default function ToolDetailsForm({
 							name='toolType'
 							className='w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-gray-50 mt-2'
 							value={toolType}
-							onChange={e => setToolType(e.target.value as ToolType)}
-						>
+							onChange={e => setToolType(e.target.value as ToolType)}>
 							<option value={ToolType.RAG_TOOL}>Datasource RAG</option>
 							<option value={ToolType.FUNCTION_TOOL}>Custom code</option>
 						</select>
diff --git a/webapp/src/components/tools/tools-create.tsx b/webapp/src/components/tools/tools-create.tsx
index 792959e16..ba5896ebb 100644
--- a/webapp/src/components/tools/tools-create.tsx
+++ b/webapp/src/components/tools/tools-create.tsx
@@ -96,7 +96,8 @@ export const ToolsCreate = ({
 								{currentStep > 1 && (
 									<Button
 										onClick={() => currentStep > 1 && setCurrentStep(currentStep - 1)}
-										asChild>
+										asChild
+									>
 										<div className='flex items-center gap-2 font-medium cursor-pointer bg-transparent hover:bg-transparent border-0 shadow-none outline-none'>
 											<MoveLeft color='#6B7280' />
 											<p className='text-gray-500'>Back</p>
@@ -106,7 +107,8 @@ export const ToolsCreate = ({
 								{currentStep < steps.length && (
 									<Button
 										onClick={() => currentStep < steps.length && setCurrentStep(currentStep + 1)}
-										asChild>
+										asChild
+									>
 										<div className='ml-auto flex items-center gap-2 font-medium cursor-pointer bg-transparent hover:bg-transparent border-0 shadow-none outline-none'>
 											<p className='text-[#4F46E5]'>Next</p>
 											<MoveRight color='#4F46E5' />
@@ -121,12 +123,14 @@ export const ToolsCreate = ({
 			<div className='flex items-center justify-between border-t border-gray-200 p-[16px]'>
 				<Button
 					onClick={() => setDisplayScreen('tools')}
-					className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'>
+					className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'
+				>
 					Cancel
 				</Button>
 				<Button
 					onClick={() => setDisplayScreen('tools')}
-					className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+					className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+				>
 					Save
 				</Button>
 			</div>
diff --git a/webapp/src/components/tools/tools-edit.tsx b/webapp/src/components/tools/tools-edit.tsx
index 1b5e5c9d2..3546d6755 100644
--- a/webapp/src/components/tools/tools-edit.tsx
+++ b/webapp/src/components/tools/tools-edit.tsx
@@ -6,90 +6,90 @@ import { Button } from 'modules/components/ui/button';
 import { useDataSourcesStore } from 'store/data-source';
 import { Tool, ToolType } from 'struct/tool';
 import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle
 } from 'modules/components/ui/dialog';
 
 export const ToolsEdit = ({
-    tool,
+	tool,
 	setSelectedTool,
-    isDialogOpen,
-    setIsDialogOpen,
-    dialogScreen,
-    setDialogScreen,
-    setDisplayScreen,
-    setActiveTab,
-    fetchTools
+	isDialogOpen,
+	setIsDialogOpen,
+	dialogScreen,
+	setDialogScreen,
+	setDisplayScreen,
+	setActiveTab,
+	fetchTools
 }: {
-    tool: Tool;
+	tool: Tool;
 	setSelectedTool: Function;
-    isDialogOpen: boolean;
-    setIsDialogOpen: Function;
-    dialogScreen: any;
-    setDialogScreen: any;
-    setDisplayScreen: React.Dispatch<React.SetStateAction<string>>;
-    setActiveTab: Function;
-    fetchTools: Function;
+	isDialogOpen: boolean;
+	setIsDialogOpen: Function;
+	dialogScreen: any;
+	setDialogScreen: any;
+	setDisplayScreen: React.Dispatch<React.SetStateAction<string>>;
+	setActiveTab: Function;
+	fetchTools: Function;
 }) => {
-    const { dataSources } = useDataSourcesStore();
+	const { dataSources } = useDataSourcesStore();
 
-    function handleCloseDialog() {
-        setIsDialogOpen(false);
-        setDisplayScreen('tools');
-    }
+	function handleCloseDialog() {
+		setIsDialogOpen(false);
+		setDisplayScreen('tools');
+	}
 
-
-    return (
-        <div className='flex flex-col gap-4 pb-6 rounded-lg border border-gray-200 mt-4'>
-            <div className='p-4 border border-gray-200'>
-                <p className='text-sm'>Edit Tool</p>
-            </div>
-            <div className='flex px-6'>
-                <div className='flex flex-col gap-4 w-full'>
-                    {tool.type === ToolType.FUNCTION_TOOL ? (
-                        <ToolForm
-                            tool={tool}
-                            datasources={dataSources}
-                            editing={true}
+	return (
+		<div className='flex flex-col gap-4 pb-6 rounded-lg border border-gray-200 mt-4'>
+			<div className='p-4 border border-gray-200'>
+				<p className='text-sm'>Edit Tool</p>
+			</div>
+			<div className='flex px-6'>
+				<div className='flex flex-col gap-4 w-full'>
+					{tool.type === ToolType.FUNCTION_TOOL ? (
+						<ToolForm
+							tool={tool}
+							datasources={dataSources}
+							editing={true}
 							initialType={ToolType.FUNCTION_TOOL}
-                            fetchFormData={fetchTools}
-                            setDisplayScreen={setDisplayScreen}
+							fetchFormData={fetchTools}
+							setDisplayScreen={setDisplayScreen}
 							fetchTools={fetchTools}
-                        />
-                    ) : (
-                        // <Install
-                        //     selectedTool={tool}
-                        //     setSelectedTool={setSelectedTool}
-                        //     setScreen={setDisplayScreen}
-                        //     type={'edit'}
-                        //     setIsDialogOpen={setIsDialogOpen}
-                        //     setActiveTab={() => {}}
-                        // />
-                        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                        <DialogContent className='rounded-3xl sm:max-w-[864px] w-[90%] text-foreground  flex flex-col justify-between'>
-                            <DialogHeader>
-                                <DialogTitle className='font-semibold text-2xl text-foreground'>
-                                    Install Tool
-                                </DialogTitle>
-                            </DialogHeader>
-  
-                                {dialogScreen === 'toolDisplay' && (
-                                    <ToolDisplay
-                                        setDisplayScreen={setDisplayScreen}
-                                        setScreen={setDialogScreen}
-                                        selectedTool={tool}
-                                        editing={true}
-                                        fetchTools={fetchTools}
-                                        setSelectedTool={setSelectedTool}
-                                        handleCloseDialog={handleCloseDialog}
-                                        setDialogScreen={setDialogScreen}
-                                        callback={() => fetchTools()}
-                                    />
-                                )}
-                                {/* // ) : dialogScreen === 'installed' ? (
+							setActiveTab={setActiveTab}
+						/>
+					) : (
+						// <Install
+						//     selectedTool={tool}
+						//     setSelectedTool={setSelectedTool}
+						//     setScreen={setDisplayScreen}
+						//     type={'edit'}
+						//     setIsDialogOpen={setIsDialogOpen}
+						//     setActiveTab={() => {}}
+						// />
+						<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen as any}>
+							<DialogContent className='rounded-3xl sm:max-w-[864px] w-[90%] text-foreground  flex flex-col justify-between'>
+								<DialogHeader>
+									<DialogTitle className='font-semibold text-2xl text-foreground'>
+										Install Tool
+									</DialogTitle>
+								</DialogHeader>
+
+								{dialogScreen === 'toolDisplay' && (
+									<ToolDisplay
+										setDisplayScreen={setDisplayScreen}
+										setScreen={setDialogScreen}
+										selectedTool={tool}
+										editing={true}
+										fetchTools={fetchTools}
+										setSelectedTool={setSelectedTool as any}
+										handleCloseDialog={handleCloseDialog}
+										setDialogScreen={setDialogScreen}
+										callback={() => fetchTools()}
+									/>
+								)}
+								{/* // ) : dialogScreen === 'installed' ? (
                                 //     <Install
                                 //         type={'page'}
                                 //         setScreen={setDialogScreen}
@@ -99,11 +99,11 @@ export const ToolsEdit = ({
                                 //         setActiveTab={setActiveTab}
                                 //     />
                                 // ) : null} */}
-                        </DialogContent>
-                    </Dialog>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
\ No newline at end of file
+							</DialogContent>
+						</Dialog>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/webapp/src/components/tools/tools-library.tsx b/webapp/src/components/tools/tools-library.tsx
index c969ddc9b..d4de920ac 100644
--- a/webapp/src/components/tools/tools-library.tsx
+++ b/webapp/src/components/tools/tools-library.tsx
@@ -1,10 +1,10 @@
 import * as API from '@api';
 import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle
 } from 'modules/components/ui/dialog';
 import { Fragment, useState } from 'react';
 import { useToolStore } from 'store/tool';
@@ -18,109 +18,120 @@ import { Tool, ToolType } from 'struct/tool';
 import { FaPlus } from 'react-icons/fa';
 
 export const ToolsLibrary = ({
-    tools,
-    fetchTools,
-    setActiveTab
+	tools,
+	fetchTools,
+	setActiveTab
 }: {
-    tools: Tool[];
-    fetchTools: Function;
-    setActiveTab: Function;
+	tools: Tool[];
+	fetchTools: Function;
+	setActiveTab: Function;
 }) => {
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
-    const [dialogScreen, setDialogScreen] = useState<string>('toolDisplay'); // toolDisplay, installed
-    const [displayScreen, setDisplayScreen] = useState<string>('tools'); // tools, create, custom
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+	const [dialogScreen, setDialogScreen] = useState<string>('toolDisplay'); // toolDisplay, installed
+	const [displayScreen, setDisplayScreen] = useState<string>('tools'); // tools, create, custom
 
-    function handleCloseDialog() {
-        setIsDialogOpen(false);
-        setSelectedTool(null);
-        setDialogScreen('toolDisplay');
-    }
+	function handleCloseDialog() {
+		setIsDialogOpen(false);
+		setSelectedTool(null);
+		setDialogScreen('toolDisplay');
+	}
 
-    const builtInTools = tools.filter(tool => tool.type !== ToolType.FUNCTION_TOOL);
+	const builtInTools = tools.filter(tool => tool.type !== ToolType.FUNCTION_TOOL);
 
-    return (
-        <Fragment>
-            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                <DialogContent className='rounded-3xl sm:max-w-[864px] w-[90%] text-foreground  flex flex-col justify-between'>
-                    <DialogHeader>
-                        <DialogTitle className='font-semibold text-2xl text-foreground'>
-                            Install Tool
-                        </DialogTitle>
-                    </DialogHeader>
-                    {selectedTool !== null &&
-                        (dialogScreen === 'toolDisplay' ? (
-                            <ToolDisplay
-                                setScreen={setDialogScreen}
-                                selectedTool={selectedTool}
-                                setSelectedTool={setSelectedTool}
-                                handleCloseDialog={handleCloseDialog}
-                                setDialogScreen={setDialogScreen}
-                                callback={() => fetchTools()}
-                            />
-                        ) : dialogScreen === 'installed' ? (
-                            <Install
-                                type={'page'}
-                                setScreen={setDialogScreen}
-                                setSelectedTool={setSelectedTool}
-                                selectedTool={selectedTool}
-                                setIsDialogOpen={setIsDialogOpen}
-                                setActiveTab={setActiveTab}
-                            />
-                        ) : null)}
-                </DialogContent>
-            </Dialog>
-            <TabsContent value='tool-library'>
-                {displayScreen === 'create' ? (
-                    <ToolsCreate setDisplayScreen={setDisplayScreen} />
-                ) : displayScreen === 'custom' ? (
-                    <Custom fetchTools={fetchTools} setDisplayScreen={setDisplayScreen} setActiveTab={setActiveTab} />
-                ) : (
-                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 h-[600px] gap-6 my-10'>
-                        <div
-                            onClick={() => setDisplayScreen('custom')}
-                            className='h-full w-full border rounded-xl border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer items-center'>
-                            <div className='flex flex-col justify-around lg:justify-between w-full'>
-                                <div className='flex flex-col gap-1'>
-                                    <p className='font-semibold'>+ Custom Code Tool</p>
-                                    <p className='text-sm text-gray-500'>
-                                        Extend capabilities with custom Python scripts.
-                                    </p>
-                                </div>
-                                <div className='flex justify-between items-center text-xs'></div>
-                            </div>
-                        </div>
-                        {builtInTools
-                            .filter(tool => !tool.linkedToolId)
-                            .map((tool, index) => (
-                            <div
-                                onClick={() => {
-                                    setIsDialogOpen(true);
-                                    setSelectedTool(tool);
-                                }}
-                                key={index}
-                                className="h-[170px] w-full border border-gray-200 rounded-xl p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer overflow-auto">
-                                <div className='flex flex-col justify-around lg:justify-between w-full'>
-                                    <div className='flex flex-col gap-1 overflow-hidden'>
-                                        <p className='font-semibold'>{tool.name}</p>
-                                        <p className='text-sm text-gray-500 line-clamp-3'>{tool.description}</p>
-                                    </div>
-                                    <div className='w-full flex justify-between items-center text-xs'>
-                                        <p key={index} className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'>
-                                            BuiltIn
-                                        </p>
-                                        {!tool.linkedToolId && (
-                                            <Button variant="outline" className="text-xs flex items-center gap-1 align-middle">
-                                                <FaPlus className='inline-block font-extralight scale-75 text-gray-400 z-0'/> Install
-                                            </Button>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </TabsContent>
-        </Fragment>
-    );
-};
\ No newline at end of file
+	return (
+		<Fragment>
+			<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+				<DialogContent className='rounded-3xl sm:max-w-[864px] w-[90%] text-foreground  flex flex-col justify-between'>
+					<DialogHeader>
+						<DialogTitle className='font-semibold text-2xl text-foreground'>
+							Install Tool
+						</DialogTitle>
+					</DialogHeader>
+					{selectedTool !== null &&
+						(dialogScreen === 'toolDisplay' ? (
+							<ToolDisplay
+								setScreen={setDialogScreen}
+								selectedTool={selectedTool}
+								setSelectedTool={setSelectedTool}
+								handleCloseDialog={handleCloseDialog}
+								setDialogScreen={setDialogScreen}
+								callback={() => fetchTools()}
+								setDisplayScreen={setDisplayScreen}
+								fetchTools={fetchTools}
+							/>
+						) : dialogScreen === 'installed' ? (
+							<Install
+								type={'page'}
+								setScreen={setDialogScreen}
+								setSelectedTool={setSelectedTool}
+								selectedTool={selectedTool}
+								setIsDialogOpen={setIsDialogOpen}
+								setActiveTab={setActiveTab}
+							/>
+						) : null)}
+				</DialogContent>
+			</Dialog>
+			<TabsContent value='tool-library'>
+				{displayScreen === 'create' ? (
+					<ToolsCreate setDisplayScreen={setDisplayScreen} />
+				) : displayScreen === 'custom' ? (
+					<Custom
+						fetchTools={fetchTools}
+						setDisplayScreen={setDisplayScreen}
+						setActiveTab={setActiveTab}
+					/>
+				) : (
+					<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 h-[600px] gap-6 my-10'>
+						<div
+							onClick={() => setDisplayScreen('custom')}
+							className='h-full w-full border rounded-xl border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer items-center'>
+							<div className='flex flex-col justify-around lg:justify-between w-full'>
+								<div className='flex flex-col gap-1'>
+									<p className='font-semibold'>+ Custom Code Tool</p>
+									<p className='text-sm text-gray-500'>
+										Extend capabilities with custom Python scripts.
+									</p>
+								</div>
+								<div className='flex justify-between items-center text-xs'></div>
+							</div>
+						</div>
+						{builtInTools
+							.filter(tool => !tool.linkedToolId)
+							.map((tool, index) => (
+								<div
+									onClick={() => {
+										setIsDialogOpen(true);
+										setSelectedTool(tool);
+									}}
+									key={index}
+									className='h-[170px] w-full border border-gray-200 rounded-xl p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer overflow-auto'>
+									<div className='flex flex-col justify-around lg:justify-between w-full'>
+										<div className='flex flex-col gap-1 overflow-hidden'>
+											<p className='font-semibold'>{tool.name}</p>
+											<p className='text-sm text-gray-500 line-clamp-3'>{tool.description}</p>
+										</div>
+										<div className='w-full flex justify-between items-center text-xs'>
+											<p
+												key={index}
+												className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'>
+												BuiltIn
+											</p>
+											{!tool.linkedToolId && (
+												<Button
+													variant='outline'
+													className='text-xs flex items-center gap-1 align-middle'>
+													<FaPlus className='inline-block font-extralight scale-75 text-gray-400 z-0' />{' '}
+													Install
+												</Button>
+											)}
+										</div>
+									</div>
+								</div>
+							))}
+					</div>
+				)}
+			</TabsContent>
+		</Fragment>
+	);
+};
diff --git a/webapp/src/components/tools/tools-mytools.tsx b/webapp/src/components/tools/tools-mytools.tsx
index 5347fe957..eb12afe07 100644
--- a/webapp/src/components/tools/tools-mytools.tsx
+++ b/webapp/src/components/tools/tools-mytools.tsx
@@ -98,7 +98,8 @@ export const ToolsMytools = ({
 							?.map((tool, index) => (
 								<div
 									key={index}
-									className='w-full h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex justify-around cursor-pointer overflow-auto'>
+									className='w-full h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex justify-around cursor-pointer overflow-auto'
+								>
 									<div className='flex flex-col justify-around lg:justify-between'>
 										<div className='flex flex-col gap-1'>
 											<p className='font-semibold align-middle'>
@@ -110,7 +111,8 @@ export const ToolsMytools = ({
 										<div className='w-full flex justify-between items-center text-xs'>
 											<p
 												key={index}
-												className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'>
+												className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'
+											>
 												BuiltIn
 											</p>
 										</div>
@@ -125,7 +127,8 @@ export const ToolsMytools = ({
 											</DropdownMenuItem>
 											<DropdownMenuItem
 												className='text-red-600'
-												onClick={() => deleteTool(tool._id.toString())}>
+												onClick={() => deleteTool(tool._id.toString())}
+											>
 												Delete
 											</DropdownMenuItem>
 										</DropdownMenuContent>
@@ -138,7 +141,8 @@ export const ToolsMytools = ({
 							?.map((tool, index) => (
 								<div
 									key={index}
-									className='h-[170px] w-full border border-gray-200 rounded-xl p-4 gap-2 shadow-sm hover:shadow-md transition flex justify-around cursor-pointer overflow-auto'>
+									className='h-[170px] w-full border border-gray-200 rounded-xl p-4 gap-2 shadow-sm hover:shadow-md transition flex justify-around cursor-pointer overflow-auto'
+								>
 									<div className='flex flex-col justify-around lg:justify-between w-full'>
 										<div className='flex flex-col gap-1 overflow-hidden'>
 											<p className='font-semibold'>{tool.name}</p>
@@ -147,7 +151,8 @@ export const ToolsMytools = ({
 										<div className='w-full flex justify-between items-center text-xs'>
 											<p
 												key={index}
-												className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'>
+												className='py-1 px-2 rounded-full w-fit font-weight-bolder bg-gray-100 text-gray-500'
+											>
 												CustomTool
 											</p>
 										</div>
@@ -160,7 +165,8 @@ export const ToolsMytools = ({
 											<DropdownMenuItem onClick={() => handleEdit(tool)}>Edit</DropdownMenuItem>
 											<DropdownMenuItem
 												className='text-red-600'
-												onClick={() => deleteTool(tool._id.toString())}>
+												onClick={() => deleteTool(tool._id.toString())}
+											>
 												Delete
 											</DropdownMenuItem>
 										</DropdownMenuContent>
diff --git a/webapp/src/components/tools/tools-stepper-create/stepper-create-dependencies.tsx b/webapp/src/components/tools/tools-stepper-create/stepper-create-dependencies.tsx
index 924ce33af..40abe07e0 100644
--- a/webapp/src/components/tools/tools-stepper-create/stepper-create-dependencies.tsx
+++ b/webapp/src/components/tools/tools-stepper-create/stepper-create-dependencies.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function StepperCreateDependencies() {
-  return <div>StepperCreateDependencies</div>;
+	return <div>StepperCreateDependencies</div>;
 }
diff --git a/webapp/src/components/tools/tools-stepper-create/stepper-create-parameters.tsx b/webapp/src/components/tools/tools-stepper-create/stepper-create-parameters.tsx
index c19cab47d..0a3b0e134 100644
--- a/webapp/src/components/tools/tools-stepper-create/stepper-create-parameters.tsx
+++ b/webapp/src/components/tools/tools-stepper-create/stepper-create-parameters.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function StepperCreateParameters() {
-  return <div>StepperCreateParameters</div>;
+	return <div>StepperCreateParameters</div>;
 }
diff --git a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-config.tsx b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-config.tsx
index d6ad234bc..f79b02318 100644
--- a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-config.tsx
+++ b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-config.tsx
@@ -62,7 +62,8 @@ export function StepperEditConfig() {
 								<div className='flex'>
 									<div
 										className='w-full flex items-center'
-										onClick={() => setEditingParameterId(parameter.id)}>
+										onClick={() => setEditingParameterId(parameter.id)}
+									>
 										{editingParameterId === parameter.id ? (
 											<Input
 												onChange={e => handleParameterEdit(parameter.id, e.target.value)}
@@ -92,7 +93,8 @@ export function StepperEditConfig() {
 									<div className='w-[300px]'>
 										<Select
 											value={parameter.type}
-											onValueChange={e => handleParameterEdit(parameter.id, e)}>
+											onValueChange={e => handleParameterEdit(parameter.id, e)}
+										>
 											<SelectTrigger className='w-full rounded-none outline-none'>
 												<SelectValue placeholder='Type' />
 											</SelectTrigger>
@@ -124,7 +126,8 @@ export function StepperEditConfig() {
 					))}
 					<p
 						className='text-[#4F46E5] cursor-pointer self-end hover:text-[#3730a3] font-medium'
-						onClick={handleParameterAdd}>
+						onClick={handleParameterAdd}
+					>
 						+ Add
 					</p>
 				</div>
diff --git a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-dependencies.tsx b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-dependencies.tsx
index ec34f67a2..72017c08c 100644
--- a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-dependencies.tsx
+++ b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-dependencies.tsx
@@ -1,14 +1,12 @@
 export function StepperEditDependencies() {
-  return (
-    <div className="flex flex-col gap-4 text-sm">
-      <div>
-        <p className="font-semibold">Dependencies</p>
-      </div>
-      <div className="bg-gray-800 w-full min-h-[300px] rounded-lg">
-        <p className="bg-gray-700 w-full p-2 text-white rounded-t-lg">
-          Requirements.txt
-        </p>
-      </div>
-    </div>
-  );
+	return (
+		<div className='flex flex-col gap-4 text-sm'>
+			<div>
+				<p className='font-semibold'>Dependencies</p>
+			</div>
+			<div className='bg-gray-800 w-full min-h-[300px] rounded-lg'>
+				<p className='bg-gray-700 w-full p-2 text-white rounded-t-lg'>Requirements.txt</p>
+			</div>
+		</div>
+	);
 }
diff --git a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-version-history.tsx b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-version-history.tsx
index fd51111f8..0f5cfee9f 100644
--- a/webapp/src/components/tools/tools-stepper-edit/stepper-edit-version-history.tsx
+++ b/webapp/src/components/tools/tools-stepper-edit/stepper-edit-version-history.tsx
@@ -1,7 +1,5 @@
-import React from 'react'
+import React from 'react';
 
 export const StepperEditVersionHistory = () => {
-  return (
-    <div>StepperEditVersionHistory</div>
-  )
-}
+	return <div>StepperEditVersionHistory</div>;
+};
diff --git a/webapp/src/components/tools/toolsdialogscreens/Custom.tsx b/webapp/src/components/tools/toolsdialogscreens/Custom.tsx
index 96606064e..368ebe04e 100644
--- a/webapp/src/components/tools/toolsdialogscreens/Custom.tsx
+++ b/webapp/src/components/tools/toolsdialogscreens/Custom.tsx
@@ -26,4 +26,4 @@ export function Custom({ fetchTools, setDisplayScreen, setActiveTab }) {
 			/>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/webapp/src/components/tools/toolsdialogscreens/Initial.tsx b/webapp/src/components/tools/toolsdialogscreens/Initial.tsx
index b3a97d43b..4378b20cf 100644
--- a/webapp/src/components/tools/toolsdialogscreens/Initial.tsx
+++ b/webapp/src/components/tools/toolsdialogscreens/Initial.tsx
@@ -63,7 +63,8 @@ export const Initial = ({
 					<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 h-[600px] overflow-y-auto overflow-x-hidden pr-2'>
 						<div
 							onClick={() => setScreen('new')}
-							className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'>
+							className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'
+						>
 							<div className='flex flex-col justify-around lg:justify-between'>
 								<div className='flex flex-col gap-1'>
 									<p className='font-semibold'>+ New RAG Tool</p>
@@ -76,7 +77,8 @@ export const Initial = ({
 						</div>
 						<div
 							onClick={() => setScreen('custom')}
-							className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'>
+							className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'
+						>
 							<div className='flex flex-col justify-around lg:justify-between'>
 								<div className='flex flex-col gap-1'>
 									<p className='font-semibold'>+ Custom Code Tool</p>
@@ -90,7 +92,8 @@ export const Initial = ({
 						{tools.map((tool, index) => (
 							<div
 								key={index}
-								className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'>
+								className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'
+							>
 								{!tool.isInstalled && <Box color='#2F2A89' width={40} className='mt-3 lg:mt-1' />}
 								<div className='flex flex-col justify-around lg:justify-between'>
 									<div className='flex flex-col gap-1'>
@@ -105,7 +108,8 @@ export const Initial = ({
 												style={{
 													color: tag.textColor,
 													backgroundColor: tag.backgroundColor
-												}}>
+												}}
+											>
 												{tag.name}
 											</p>
 										))}
@@ -116,7 +120,8 @@ export const Initial = ({
 												onClick={() => {
 													setSelectedTool(tool);
 													setScreen('tool');
-												}}>
+												}}
+											>
 												Install
 											</Button>
 										)}
@@ -138,7 +143,8 @@ export const Initial = ({
 							{tools.map((tool, index) => (
 								<div
 									key={index}
-									className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'>
+									className='w-full h-[200px] sm:w-[272px] h-[170px] border border-gray-200 p-4 gap-2 shadow-sm hover:shadow-md transition flex cursor-pointer'
+								>
 									{!tool.isInstalled && <Box color='#2F2A89' width={40} className='mt-3 lg:mt-1' />}
 									<div className='flex flex-col justify-around lg:justify-between'>
 										<div className='flex flex-col gap-1'>
@@ -153,7 +159,8 @@ export const Initial = ({
 													style={{
 														color: tag.textColor,
 														backgroundColor: tag.backgroundColor
-													}}>
+													}}
+												>
 													{tag.name}
 												</p>
 											))}
@@ -161,7 +168,8 @@ export const Initial = ({
 												<Button
 													variant='outline'
 													className='text-xs'
-													onClick={() => setSelectedTool(tool)}>
+													onClick={() => setSelectedTool(tool)}
+												>
 													Install
 												</Button>
 											)}
diff --git a/webapp/src/components/tools/toolsdialogscreens/Install.tsx b/webapp/src/components/tools/toolsdialogscreens/Install.tsx
index 47015734a..2a082b9f4 100644
--- a/webapp/src/components/tools/toolsdialogscreens/Install.tsx
+++ b/webapp/src/components/tools/toolsdialogscreens/Install.tsx
@@ -45,7 +45,8 @@ export const Install = ({
 						setScreen('initial');
 					}
 					setActiveTab('my-tools');
-				}}>
+				}}
+			>
 				{type === 'page' ? 'Go to My Tools' : 'Add Tool to Agent'}
 			</Button>
 		</section>
diff --git a/webapp/src/components/tools/toolsdialogscreens/Tool.tsx b/webapp/src/components/tools/toolsdialogscreens/Tool.tsx
index 3b23847fc..59f994eb8 100644
--- a/webapp/src/components/tools/toolsdialogscreens/Tool.tsx
+++ b/webapp/src/components/tools/toolsdialogscreens/Tool.tsx
@@ -158,7 +158,8 @@ export const ToolDisplay = ({
 					setScreen('initial');
 					setSelectedTool(null);
 				}}
-				className='flex items-center gap-2 text-gray-500 text-sm cursor-pointer'>
+				className='flex items-center gap-2 text-gray-500 text-sm cursor-pointer'
+			>
 				<CircleChevronLeft width={15} />
 				<p>Back to list</p>
 			</article>
@@ -236,7 +237,8 @@ export const ToolDisplay = ({
 				<div className='flex w-full justify-between items-center border-t border-gray-200 py-4'>
 					<Button
 						onClick={handleCloseDialog}
-						className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'>
+						className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground'
+					>
 						Cancel
 					</Button>
 					<Button
@@ -244,7 +246,8 @@ export const ToolDisplay = ({
 							await toolPost();
 							setDialogScreen('installed');
 						}}
-						className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+						className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+					>
 						Save
 					</Button>
 				</div>
diff --git a/webapp/src/components/variables/VariableForm.tsx b/webapp/src/components/variables/VariableForm.tsx
index 8145db1ee..6a8a0526f 100644
--- a/webapp/src/components/variables/VariableForm.tsx
+++ b/webapp/src/components/variables/VariableForm.tsx
@@ -81,13 +81,15 @@ export default function VariableForm({
 					e.preventDefault();
 					e.stopPropagation();
 					return handleSubmit(onSubmit)(e);
-				}}>
+				}}
+			>
 				<input type='hidden' name='_csrf' value={csrf} />
 				<div className='space-y-6'>
 					<div>
 						<label
 							htmlFor='name'
-							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+						>
 							Name<span className='text-red-700'> *</span>
 						</label>
 						<Input
@@ -109,7 +111,8 @@ export default function VariableForm({
 					<div>
 						<label
 							htmlFor='description'
-							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+						>
 							Description
 						</label>
 						<Textarea
@@ -123,7 +126,8 @@ export default function VariableForm({
 					<div>
 						<label
 							htmlFor='defaultValue'
-							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'>
+							className='block text-sm font-medium leading-6 text-gray-900 dark:text-slate-400'
+						>
 							Default Value<span className='text-red-700'> *</span>
 						</label>
 						<Input
@@ -142,12 +146,14 @@ export default function VariableForm({
 								router.push(`/${resourceSlug}/variables`);
 							}}
 							type='button'
-							variant='outline'>
+							variant='outline'
+						>
 							Cancel
 						</Button>
 						<Button
 							type='submit'
-							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
+							className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+						>
 							{editing ? 'Update Variable' : 'Save'}
 						</Button>
 					</div>
diff --git a/webapp/src/modules/components/multi-select-dialog.tsx b/webapp/src/modules/components/multi-select-dialog.tsx
index 0f1accf41..069d70aff 100644
--- a/webapp/src/modules/components/multi-select-dialog.tsx
+++ b/webapp/src/modules/components/multi-select-dialog.tsx
@@ -183,7 +183,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 						className={cn(
 							'flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto',
 							className
-						)}>
+						)}
+					>
 						{selectedValues?.length > 0 ? (
 							<div className='flex justify-between items-center w-full'>
 								<div className='flex flex-wrap items-center'>
@@ -197,7 +198,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 													isAnimating ? 'animate-bounce' : '',
 													multiSelectVariants({ variant })
 												)}
-												style={{ animationDuration: `${animation}s` }}>
+												style={{ animationDuration: `${animation}s` }}
+											>
 												{IconComponent && <IconComponent className='h-4 w-4 mr-2' />}
 												{option?.label}
 												<XCircle
@@ -217,7 +219,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 												isAnimating ? 'animate-bounce' : '',
 												multiSelectVariants({ variant })
 											)}
-											style={{ animationDuration: `${animation}s` }}>
+											style={{ animationDuration: `${animation}s` }}
+										>
 											{`+ ${selectedValues?.length - maxCount} more`}
 											<XCircle
 												className='ml-2 h-4 w-4 cursor-pointer'
@@ -255,7 +258,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 				<PopoverContentDialog
 					className='p-0 min-w-[var(--radix-popover-trigger-width)] w-full pointer-events-auto'
 					align='start'
-					onEscapeKeyDown={() => setIsPopoverOpen(false)}>
+					onEscapeKeyDown={() => setIsPopoverOpen(false)}
+				>
 					<Command>
 						<div className='flex items-center justify-between'>
 							<CommandInput placeholder='Search...' onKeyDown={handleInputKeyDown} />
@@ -263,7 +267,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 								<Button
 									asChild
 									variant='ghost'
-									className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'>
+									className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'
+								>
 									<div className='flex items-center gap-1 text-gray-500 text-xs px-2'>
 										<Expand width={10} />
 										<p>More tools</p>
@@ -282,7 +287,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 											selectedValues?.length === options.length
 												? 'bg-primary text-primary-foreground'
 												: 'opacity-50 [&_svg]:invisible'
-										)}>
+										)}
+									>
 										<CheckIcon className='h-4 w-4' />
 									</div>
 									<span>(Select All)</span>
@@ -293,14 +299,16 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 										<CommandItem
 											key={option.value}
 											onSelect={() => toggleOption(option.value)}
-											className='cursor-pointer'>
+											className='cursor-pointer'
+										>
 											<div
 												className={cn(
 													'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
 													isSelected
 														? 'bg-primary text-primary-foreground'
 														: 'opacity-50 [&_svg]:invisible'
-												)}>
+												)}
+											>
 												<CheckIcon className='h-4 w-4' />
 											</div>
 											{option.icon && (
@@ -318,7 +326,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 										<>
 											<CommandItem
 												onSelect={handleClear}
-												className='flex-1 justify-center cursor-pointer'>
+												className='flex-1 justify-center cursor-pointer'
+											>
 												Clear
 											</CommandItem>
 											<Separator orientation='vertical' className='flex min-h-6 h-full' />
@@ -326,7 +335,8 @@ export const MultiSelectWithDialog = React.forwardRef<HTMLButtonElement, MultiSe
 									)}
 									<CommandItem
 										onSelect={() => setIsPopoverOpen(false)}
-										className='flex-1 justify-center cursor-pointer max-w-full'>
+										className='flex-1 justify-center cursor-pointer max-w-full'
+									>
 										Close
 									</CommandItem>
 								</div>
diff --git a/webapp/src/modules/components/multi-select.tsx b/webapp/src/modules/components/multi-select.tsx
index d992e491e..ba0b23a29 100644
--- a/webapp/src/modules/components/multi-select.tsx
+++ b/webapp/src/modules/components/multi-select.tsx
@@ -45,7 +45,7 @@ const multiSelectVariants = cva(
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+	extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>,
 		VariantProps<typeof multiSelectVariants> {
 	/**
 	 * An array of option objects to be displayed in the multi-select component.
@@ -218,7 +218,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
 							'flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto',
 							className
 						)}>
-							{hasSelection ? (
+						{hasSelection ? (
 							<div className='flex justify-between items-center w-full'>
 								<div className='flex flex-wrap items-center'>
 									{selectedValues?.slice(0, maxCount).map(value => {
diff --git a/webapp/src/modules/components/stepper.tsx b/webapp/src/modules/components/stepper.tsx
index 30fc4446f..bfc97f9fb 100644
--- a/webapp/src/modules/components/stepper.tsx
+++ b/webapp/src/modules/components/stepper.tsx
@@ -20,12 +20,14 @@ export function Stepper({ steps, currentStep }: StepperProps) {
 					className={cn(
 						'flex items-center py-4',
 						index + 1 === currentStep ? 'text-blue-500' : 'text-gray-500'
-					)}>
+					)}
+				>
 					<div
 						className={cn(
 							'flex items-center justify-center w-8 h-8 rounded-full border-2',
 							index + 1 === currentStep ? 'border-blue-500 bg-blue-100' : 'border-gray-300'
-						)}>
+						)}
+					>
 						{index + 1}
 					</div>
 					<span className='ml-4 font-medium'>{step.stepName}</span>
diff --git a/webapp/src/modules/components/ui/checkbox.tsx b/webapp/src/modules/components/ui/checkbox.tsx
index 829561cc1..5dc5639eb 100644
--- a/webapp/src/modules/components/ui/checkbox.tsx
+++ b/webapp/src/modules/components/ui/checkbox.tsx
@@ -13,7 +13,8 @@ const Checkbox = React.forwardRef<
 			'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
 			className
 		)}
-		{...props}>
+		{...props}
+	>
 		<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
 			<Check className='h-4 w-4' />
 		</CheckboxPrimitive.Indicator>
diff --git a/webapp/src/modules/components/ui/command.tsx b/webapp/src/modules/components/ui/command.tsx
index c41475bcf..8d192894c 100644
--- a/webapp/src/modules/components/ui/command.tsx
+++ b/webapp/src/modules/components/ui/command.tsx
@@ -36,7 +36,6 @@ const CommandInput = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Input>,
 	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-	// eslint-disable-next-line react/no-unknown-property
 	<div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
 		<Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />
 		<CommandPrimitive.Input
diff --git a/webapp/src/modules/components/ui/dialog.tsx b/webapp/src/modules/components/ui/dialog.tsx
index d9252fa38..67fd4a2e5 100644
--- a/webapp/src/modules/components/ui/dialog.tsx
+++ b/webapp/src/modules/components/ui/dialog.tsx
@@ -36,11 +36,11 @@ const DialogContent = React.forwardRef<
 		<DialogOverlay />
 		<DialogPrimitive.Content
 			ref={ref}
-			onCloseAutoFocus={(event) => {
+			onCloseAutoFocus={event => {
 				event.preventDefault();
 				document.body.style.pointerEvents = 'auto';
 			}}
-			onPointerDownOutside={(event) => {
+			onPointerDownOutside={event => {
 				event.preventDefault();
 				document.body.style.pointerEvents = 'auto';
 			}}
@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close 
+			<DialogPrimitive.Close
 				className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'
 				onClick={() => {
 					document.body.style.pointerEvents = 'auto';
diff --git a/webapp/src/modules/components/ui/dropdown-menu.tsx b/webapp/src/modules/components/ui/dropdown-menu.tsx
index 4282003da..2b256b558 100644
--- a/webapp/src/modules/components/ui/dropdown-menu.tsx
+++ b/webapp/src/modules/components/ui/dropdown-menu.tsx
@@ -28,7 +28,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
 			inset && 'pl-8',
 			className
 		)}
-		{...props}>
+		{...props}
+	>
 		{children}
 		<ChevronRight className='ml-auto' />
 	</DropdownMenuPrimitive.SubTrigger>
@@ -98,7 +99,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 			className
 		)}
 		checked={checked}
-		{...props}>
+		{...props}
+	>
 		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<DropdownMenuPrimitive.ItemIndicator>
 				<Check className='h-4 w-4' />
@@ -119,7 +121,8 @@ const DropdownMenuRadioItem = React.forwardRef<
 			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			className
 		)}
-		{...props}>
+		{...props}
+	>
 		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<DropdownMenuPrimitive.ItemIndicator>
 				<Circle className='h-2 w-2 fill-current' />
diff --git a/webapp/src/modules/components/ui/select.tsx b/webapp/src/modules/components/ui/select.tsx
index 94fb9af2e..0477d3d15 100644
--- a/webapp/src/modules/components/ui/select.tsx
+++ b/webapp/src/modules/components/ui/select.tsx
@@ -19,7 +19,8 @@ const SelectTrigger = React.forwardRef<
 			'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-gray-900',
 			className
 		)}
-		{...props}>
+		{...props}
+	>
 		{children}
 		<SelectPrimitive.Icon asChild>
 			<ChevronDown className='h-4 w-4 opacity-50' />
@@ -35,7 +36,8 @@ const SelectScrollUpButton = React.forwardRef<
 	<SelectPrimitive.ScrollUpButton
 		ref={ref}
 		className={cn('flex cursor-default items-center justify-center py-1', className)}
-		{...props}>
+		{...props}
+	>
 		<ChevronUp className='h-4 w-4' />
 	</SelectPrimitive.ScrollUpButton>
 ));
@@ -48,7 +50,8 @@ const SelectScrollDownButton = React.forwardRef<
 	<SelectPrimitive.ScrollDownButton
 		ref={ref}
 		className={cn('flex cursor-default items-center justify-center py-1', className)}
-		{...props}>
+		{...props}
+	>
 		<ChevronDown className='h-4 w-4' />
 	</SelectPrimitive.ScrollDownButton>
 ));
@@ -68,14 +71,16 @@ const SelectContent = React.forwardRef<
 				className
 			)}
 			position={position}
-			{...props}>
+			{...props}
+		>
 			<SelectScrollUpButton />
 			<SelectPrimitive.Viewport
 				className={cn(
 					'p-1',
 					position === 'popper' &&
 						'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-				)}>
+				)}
+			>
 				{children}
 			</SelectPrimitive.Viewport>
 			<SelectScrollDownButton />
@@ -106,7 +111,8 @@ const SelectItem = React.forwardRef<
 			'relative flex w-full select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer',
 			className
 		)}
-		{...props}>
+		{...props}
+	>
 		<span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<SelectPrimitive.ItemIndicator>
 				<Check className='h-4 w-4' />
diff --git a/webapp/src/modules/components/ui/sheet.tsx b/webapp/src/modules/components/ui/sheet.tsx
index 5e30b5a15..c07cbf7db 100644
--- a/webapp/src/modules/components/ui/sheet.tsx
+++ b/webapp/src/modules/components/ui/sheet.tsx
@@ -61,7 +61,8 @@ const SheetContent = React.forwardRef<
 		<SheetPrimitive.Content
 			ref={ref}
 			className={cn(sheetVariants({ side }), 'pointer-events-auto', className)}
-			{...props}>
+			{...props}
+		>
 			<SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
 				<X className='h-4 w-4' />
 				<span className='sr-only'>Close</span>
diff --git a/webapp/src/modules/components/ui/sidebar.tsx b/webapp/src/modules/components/ui/sidebar.tsx
index f49695e7a..9926f9367 100644
--- a/webapp/src/modules/components/ui/sidebar.tsx
+++ b/webapp/src/modules/components/ui/sidebar.tsx
@@ -137,8 +137,7 @@ const SidebarProvider = React.forwardRef<
 							className
 						)}
 						ref={ref}
-						{...props}
-					>
+						{...props}>
 						{children}
 					</div>
 				</TooltipProvider>
@@ -177,8 +176,7 @@ const Sidebar = React.forwardRef<
 						className
 					)}
 					ref={ref}
-					{...props}
-				>
+					{...props}>
 					{children}
 				</div>
 			);
@@ -196,8 +194,7 @@ const Sidebar = React.forwardRef<
 								'--sidebar-width': SIDEBAR_WIDTH_MOBILE
 							} as React.CSSProperties
 						}
-						side={side}
-					>
+						side={side}>
 						<div className='flex h-full w-full flex-col'>{children}</div>
 					</SheetContent>
 				</Sheet>
@@ -211,8 +208,7 @@ const Sidebar = React.forwardRef<
 				data-state={state}
 				data-collapsible={state === 'collapsed' ? collapsible : ''}
 				data-variant={variant}
-				data-side={side}
-			>
+				data-side={side}>
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
@@ -236,12 +232,10 @@ const Sidebar = React.forwardRef<
 							: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
 						className
 					)}
-					{...props}
-				>
+					{...props}>
 					<div
 						data-sidebar='sidebar'
-						className='flex h-full w-full flex-col bg-gradient-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow'
-					>
+						className='flex h-full w-full flex-col bg-gradient-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow'>
 						{children}
 					</div>
 				</div>
@@ -268,8 +262,7 @@ const SidebarTrigger = React.forwardRef<
 				onClick?.(event);
 				toggleSidebar();
 			}}
-			{...props}
-		>
+			{...props}>
 			<PanelLeft />
 			<span className='sr-only'>Toggle Sidebar</span>
 		</Button>
@@ -422,6 +415,7 @@ const SidebarGroupLabel = React.forwardRef<
 
 	return (
 		<Comp
+			//@ts-ignore
 			ref={ref}
 			data-sidebar='group-label'
 			className={cn(
@@ -443,6 +437,7 @@ const SidebarGroupAction = React.forwardRef<
 
 	return (
 		<Comp
+			//@ts-ignore
 			ref={ref}
 			data-sidebar='group-action'
 			className={cn(
@@ -541,6 +536,7 @@ const SidebarMenuButton = React.forwardRef<
 
 		const button = (
 			<Comp
+				//@ts-ignore
 				ref={ref}
 				data-sidebar='menu-button'
 				data-size={size}
@@ -586,6 +582,7 @@ const SidebarMenuAction = React.forwardRef<
 
 	return (
 		<Comp
+			//@ts-ignore
 			ref={ref}
 			data-sidebar='menu-action'
 			className={cn(
@@ -642,8 +639,7 @@ const SidebarMenuSkeleton = React.forwardRef<
 			ref={ref}
 			data-sidebar='menu-skeleton'
 			className={cn('rounded-md h-8 flex gap-2 px-2 items-center', className)}
-			{...props}
-		>
+			{...props}>
 			{showIcon && <Skeleton className='size-4 rounded-md' data-sidebar='menu-skeleton-icon' />}
 			<Skeleton
 				className='h-4 flex-1 max-w-[--skeleton-width]'
@@ -692,6 +688,7 @@ const SidebarMenuSubButton = React.forwardRef<
 
 	return (
 		<Comp
+			//@ts-ignore
 			ref={ref}
 			data-sidebar='menu-sub-button'
 			data-size={size}
diff --git a/webapp/src/pages/[resourceSlug]/agents.tsx b/webapp/src/pages/[resourceSlug]/agents.tsx
index 1ced06846..f636f7785 100644
--- a/webapp/src/pages/[resourceSlug]/agents.tsx
+++ b/webapp/src/pages/[resourceSlug]/agents.tsx
@@ -53,6 +53,7 @@ export default function Agents(props) {
 
 			{agents.length === 0 && (
 				<NewButtonSection
+					setOpen={() => {}}
 					link={`/${resourceSlug}/agent/add`}
 					emptyMessage={'No agents'}
 					icon={
diff --git a/webapp/src/pages/[resourceSlug]/agents2.tsx b/webapp/src/pages/[resourceSlug]/agents2.tsx
index 1c3fd1093..4d513962f 100644
--- a/webapp/src/pages/[resourceSlug]/agents2.tsx
+++ b/webapp/src/pages/[resourceSlug]/agents2.tsx
@@ -39,6 +39,8 @@ export default function Agents(props) {
 			</Head>
 
 			<PageTitleWithNewButton
+				searchQuery=''
+				setSearchQuery={() => {}}
 				list={filteredAgents}
 				title='Agents'
 				buttonText='New Agent'
@@ -47,6 +49,7 @@ export default function Agents(props) {
 
 			{agents.length === 0 && (
 				<NewButtonSection
+					setOpen={() => {}}
 					link={`/${resourceSlug}/agent/add`}
 					emptyMessage={'No agents'}
 					icon={
diff --git a/webapp/src/pages/[resourceSlug]/app/add.tsx b/webapp/src/pages/[resourceSlug]/app/add.tsx
index 58cfba546..014ad439b 100644
--- a/webapp/src/pages/[resourceSlug]/app/add.tsx
+++ b/webapp/src/pages/[resourceSlug]/app/add.tsx
@@ -142,7 +142,8 @@ export default function AddApp(props: AppsDataReturnType) {
 
 									<Button
 										className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white rounded-lg mt-2 md:mt-0'
-										onClick={handleCreateChatApp}>
+										onClick={handleCreateChatApp}
+									>
 										+ Create
 									</Button>
 								</div>
@@ -179,7 +180,8 @@ export default function AddApp(props: AppsDataReturnType) {
 
 									<Button
 										className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white rounded-lg mt-2 md:mt-0'
-										onClick={handleCreateProcessApp}>
+										onClick={handleCreateProcessApp}
+									>
 										+ Create
 									</Button>
 								</div>
diff --git a/webapp/src/pages/[resourceSlug]/app/add2.tsx b/webapp/src/pages/[resourceSlug]/app/add2.tsx
index 5b5fc8ba6..013422645 100644
--- a/webapp/src/pages/[resourceSlug]/app/add2.tsx
+++ b/webapp/src/pages/[resourceSlug]/app/add2.tsx
@@ -175,8 +175,7 @@ export default function Apps(props: AppsDataReturnType) {
 											)}
 											<button
 												onClick={() => setIsEditing(!isEditing)}
-												className='hover:text-[#4F46E5] transition-colors'
-											>
+												className='hover:text-[#4F46E5] transition-colors'>
 												<Pencil width={20} />
 											</button>
 										</div>
@@ -195,14 +194,27 @@ export default function Apps(props: AppsDataReturnType) {
 
 							{agentDisplay ? (
 								<AgentCreatedDisplay
-									setAgentDisplay={setAgentDisplay}
+									// setAgentDisplay={setAgentDisplay}
 									setOpenEditSheet={setOpenEditSheet}
+									setSelectedAgent={() => {}}
+									openEditSheet={openEditSheet}
+									selectedAgent={null}
+									selectedAgentModel={null}
+									selectedAgentTools={[]}
+									onChangeAgent={() => {}}
+									isUpdating={false}
 								/>
 							) : agents.length > 0 ? (
-								<AgentSelectDisplay setAgentDisplay={setAgentDisplay} />
+								<AgentSelectDisplay
+									// setAgentDisplay={setAgentDisplay}
+									setOpenEditSheet={setOpenEditSheet}
+									setSelectedAgent={() => {}}
+									agentChoices={agents}
+									toolChoices={[]}
+								/>
 							) : (
 								<CreateAgentSheet
-									setAgentDisplay={setAgentDisplay}
+									// setAgentDisplay={setAgentDisplay}
 									openEditSheet={openEditSheet}
 									setOpenEditSheet={setOpenEditSheet}
 								/>
@@ -213,8 +225,7 @@ export default function Apps(props: AppsDataReturnType) {
 									<div key={starter.id} className='flex items-center gap-2'>
 										<div
 											className='bg-gray-50 px-4 py-3 w-full border border-gray-300 rounded-lg'
-											onClick={() => setEditingStarterId(starter.id)}
-										>
+											onClick={() => setEditingStarterId(starter.id)}>
 											{editingStarterId === starter.id ? (
 												<input
 													type='text'
@@ -251,8 +262,7 @@ export default function Apps(props: AppsDataReturnType) {
 								))}
 								<p
 									className='text-[#4F46E5] cursor-pointer self-end hover:text-[#3730a3]'
-									onClick={handleAddStarter}
-								>
+									onClick={handleAddStarter}>
 									+ Add
 								</p>
 							</div>
@@ -271,15 +281,13 @@ export default function Apps(props: AppsDataReturnType) {
 						<article className='flex items-center justify-between px-3 py-3 border-t border-gray-200'>
 							<Button
 								variant='ghost'
-								className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'
-							>
+								className='bg-transparent text-foreground hover:bg-transparent hover:text-foreground p-0 border-0 shadow-none outline-none'>
 								Cancel
 							</Button>
 							<Button
 								onClick={() => setHasLaunched(true)}
 								variant='ghost'
-								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'
-							>
+								className='bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white font-medium text-sm py-2 hover:text-white'>
 								Launch &gt;
 							</Button>
 						</article>
diff --git a/webapp/src/pages/[resourceSlug]/apps.tsx b/webapp/src/pages/[resourceSlug]/apps.tsx
index df5dc2546..1cd66e560 100644
--- a/webapp/src/pages/[resourceSlug]/apps.tsx
+++ b/webapp/src/pages/[resourceSlug]/apps.tsx
@@ -41,7 +41,9 @@ import { App, AppType } from 'struct/app';
 import { SharingMode } from 'struct/sharing';
 import { toast } from 'react-toastify';
 import ChatAppForm2 from 'components/ChatAppForm2';
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "modules/components/ui/sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from 'modules/components/ui/sheet';
+import { Model } from 'db/model';
+import { Agent } from 'struct/agent';
 
 const DeleteDialog = ({
 	openDeleteDialog,
@@ -53,13 +55,15 @@ const DeleteDialog = ({
 	onDelete: () => void;
 }) => {
 	return (
-		<Dialog open={openDeleteDialog} onOpenChange={(open) => {
-			setOpenDeleteDialog(open);
-			// Reset pointer events when dialog closes
-			if (!open) {
-				document.body.style.pointerEvents = 'auto';
-			}
-		}}>
+		<Dialog
+			open={openDeleteDialog}
+			onOpenChange={open => {
+				setOpenDeleteDialog(open);
+				// Reset pointer events when dialog closes
+				if (!open) {
+					document.body.style.pointerEvents = 'auto';
+				}
+			}}>
 			<DialogContent className='w-[95%] lg:w-fit rounded-lg'>
 				<DialogHeader>
 					<DialogTitle className='flex flex-col gap-4 items-center'>
@@ -72,26 +76,22 @@ const DeleteDialog = ({
 						<p className='font-semibold text-red-800'>Are you sure?</p>
 					</DialogTitle>
 					<DialogDescription className='flex flex-col items-center text-center'>
-						<p>
-							Are you sure you want to delete this app? This action cannot be undone.
-						</p>
+						<p>Are you sure you want to delete this app? This action cannot be undone.</p>
 					</DialogDescription>
 				</DialogHeader>
 				<DialogFooter className='flex items-center justify-center gap-6 mx-auto mt-4'>
-					<Button 
-						variant="secondary"
-						onClick={() => setOpenDeleteDialog(false)} 
-						className='bg-background text-foreground hover:bg-background'
-					>
+					<Button
+						variant='secondary'
+						onClick={() => setOpenDeleteDialog(false)}
+						className='bg-background text-foreground hover:bg-background'>
 						Cancel
 					</Button>
-					<Button 
+					<Button
 						onClick={() => {
 							onDelete();
 							setOpenDeleteDialog(false);
-						}} 
-						className='bg-red-700 text-white hover:bg-red-800'
-					>
+						}}
+						className='bg-red-700 text-white hover:bg-red-800'>
 						Delete app
 					</Button>
 				</DialogFooter>
@@ -100,16 +100,16 @@ const DeleteDialog = ({
 	);
 };
 
-const EditAppSheet = ({ 
-	open, 
-	setOpen, 
+const EditAppSheet = ({
+	open,
+	setOpen,
 	selectedApp,
 	onAppUpdate,
 	toolChoices,
 	modelChoices,
 	agentChoices,
-	fetchFormData  // Add this prop
-}: { 
+	fetchFormData // Add this prop
+}: {
 	open: boolean;
 	setOpen: (open: boolean) => void;
 	selectedApp: App;
@@ -117,7 +117,7 @@ const EditAppSheet = ({
 	toolChoices: any[];
 	modelChoices: any[];
 	agentChoices: any[];
-	fetchFormData: () => Promise<void>;  // Add this type
+	fetchFormData: () => Promise<void>; // Add this type
 }) => {
 	// Add default values for missing properties
 	const enrichedApp = {
@@ -131,19 +131,16 @@ const EditAppSheet = ({
 			mode: selectedApp?.sharingConfig?.mode || SharingMode.TEAM,
 			permissions: selectedApp?.sharingConfig?.permissions || {}
 		},
-		conversationStarters: selectedApp?.conversationStarters || [
-			'Help me brainstorm some ideas',
-			'What can you help me with?'
-		],
+		conversationStarters: ['Help me brainstorm some ideas', 'What can you help me with?'],
 		description: selectedApp?.description || '',
 		name: selectedApp?.name || 'Untitled Chat App',
-		type: selectedApp?.type || AppType.CHAT,
+		type: selectedApp?.type || AppType.CHAT
 	};
 
 	return (
-		<Sheet 
-			open={open} 
-			onOpenChange={(open) => {
+		<Sheet
+			open={open}
+			onOpenChange={open => {
 				if (!open) {
 					// Force a slight delay before resetting pointer events
 					setTimeout(() => {
@@ -152,17 +149,15 @@ const EditAppSheet = ({
 					}, 100);
 				}
 				setOpen(open);
-			}}
-		>
-			<SheetContent 
-				className="w-full overflow-auto max-w-3xl"
+			}}>
+			<SheetContent
+				className='w-full overflow-auto max-w-3xl'
 				// Add pointer-events override for sheet content
-				style={{ pointerEvents: 'auto' }}
-			>
+				style={{ pointerEvents: 'auto' }}>
 				<SheetHeader>
 					<SheetTitle>Edit App</SheetTitle>
 				</SheetHeader>
-				<div className="mt-4">
+				<div className='mt-4'>
 					<ChatAppForm2
 						fetchFormData={fetchFormData}
 						app={enrichedApp}
@@ -171,12 +166,10 @@ const EditAppSheet = ({
 							setOpen(false);
 							onAppUpdate();
 						}}
-						toolChoices={toolChoices}  // Pass these from parent if available
+						toolChoices={toolChoices} // Pass these from parent if available
 						modelChoices={modelChoices} // Pass these from parent if available
 						agentChoices={agentChoices} // Pass these from parent if available
-						whiteListSharingChoices={
-							Object.values(enrichedApp.sharingConfig.permissions || {})
-						}
+						whiteListSharingChoices={Object.values(enrichedApp.sharingConfig.permissions || {})}
 					/>
 				</div>
 			</SheetContent>
@@ -215,9 +208,9 @@ export default function Apps(props) {
 		try {
 			// Add your API calls here to fetch tools, models, and agents
 			const [toolsRes, modelsRes, agentsRes] = await Promise.all([
-				API.getTools({ resourceSlug, _csrf: csrf }),
-				API.getModels({ resourceSlug, _csrf: csrf }),
-				API.getAgents({ resourceSlug, _csrf: csrf })
+				API.getTools({ resourceSlug, _csrf: csrf }, dispatch, setError, router),
+				API.getModels({ resourceSlug, _csrf: csrf }, dispatch, setError, router),
+				API.getAgents({ resourceSlug, _csrf: csrf }, dispatch, setError, router)
 			]);
 
 			// Ensure we're setting arrays even if the response is null/undefined
@@ -258,7 +251,7 @@ export default function Apps(props) {
 
 	async function deleteApp(appId) {
 		if (!appId) return;
-		
+
 		await API.deleteApp(
 			{
 				_csrf: csrf,
@@ -270,7 +263,7 @@ export default function Apps(props) {
 				toast.success('App deleted successfully');
 				setSelectedAgentId(null);
 			},
-			(error) => {
+			error => {
 				toast.error(error || 'Error deleting app');
 				setSelectedAgentId(null);
 			},
@@ -314,17 +307,21 @@ export default function Apps(props) {
 
 	return (
 		<>
-			<DeleteDialog openDeleteDialog={openDeleteDialog} setOpenDeleteDialog={setOpenDeleteDialog} onDelete={() => deleteApp(selectedAgentId)}/>
-				<EditAppSheet
-					open={openEditSheet}
-					setOpen={setOpenEditSheet}
-					selectedApp={selectedApp}
-					onAppUpdate={fetchApps}
-					toolChoices={toolChoices}
-					modelChoices={modelChoices}
-					agentChoices={agentChoices}
-					fetchFormData={fetchFormData}  // Add this prop
-				/>
+			<DeleteDialog
+				openDeleteDialog={openDeleteDialog}
+				setOpenDeleteDialog={setOpenDeleteDialog}
+				onDelete={() => deleteApp(selectedAgentId)}
+			/>
+			<EditAppSheet
+				open={openEditSheet}
+				setOpen={setOpenEditSheet}
+				selectedApp={selectedApp}
+				onAppUpdate={fetchApps}
+				toolChoices={toolChoices}
+				modelChoices={modelChoices}
+				agentChoices={agentChoices}
+				fetchFormData={fetchFormData} // Add this prop
+			/>
 			<main className='text-foreground flex flex-col gap-2'>
 				<section className='flex items-center justify-between mb-4'>
 					<h4 className='text-gray-900 font-semibold text-2xl'>Apps</h4>
@@ -349,7 +346,7 @@ export default function Apps(props) {
 				</section>
 				{agents.length <= 0 ? (
 					<CreateAgentSheet
-						setAgentDisplay={setAgentDisplay}
+						// setAgentDisplay={setAgentDisplay}
 						openEditSheet={openEditSheet}
 						setOpenEditSheet={setOpenEditSheet}
 					/>
@@ -374,20 +371,19 @@ export default function Apps(props) {
 															)}
 														</div>
 													</div>
-													<div className="flex flex-col place-items-end">
+													<div className='flex flex-col place-items-end'>
 														<DropdownMenu>
 															<DropdownMenuTrigger>
 																<Ellipsis />
 															</DropdownMenuTrigger>
 															<DropdownMenuContent align='end'>
-																<DropdownMenuItem 
-																	onClick={() => handleOpenEditSheet(app)}>
+																<DropdownMenuItem onClick={() => handleOpenEditSheet(app)}>
 																	Edit
 																</DropdownMenuItem>
 																<DropdownMenuItem
 																	className='text-red-600'
 																	onClick={() => {
-																		setSelectedAgentId(app._id);
+																		setSelectedAgentId(app._id.toString());
 																		setOpenDeleteDialog(true);
 																	}}>
 																	Delete
@@ -424,8 +420,7 @@ export default function Apps(props) {
 									</CardFooter>
 								</Card>
 							);
-						}
-						)}
+						})}
 					</section>
 				)}
 			</main>
diff --git a/webapp/src/pages/[resourceSlug]/apps_bak.tsx b/webapp/src/pages/[resourceSlug]/apps_bak.tsx
deleted file mode 100644
index 2f3dcd87b..000000000
--- a/webapp/src/pages/[resourceSlug]/apps_bak.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as API from '@api';
-import { PlusIcon } from '@heroicons/react/20/solid';
-import AppCard from 'components/AppCard';
-import ErrorAlert from 'components/ErrorAlert';
-import NewButtonSection from 'components/NewButtonSection';
-import PageTitleWithNewButton from 'components/PageTitleWithNewButton';
-import Spinner from 'components/Spinner';
-import { useAccountContext } from 'context/account';
-import { AppsDataReturnType } from 'controllers/app';
-import { Button } from 'modules/components/ui/button';
-import { ObjectId } from 'mongodb';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
-import { App } from 'struct/app';
-
-export default function Apps(props) {
-	const [accountContext, refreshAccountContext]: any = useAccountContext();
-	const { teamName, csrf } = accountContext as any;
-	const router = useRouter();
-	const { resourceSlug } = router.query;
-	const [state, dispatch] = useState<AppsDataReturnType>(props);
-	const [error, setError] = useState();
-	const { apps } = state;
-	const filteredApps = apps?.filter(x => !x.hidden);
-
-	async function startSession(appId: ObjectId) {
-		await API.addSession(
-			{
-				_csrf: csrf,
-				resourceSlug,
-				id: appId
-			},
-			null,
-			setError,
-			router
-		);
-	}
-
-	async function fetchApps() {
-		await API.getApps({ resourceSlug }, dispatch, setError, router);
-	}
-
-	useEffect(() => {
-		fetchApps();
-		refreshAccountContext();
-	}, [resourceSlug]);
-
-	if (!apps) {
-		return <Spinner />;
-	}
-
-	return (
-		<>
-			<Head>
-				<title>{`Apps - ${teamName}`}</title>
-			</Head>
-
-			<PageTitleWithNewButton
-				list={filteredApps}
-				title='Apps'
-				buttonText='New App'
-				href='/app/add'
-			/>
-
-			{error && <ErrorAlert error={error} />}
-
-			{apps.length === 0 && (
-				<NewButtonSection
-					link={`/${resourceSlug}/app/add`}
-					emptyMessage={'No apps'}
-					icon={
-						<svg
-							className='mx-auto h-12 w-12 text-gray-400'
-							fill='none'
-							viewBox='0 0 24 24'
-							stroke='currentColor'
-							aria-hidden='true'>
-							<svg
-								xmlns='http://www.w3.org/2000/svg'
-								fill='none'
-								viewBox='0 0 24 24'
-								strokeWidth={1.5}
-								stroke='currentColor'
-								className='w-6 h-6'>
-								<path
-									strokeLinecap='round'
-									strokeLinejoin='round'
-									d='M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z'
-								/>
-							</svg>
-						</svg>
-					}
-					message={'Get started by creating an app.'}
-					buttonIcon={<PlusIcon className='-ml-0.5 mr-1.5 h-5 w-5' aria-hidden='true' />}
-					buttonMessage={'New App'}
-				/>
-			)}
-
-			<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 py-2'>
-				{filteredApps.map((a, ai) => (
-					<AppCard key={ai} app={a} startSession={startSession} fetchFormData={fetchApps} />
-				))}
-			</div>
-		</>
-	);
-}
-
-export async function getServerSideProps({
-	req,
-	res,
-	query,
-	resolvedUrl,
-	locale,
-	locales,
-	defaultLocale
-}: {
-	req: any;
-	res: any;
-	query: any;
-	resolvedUrl: string;
-	locale: string;
-	locales: string[];
-	defaultLocale: string;
-}) {
-	return JSON.parse(JSON.stringify({ props: res?.locals?.data || {} }));
-}
diff --git a/webapp/src/pages/[resourceSlug]/connections/index.tsx b/webapp/src/pages/[resourceSlug]/connections/index.tsx
index 7bf0a8b5d..0ccece5dc 100644
--- a/webapp/src/pages/[resourceSlug]/connections/index.tsx
+++ b/webapp/src/pages/[resourceSlug]/connections/index.tsx
@@ -117,7 +117,8 @@ const ConnectionsPage = props => {
 
 				<button
 					onClick={() => router.push(`/${resourceSlug}/connections/add`)}
-					className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+					className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+				>
 					<CirclePlus width={10.5} />
 					<p className='font-semibold text-sm'>New Connection</p>
 				</button>
diff --git a/webapp/src/pages/[resourceSlug]/datasource/[datasourceId]/index.tsx b/webapp/src/pages/[resourceSlug]/datasource/[datasourceId]/index.tsx
index b071d32e9..2cf2b6537 100644
--- a/webapp/src/pages/[resourceSlug]/datasource/[datasourceId]/index.tsx
+++ b/webapp/src/pages/[resourceSlug]/datasource/[datasourceId]/index.tsx
@@ -227,8 +227,7 @@ export default function Datasource(props) {
 				<button
 					onClick={() => deleteDatasource(datasource._id)}
 					className='inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed'
-					disabled={submitting['deleteDatasource']}
-				>
+					disabled={submitting['deleteDatasource']}>
 					{submitting['deleteDatasource'] ? (
 						<ButtonSpinner />
 					) : (
@@ -247,20 +246,18 @@ export default function Datasource(props) {
 						<form
 							onSubmit={e => {
 								e.preventDefault();
-							}}
-						>
+							}}>
 							<StreamsList
 								streams={discoveredSchema.catalog.streams}
 								streamProperties={streamProperties}
-								setStreamReducer={setStreamReducer}
+								// setStreamReducer={setStreamReducer as any}
 								streamState={datasource.streamConfig}
 							/>
 							<button
 								onClick={e => updateStreams(e)}
 								disabled={submitting['updateStreams'] || submitting['updateStreamssync']}
 								type='submit'
-								className='me-4 rounded-md disabled:bg-slate-400 bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600'
-							>
+								className='me-4 rounded-md disabled:bg-slate-400 bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600'>
 								{submitting['updateStreams'] && <ButtonSpinner />}
 								{submitting['updateStreams'] ? 'Saving...' : 'Save'}
 							</button>
@@ -272,8 +269,7 @@ export default function Datasource(props) {
 									!airbyteState?.isEnabled
 								}
 								type='submit'
-								className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-							>
+								className='rounded-md disabled:bg-slate-400 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'>
 								{submitting['updateStreamssync'] && <ButtonSpinner />}
 								{submitting['updateStreamssync'] ? 'Saving...' : 'Save and Sync'}
 							</button>
@@ -293,39 +289,33 @@ export default function Datasource(props) {
 								<tr>
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Job ID
 									</th>
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Status
 									</th>
 									{/*<th scope='col' className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>Job Type</th>*/}
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Connection ID
 									</th>
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Start Time
 									</th>
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Last Updated
 									</th>
 									<th
 										scope='col'
-										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'
-									>
+										className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider'>
 										Duration
 									</th>
 								</tr>
@@ -376,8 +366,7 @@ export default function Datasource(props) {
 							type='submit'
 							className={
 								'flex rounded-md bg-indigo-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:bg-gray-200'
-							}
-						>
+							}>
 							Save
 						</button>
 						{editingSchedule && (
@@ -388,8 +377,7 @@ export default function Datasource(props) {
 								type='submit'
 								className={
 									'flex rounded-md disabled:bg-slate-400 bg-gray-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600'
-								}
-							>
+								}>
 								Cancel
 							</button>
 						)}
diff --git a/webapp/src/pages/[resourceSlug]/datasources.tsx b/webapp/src/pages/[resourceSlug]/datasources.tsx
index 9b0900655..5f94e6978 100644
--- a/webapp/src/pages/[resourceSlug]/datasources.tsx
+++ b/webapp/src/pages/[resourceSlug]/datasources.tsx
@@ -77,7 +77,12 @@ export default function Datasources(props) {
 				<title>{`Datasources - ${teamName}`}</title>
 			</Head>
 
-			<PageTitleWithNewButton list={filteredDatasources} title='File Uploads' />
+			<PageTitleWithNewButton
+				list={filteredDatasources}
+				title='File Uploads'
+				searchQuery=''
+				setSearchQuery={() => {}}
+			/>
 
 			<span className='pt-1 mb-3 w-full'>
 				<CreateDatasourceForm
@@ -101,6 +106,8 @@ export default function Datasources(props) {
 
 			{airbyteState?.isEnabled && (
 				<PageTitleWithNewButton
+					searchQuery=''
+					setSearchQuery={() => {}}
 					list={filteredDatasources}
 					title='Data Connections'
 					buttonText='New Connection'
@@ -135,8 +142,7 @@ export default function Datasources(props) {
 						setAirbyteLoading(false);
 					}}
 					className='inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:bg-gray-300 disabled:text-gray-700 disabled:cursor-not-allowed ml-auto mb-2'
-					disabled={airbyteLoading}
-				>
+					disabled={airbyteLoading}>
 					{airbyteLoading ? 'Enabling Airbyte...' : 'Enable Airbyte'}
 				</button>
 			)}
diff --git a/webapp/src/pages/[resourceSlug]/models.tsx b/webapp/src/pages/[resourceSlug]/models.tsx
index 7b69bf8eb..311081e05 100644
--- a/webapp/src/pages/[resourceSlug]/models.tsx
+++ b/webapp/src/pages/[resourceSlug]/models.tsx
@@ -55,6 +55,7 @@ export default function Models(props) {
 
 			{models.length === 0 && (
 				<NewButtonSection
+					setOpen={setCreateModelOpen}
 					link={`/${resourceSlug}/model/add`}
 					emptyMessage={'No models'}
 					icon={
diff --git a/webapp/src/pages/[resourceSlug]/org.tsx b/webapp/src/pages/[resourceSlug]/org.tsx
index ede96d8f0..0a04ccc59 100644
--- a/webapp/src/pages/[resourceSlug]/org.tsx
+++ b/webapp/src/pages/[resourceSlug]/org.tsx
@@ -93,6 +93,8 @@ export default function Org(props) {
 			)}
 
 			<PageTitleWithNewButton
+				searchQuery=''
+				setSearchQuery={() => {}}
 				list={members}
 				title='Org Members'
 				buttonText='Invite Member'
diff --git a/webapp/src/pages/[resourceSlug]/org/[memberId]/edit.tsx b/webapp/src/pages/[resourceSlug]/org/[memberId]/edit.tsx
index 5fb231070..e7ea096f3 100644
--- a/webapp/src/pages/[resourceSlug]/org/[memberId]/edit.tsx
+++ b/webapp/src/pages/[resourceSlug]/org/[memberId]/edit.tsx
@@ -43,6 +43,9 @@ export default function EditOrgMember(props) {
 			</div>
 
 			<PermissionsEditor
+				memberName={orgMember?.name}
+				memberEmail={orgMember?.email}
+				initialRole={orgMember?.role}
 				editingPermission={new Permission(orgMember?.permissions)}
 				filterBits={ORG_BITS}
 			/>
diff --git a/webapp/src/pages/[resourceSlug]/session/[sessionId]/index.tsx b/webapp/src/pages/[resourceSlug]/session/[sessionId]/index.tsx
index 691f82d96..ba329ecae 100644
--- a/webapp/src/pages/[resourceSlug]/session/[sessionId]/index.tsx
+++ b/webapp/src/pages/[resourceSlug]/session/[sessionId]/index.tsx
@@ -358,7 +358,8 @@ export default function Session(props: SessionProps) {
 			</Head>
 			<div
 				className='-mx-3 sm:-mx-6 lg:-mx-8 my-2 flex flex-col flex-1 align-center'
-				style={{ maxHeight: 'calc(100vh - 110px)' }}>
+				style={{ maxHeight: 'calc(100vh - 110px)' }}
+			>
 				{sessionVariableFormOpen && (
 					<SessionVariableForm variables={paramsArray} onSubmit={handleSessionVariableSubmit} />
 				)}
@@ -449,7 +450,8 @@ export default function Session(props: SessionProps) {
 											terminated ? (
 												<p
 													id='session-terminated'
-													className='text-center h-full me-14 pb-2 pt-1 dark:text-white'>
+													className='text-center h-full me-14 pb-2 pt-1 dark:text-white'
+												>
 													This session was terminated.
 												</p>
 											) : (
@@ -470,7 +472,8 @@ export default function Session(props: SessionProps) {
 												height={30}
 												viewBox='0 0 100% 10'
 												backgroundColor='#e5e5e5'
-												foregroundColor='#ffffff'>
+												foregroundColor='#ffffff'
+											>
 												<rect x='0' y='10' rx='5' width='100%' height='10' />
 											</ContentLoader>
 										)}
diff --git a/webapp/src/pages/[resourceSlug]/tasks.tsx b/webapp/src/pages/[resourceSlug]/tasks.tsx
index 63920097b..b6d02dd4a 100644
--- a/webapp/src/pages/[resourceSlug]/tasks.tsx
+++ b/webapp/src/pages/[resourceSlug]/tasks.tsx
@@ -42,12 +42,15 @@ export default function Tasks(props) {
 				title='Tasks'
 				buttonText='New Task'
 				href='/task/add'
+				searchQuery=''
+				setSearchQuery={() => {}}
 			/>
 
 			<TaskCards tasks={filteredTasks} fetchTasks={fetchTasks} />
 
 			{tasks.length === 0 && (
 				<NewButtonSection
+					setOpen={() => {}}
 					link={`/${resourceSlug}/task/add`}
 					emptyMessage={'No tasks'}
 					icon={
@@ -56,16 +59,14 @@ export default function Tasks(props) {
 							fill='none'
 							viewBox='0 0 24 24'
 							stroke='currentColor'
-							aria-hidden='true'
-						>
+							aria-hidden='true'>
 							<svg
 								xmlns='http://www.w3.org/2000/svg'
 								fill='none'
 								viewBox='0 0 24 24'
 								strokeWidth={1.5}
 								stroke='currentColor'
-								className='w-6 h-6'
-							>
+								className='w-6 h-6'>
 								<path
 									strokeLinecap='round'
 									strokeLinejoin='round'
diff --git a/webapp/src/pages/[resourceSlug]/team.tsx b/webapp/src/pages/[resourceSlug]/team.tsx
index cbdaf49bf..9f05d2681 100644
--- a/webapp/src/pages/[resourceSlug]/team.tsx
+++ b/webapp/src/pages/[resourceSlug]/team.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from 'react';
 import * as API from '@api';
 import InviteFormModal from 'components/InviteFormModal';
 import MemberList from 'components/MemberList';
@@ -9,119 +8,120 @@ import { useAccountContext } from 'context/account';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Permissions from 'permissions/permissions';
+import React, { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 export default function Team(props) {
-    const [accountContext, refreshAccountContext]: any = useAccountContext();
-    const { csrf, teamName, permissions } = accountContext as any;
-    const router = useRouter();
-    const { resourceSlug } = router.query;
-    const [state, dispatch] = useState(props);
-    const [error, setError] = useState();
-    const [modalOpen, setModalOpen]: any = useState(false);
-    const [searchQuery, setSearchQuery] = useState(''); // Search query state
-    const { team, invites } = state;
+	const [accountContext, refreshAccountContext]: any = useAccountContext();
+	const { csrf, teamName, permissions } = accountContext as any;
+	const router = useRouter();
+	const { resourceSlug } = router.query;
+	const [state, dispatch] = useState(props);
+	const [error, setError] = useState();
+	const [modalOpen, setModalOpen]: any = useState(false);
+	const [searchQuery, setSearchQuery] = useState(''); // Search query state
+	const { team, invites } = state;
 
-    async function fetchTeam() {
-        await API.getTeam({ resourceSlug }, dispatch, setError, router);
-    }
+	async function fetchTeam() {
+		await API.getTeam({ resourceSlug }, dispatch, setError, router);
+	}
 
-    useEffect(() => {
-        console.log('Team object:', team);
-    }, [team]);
+	useEffect(() => {
+		console.log('Team object:', team);
+	}, [team]);
 
-    async function refreshTeam() {
-        fetchTeam();
-        refreshAccountContext();
-        setModalOpen(false);
-    }
+	async function refreshTeam() {
+		fetchTeam();
+		refreshAccountContext();
+		setModalOpen(false);
+	}
 
-    useEffect(() => {
-        fetchTeam();
-    }, [resourceSlug]);
+	useEffect(() => {
+		fetchTeam();
+	}, [resourceSlug]);
 
-    async function deleteCallback(memberId) {
-        await API.deleteTeamMember(
-            {
-                _csrf: csrf,
-                resourceSlug,
-                memberId,
-            },
-            () => {
-                toast.success('Team member removed successfully');
-                fetchTeam();
-            },
-            (err) => {
-                toast.error(err);
-            },
-            router
-        );
-    }
+	async function deleteCallback(memberId) {
+		await API.deleteTeamMember(
+			{
+				_csrf: csrf,
+				resourceSlug,
+				memberId
+			},
+			() => {
+				toast.success('Team member removed successfully');
+				fetchTeam();
+			},
+			err => {
+				toast.error(err);
+			},
+			router
+		);
+	}
 
-    if (!team) {
-        return <Spinner />;
-    }
+	if (!team) {
+		return <Spinner />;
+	}
 
-    // Filter members based on the search query
-    const filteredMembers = team?.members?.filter((member) =>
-        member.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+	// Filter members based on the search query
+	const filteredMembers = team?.members?.filter(member =>
+		member.name.toLowerCase().includes(searchQuery.toLowerCase())
+	);
 
-    const memberCount = filteredMembers?.length || 0;  // Count of members
+	const memberCount = filteredMembers?.length || 0; // Count of members
 
-    let modal;
-    switch (modalOpen) {
-        case 'member':
-            modal = (
-                <InviteFormModal open={modalOpen !== false} setOpen={setModalOpen} callback={refreshTeam} />
-            );
-            break;
-        default:
-            modal = null;
-            break;
-    }
+	let modal;
+	switch (modalOpen) {
+		case 'member':
+			modal = (
+				<InviteFormModal open={modalOpen !== false} setOpen={setModalOpen} callback={refreshTeam} />
+			);
+			break;
+		default:
+			modal = null;
+			break;
+	}
 
-    return (
-        <>
-            {modal}
-            <Head>
-                <title>{`Team - ${teamName}`}</title>
-            </Head>
+	return (
+		<>
+			{modal}
+			<Head>
+				<title>{`Team - ${teamName}`}</title>
+			</Head>
 
-            {permissions.get(Permissions.EDIT_TEAM) && (
-                <>
-                    <TeamSettingsForm callback={refreshTeam} memberCount={memberCount} />
-                </>
-            )}
+			{permissions.get(Permissions.EDIT_TEAM) && (
+				<>
+					<TeamSettingsForm callback={refreshTeam} memberCount={memberCount} />
+				</>
+			)}
 
-            <PageTitleWithNewButton
-                list={team?.members}
-                title='Team Members'
-                buttonText='Invite Member'
-                onClick={() => setModalOpen('member')}
-                showButton={permissions.get(Permissions.ADD_TEAM_MEMBER)}
+			<PageTitleWithNewButton
+				list={team?.members}
+				title='Team Members'
+				buttonText='Invite Member'
+				onClick={() => setModalOpen('member')}
+				showButton={permissions.get(Permissions.ADD_TEAM_MEMBER)}
 				searchQuery={searchQuery}
 				setSearchQuery={setSearchQuery}
-            />
+			/>
 
-            <MemberList
-                permissions={team?.permissions}
-                members={filteredMembers} // Pass the filtered list here
-                fetchTeam={fetchTeam}
-                deleteCallback={deleteCallback}
-            />
-        </>
-    );
+			<MemberList
+				permissions={team?.permissions}
+				members={filteredMembers} // Pass the filtered list here
+				fetchTeam={fetchTeam}
+				deleteCallback={deleteCallback}
+			/>
+		</>
+	);
 }
 
 export async function getServerSideProps({
-    req,
-    res,
-    query,
-    resolvedUrl,
-    locale,
-    locales,
-    defaultLocale,
+	req,
+	res,
+	query,
+	resolvedUrl,
+	locale,
+	locales,
+	defaultLocale
 }) {
-    return JSON.parse(JSON.stringify({ props: res?.locals?.data || {} }));
+	return JSON.parse(JSON.stringify({ props: res?.locals?.data || {} }));
 }
diff --git a/webapp/src/pages/[resourceSlug]/team/[memberId]/edit.tsx b/webapp/src/pages/[resourceSlug]/team/[memberId]/edit.tsx
index c6361d87b..f00db7be5 100644
--- a/webapp/src/pages/[resourceSlug]/team/[memberId]/edit.tsx
+++ b/webapp/src/pages/[resourceSlug]/team/[memberId]/edit.tsx
@@ -1,4 +1,5 @@
 import * as API from '@api';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
 import Permission from '@permission';
 import ErrorAlert from 'components/ErrorAlert';
 import PermissionsEditor from 'components/PermissionsEditor';
@@ -8,7 +9,6 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { TEAM_BITS } from 'permissions/bits';
 import React, { useEffect, useState } from 'react';
-import { ChevronRightIcon } from '@heroicons/react/20/solid';
 
 export default function EditTeamMember(props) {
 	const [accountContext]: any = useAccountContext();
@@ -41,13 +41,13 @@ export default function EditTeamMember(props) {
 
 			<div className='border-b dark:border-slate-400 pb-2 my-2'>
 				<h3 className='pl-2 text-sm font-medium text-gray-500 dark:text-white align-middle'>
-					<span 
+					<span
 						onClick={() => router.push(`/${resourceSlug}/team`)}
-						className="cursor-pointer text-gray-600 hover:text-blue-600"
+						className='cursor-pointer text-gray-600 hover:text-blue-600'
 					>
 						Team
 					</span>
-						<ChevronRightIcon className="inline-block w-4 h-4 mx-1 mb-1" />
+					<ChevronRightIcon className='inline-block w-4 h-4 mx-1 mb-1' />
 					Edit Team Member
 				</h3>
 			</div>
diff --git a/webapp/src/pages/[resourceSlug]/tool/[toolId]/edit.tsx b/webapp/src/pages/[resourceSlug]/tool/[toolId]/edit.tsx
index 92cdf9c84..6bde91ee0 100644
--- a/webapp/src/pages/[resourceSlug]/tool/[toolId]/edit.tsx
+++ b/webapp/src/pages/[resourceSlug]/tool/[toolId]/edit.tsx
@@ -47,6 +47,9 @@ export default function EditTool(props) {
 			</div>
 
 			<ToolForm
+				setDisplayScreen={() => {}}
+				fetchTools={() => {}}
+				setActiveTab={() => {}}
 				tool={tool}
 				datasources={datasources}
 				editing={true}
diff --git a/webapp/src/pages/[resourceSlug]/tool/add.tsx b/webapp/src/pages/[resourceSlug]/tool/add.tsx
index 5041114f2..e5e5b6917 100644
--- a/webapp/src/pages/[resourceSlug]/tool/add.tsx
+++ b/webapp/src/pages/[resourceSlug]/tool/add.tsx
@@ -63,6 +63,9 @@ export default function AddTool(props) {
 			)}
 
 			<ToolForm
+				setDisplayScreen={() => {}}
+				fetchTools={() => {}}
+				setActiveTab={() => {}}
 				datasources={datasources}
 				fetchFormData={fetchTools}
 				initialType={cloneState?.tool?.type}
diff --git a/webapp/src/pages/[resourceSlug]/tools.tsx b/webapp/src/pages/[resourceSlug]/tools.tsx
index dd6ced98c..65448540d 100644
--- a/webapp/src/pages/[resourceSlug]/tools.tsx
+++ b/webapp/src/pages/[resourceSlug]/tools.tsx
@@ -56,6 +56,7 @@ export default function Tools(props) {
 
 			{tools.length === 0 && (
 				<NewButtonSection
+					setOpen={() => {}}
 					link={`/${resourceSlug}/tool/add`}
 					emptyMessage={'No tools'}
 					icon={
diff --git a/webapp/src/pages/[resourceSlug]/vectordbs.tsx b/webapp/src/pages/[resourceSlug]/vectordbs.tsx
index ab38c8cd8..015130a20 100644
--- a/webapp/src/pages/[resourceSlug]/vectordbs.tsx
+++ b/webapp/src/pages/[resourceSlug]/vectordbs.tsx
@@ -54,6 +54,7 @@ export default function VectorDbs(props) {
 
 			{vectorDbs.length === 0 && (
 				<NewButtonSection
+					setOpen={() => {}}
 					link={`/${resourceSlug}/vectordb/add`}
 					emptyMessage={'No vector databases'}
 					message={'Get started by vector databases.'}
diff --git a/webapp/src/pages/apikey/add.tsx b/webapp/src/pages/apikey/add.tsx
index e6a6efe4e..55833bb19 100644
--- a/webapp/src/pages/apikey/add.tsx
+++ b/webapp/src/pages/apikey/add.tsx
@@ -31,7 +31,7 @@ export default function AddTool(props) {
 
 			<div className='border-b pb-2 my-2'>
 				<h3 className='pl-2 font-semibold text-gray-900'>New API Key</h3>
-				<ApiKeyForm />
+				<ApiKeyForm callback={() => {}} />
 			</div>
 		</>
 	);
diff --git a/webapp/src/pages/apikeys.tsx b/webapp/src/pages/apikeys.tsx
index 134c90e39..613965da0 100644
--- a/webapp/src/pages/apikeys.tsx
+++ b/webapp/src/pages/apikeys.tsx
@@ -45,7 +45,8 @@ export default function APIKeys(props) {
 
 				<button
 					onClick={() => setCreateKeyOpen(true)}
-					className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'>
+					className='flex items-center gap-2 bg-gradient-to-r from-[#4F46E5] to-[#612D89] text-white py-2.5 px-4 rounded-lg'
+				>
 					<CirclePlus width={14} />
 					<p className='font-semibold text-sm'>New Key</p>
 				</button>
diff --git a/webapp/src/pages/billing.tsx b/webapp/src/pages/billing.tsx
index b0eb6d9aa..2b60ee8f4 100644
--- a/webapp/src/pages/billing.tsx
+++ b/webapp/src/pages/billing.tsx
@@ -4,12 +4,12 @@ import ConfirmModal from 'components/ConfirmModal';
 import ErrorAlert from 'components/ErrorAlert';
 import InfoAlert from 'components/InfoAlert';
 import Invoice from 'components/Invoice';
-import { Button } from 'modules/components/ui/button';
-import { Card, CardContent, CardHeader } from 'modules/components/ui/card';
 import ProgressBar from 'components/ProgressBar';
 import Spinner from 'components/Spinner';
 import StripeCheckoutModal from 'components/StripeCheckoutModal';
 import { useAccountContext } from 'context/account';
+import { Button } from 'modules/components/ui/button';
+import { Card, CardContent, CardHeader } from 'modules/components/ui/card';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { usePostHog } from 'posthog-js/react';
@@ -207,7 +207,8 @@ ${missingEnvs.join('\n')}`}
 						setSelectedPlan(planData.plan);
 						setStagedChange({ plan: planData.plan });
 						setShowConfirmModal(true);
-					}}>
+					}}
+				>
 					{account?.stripe.stripePlan === planData.name
 						? 'Update Subscription'
 						: planData.name === 'Enterprise'
@@ -255,7 +256,8 @@ ${missingEnvs.join('\n')}`}
 				<Button
 					variant='outline'
 					className='w-fit text-black hover:bg-gray-100'
-					onClick={getPortalLink}>
+					onClick={getPortalLink}
+				>
 					Go to Customer Portal
 				</Button>
 			</div>
diff --git a/webapp/src/pages/login.tsx b/webapp/src/pages/login.tsx
index 9e39b561e..7ec17bbe6 100644
--- a/webapp/src/pages/login.tsx
+++ b/webapp/src/pages/login.tsx
@@ -123,7 +123,8 @@ export default function Login() {
 								<div className='leading-6 text-sm'>
 									<Link
 										href='/requestchangepassword'
-										className='text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'>
+										className='text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'
+									>
 										Forgot password?
 									</Link>
 								</div>
@@ -132,7 +133,8 @@ export default function Login() {
 							<div>
 								<button
 									type='submit'
-									className='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4'>
+									className='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4'
+								>
 									{submitting && <ButtonSpinner className='mt-1 me-1' />}
 									Sign in
 								</button>
@@ -143,7 +145,8 @@ export default function Login() {
 							Don&apos;t have an account?{' '}
 							<Link
 								href='/register'
-								className='leading-6 text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'>
+								className='leading-6 text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'
+							>
 								Sign Up
 							</Link>
 						</p>
@@ -166,26 +169,32 @@ export default function Login() {
 									{process.env.NEXT_PUBLIC_ENABLE_GOOGLE_OAUTH && (
 										<Link
 											href='/auth/google'
-											className='flex w-full items-center justify-center gap-3 rounded-md px-3 py-1.5 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4285F4] border border-gray-200'>
+											className='flex w-full items-center justify-center gap-3 rounded-md px-3 py-1.5 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4285F4] border border-gray-200'
+										>
 											<svg
 												xmlns='http://www.w3.org/2000/svg'
 												x='0px'
 												y='0px'
 												width='20'
 												height='20'
-												viewBox='0 0 48 48'>
+												viewBox='0 0 48 48'
+											>
 												<path
 													fill='#fbc02d'
-													d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'></path>
+													d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'
+												></path>
 												<path
 													fill='#e53935'
-													d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'></path>
+													d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'
+												></path>
 												<path
 													fill='#4caf50'
-													d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'></path>
+													d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'
+												></path>
 												<path
 													fill='#1565c0'
-													d='M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'></path>
+													d='M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'
+												></path>
 											</svg>
 											<span className='text-sm font-semibold leading-6 dark:text-gray-50'>
 												Continue with Google
@@ -196,12 +205,14 @@ export default function Login() {
 									{process.env.NEXT_PUBLIC_ENABLE_GITHUB_OAUTH && (
 										<Link
 											href='/auth/github'
-											className='flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F] dark:bg-slate-600'>
+											className='flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F] dark:bg-slate-600'
+										>
 											<svg
 												className='h-5 w-5'
 												aria-hidden='true'
 												fill='currentColor'
-												viewBox='0 0 20 20'>
+												viewBox='0 0 20 20'
+											>
 												<path
 													fillRule='evenodd'
 													d='M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z'
diff --git a/webapp/src/pages/register.tsx b/webapp/src/pages/register.tsx
index f85e731f6..aec92b769 100644
--- a/webapp/src/pages/register.tsx
+++ b/webapp/src/pages/register.tsx
@@ -6,7 +6,6 @@ import ErrorAlert from 'components/ErrorAlert';
 import InputField from 'components/form/InputField';
 import LeftFrame from 'components/onboarding/LeftFrame';
 import { useThemeContext } from 'context/themecontext';
-import cn from 'utils/cn';
 import passwordPattern from 'lib/misc/passwordpattern';
 import Lottie from 'lottie-react';
 import Head from 'next/head';
@@ -15,6 +14,7 @@ import { useRouter } from 'next/router';
 import { usePostHog } from 'posthog-js/react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import cn from 'utils/cn';
 
 export interface RegisterFormValues {
 	name: string;
@@ -132,7 +132,8 @@ export default function Register() {
 										href='https://www.agentcloud.dev/legal/terms'
 										target='_blank'
 										className='text-indigo-600'
-										rel='noreferrer'>
+										rel='noreferrer'
+									>
 										terms of service
 									</a>{' '}
 									and{' '}
@@ -140,7 +141,8 @@ export default function Register() {
 										href='https://www.agentcloud.dev/legal/privacy'
 										target='_blank'
 										className='text-indigo-600'
-										rel='noreferrer'>
+										rel='noreferrer'
+									>
 										privacy policy
 									</a>
 									.
@@ -151,7 +153,8 @@ export default function Register() {
 							<div>
 								<button
 									type='submit'
-									className='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4'>
+									className='flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4'
+								>
 									{submitting && <ButtonSpinner className='mt-1 me-1' />}
 									Create account
 								</button>
@@ -163,7 +166,8 @@ export default function Register() {
 							Already have an account?{' '}
 							<Link
 								href='/login'
-								className='font-semibold leading-6 text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'>
+								className='font-semibold leading-6 text-indigo-600 hover:text-indigo-500 dark:text-indigo-200'
+							>
 								Sign in
 							</Link>
 						</p>
@@ -181,26 +185,32 @@ export default function Register() {
 								{process.env.NEXT_PUBLIC_ENABLE_GOOGLE_OAUTH && (
 									<Link
 										href='/auth/google'
-										className='flex w-full items-center justify-center gap-3 rounded-md px-3 py-1.5 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4285F4] border border-gray-200'>
+										className='flex w-full items-center justify-center gap-3 rounded-md px-3 py-1.5 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4285F4] border border-gray-200'
+									>
 										<svg
 											xmlns='http://www.w3.org/2000/svg'
 											x='0px'
 											y='0px'
 											width='20'
 											height='20'
-											viewBox='0 0 48 48'>
+											viewBox='0 0 48 48'
+										>
 											<path
 												fill='#fbc02d'
-												d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12   s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20    s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'></path>
+												d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12   s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20    s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'
+											></path>
 											<path
 												fill='#e53935'
-												d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039   l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'></path>
+												d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039   l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'
+											></path>
 											<path
 												fill='#4caf50'
-												d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36 c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'></path>
+												d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36 c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'
+											></path>
 											<path
 												fill='#1565c0'
-												d='M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571   c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'></path>
+												d='M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571   c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'
+											></path>
 										</svg>
 										<span className='text-sm font-semibold leading-6 dark:text-gray-50'>
 											Continue with Google
@@ -211,12 +221,14 @@ export default function Register() {
 								{process.env.NEXT_PUBLIC_ENABLE_GITHUB_OAUTH && (
 									<Link
 										href='/auth/github'
-										className='flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F] dark:bg-slate-600'>
+										className='flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F] dark:bg-slate-600'
+									>
 										<svg
 											className='h-5 w-5'
 											aria-hidden='true'
 											fill='currentColor'
-											viewBox='0 0 20 20'>
+											viewBox='0 0 20 20'
+										>
 											<path
 												fillRule='evenodd'
 												d='M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z'
diff --git a/webapp/src/sync-server/main.ts b/webapp/src/sync-server/main.ts
index d6044d026..adfd5ce30 100644
--- a/webapp/src/sync-server/main.ts
+++ b/webapp/src/sync-server/main.ts
@@ -79,7 +79,8 @@ async function augmentJobs(jobList) {
 						limitOwnerId = datasourceOrg?.ownerId;
 					}
 					const ownerAccount = await getAccountById(limitOwnerId);
-					job.stripe = ownerAccount?.stripe;
+					const ownerOrg = await getOrgById(ownerAccount?.currentOrg);
+					job.stripe = ownerOrg?.stripe;
 				}
 			} catch (e) {
 				log(e);
diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json
index 0a62fed6c..9b3b08f7a 100644
--- a/webapp/tsconfig.json
+++ b/webapp/tsconfig.json
@@ -13,7 +13,7 @@
     "noEmit": true,
     "incremental": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,