diff --git a/webapp/src/components/ChatAppForm2.tsx b/webapp/src/components/ChatAppForm2.tsx
index 1bd70ce35..682224588 100644
--- a/webapp/src/components/ChatAppForm2.tsx
+++ b/webapp/src/components/ChatAppForm2.tsx
@@ -1,61 +1,26 @@
 import * as API from '@api';
-
 import { AgentCreatedDisplay } from 'components/apps/AgentCreatedDisplay';
 import { AgentSelectDisplay } from 'components/apps/AgentSelectDisplay';
 import { CreateAgentSheet } from 'components/apps/CreateAgentSheet';
 import { InsightChat } from 'components/apps/InsightChat';
-import Spinner from 'components/Spinner';
-import { useAccountContext } from 'context/account';
-import { useStepContext } from 'context/stepwrapper';
-import { useThemeContext } from 'context/themecontext';
 import { AgentsDataReturnType } from 'controllers/agent';
-import { AppsDataReturnType } from 'controllers/app';
 import { Model } from 'db/model';
-import useAutocompleteDropdown from 'hooks/useAutoCompleteDropdown';
-import { ChevronDown, Circle, Layout, Pencil, SendHorizonal, Trash2 } from 'lucide-react';
-import { MultiSelect } from 'modules/components/multi-select';
+import { Circle, Pencil, SendHorizonal, Trash2 } from 'lucide-react';
 import { Button } from 'modules/components/ui/button';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger
-} from 'modules/components/ui/dropdown-menu';
 import { useRouter } from 'next/router';
-// import agents from 'pages/[resourceSlug]/agents';
+
 import { usePostHog } from 'posthog-js/react';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import { useAgentStore } from 'store/agent';
 import { Agent } from 'struct/agent';
 import { App, AppType } from 'struct/app';
-import { ChatAppAllowedModels } from 'struct/model';
-import { SharingMode } from 'struct/sharing';
-import { ToolType } from 'struct/tool';
 
 import AddEmailModal from './AddEmailModal';
 import ConfirmModal from './ConfirmModal';
-import CreateDatasourceModal from './CreateDatasourceModal';
-import CreateModelModal from './CreateModelModal';
-import CreateToolModal from './modal/CreateToolModal';
 import SharingModeSelect from './SharingModeSelect';
-import CreateVariableModal from './variables/CreateVariableModal';
-
-const chatAppTaglines = [
-	'Build single agent chat bots (like GPTS)',
-	'Integrate RAG datasources',
-	'Add custom agent',
-	'Integrate custom tools',
-	'Embed your chat app via IFrame'
-];
-
-const processAppTaglines = [
-	'Build Multi-Agent Process Apps (powered by Crew AI)',
-	'Integrate RAG datasources',
-	'Add custom code tools',
-	'Add tasks',
-	'Embed your process app via IFrame'
-];
+import { SharingMode } from 'struct/sharing';
+import { useAccountContext } from 'context/account';
+import Link from 'next/link';
 
 export default function Apps({
 	app,
@@ -126,6 +91,8 @@ export default function Apps({
 	const router = useRouter();
 	const { resourceSlug } = router.query;
 
+	// const { step, setStep } = useStepContext();
+
 	const [sharingMode, setSharingMode] = useState(app?.sharingConfig?.mode || SharingMode.TEAM);
 	const [shareLinkShareId, setShareLinkShareId] = useState(editing ? app?.shareLinkShareId : null);
 	const [appName, setAppName] = useState(app?.name || 'Untitled Chat App');
@@ -342,7 +309,9 @@ export default function Apps({
 	return (
 		<main className='text-foreground flex flex-col gap-2'>
 			<div className='flex gap-2 mb-2 text-sm'>
-				<h4 className='text-gray-700 font-semibold'>Apps</h4>
+				<Link href={`/${resourceSlug}/apps`}>
+					<h4 className='text-gray-700 font-semibold cursor-pointer'>Apps</h4>
+				</Link>
 				<span className='text-gray-500'>&gt;</span>
 				<h4 className='text-gray-700 font-semibold'>Create App</h4>
 				<span className='text-gray-500'>&gt;</span>
@@ -355,8 +324,7 @@ 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' />
@@ -388,8 +356,7 @@ export default function Apps({
 														setAppName('');
 													}
 												}}
-												className='hover:text-[#4F46E5] transition-colors'
-											>
+												className='hover:text-[#4F46E5] transition-colors'>
 												<Pencil width={20} />
 											</button>
 										</div>
@@ -465,8 +432,7 @@ 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'
@@ -503,22 +469,10 @@ export default function Apps({
 								))}
 								<p
 									className='text-[#4F46E5] cursor-pointer self-end hover:text-[#3730a3]'
-									onClick={handleAddStarter}
-								>
+									onClick={handleAddStarter}>
 									+ Add
 								</p>
 							</div>
-							{/* <div className='w-full flex items-center justify-between bg-gray-100 p-6 rounded-lg'>
-								<p className='text-gray-500'>Display Settings</p>
-								<DropdownMenu>
-									<DropdownMenuTrigger className='bg-background rounded-sm border border-gray-200'>
-										<ChevronDown width={25} color='#6B7280' />
-									</DropdownMenuTrigger>
-									<DropdownMenuContent>
-										<DropdownMenuItem>Dropdown Item</DropdownMenuItem>
-									</DropdownMenuContent>
-								</DropdownMenu>
-							</div> */}
 
 							<SharingModeSelect
 								sharingMode={sharingMode}
@@ -538,8 +492,7 @@ 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
@@ -559,15 +512,14 @@ 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'
-							>
+								onClick={() => (editing ? callback?.() : router.back())}
+								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
@@ -576,8 +528,7 @@ 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/pages/[resourceSlug]/app/[appId]/edit.tsx b/webapp/src/pages/[resourceSlug]/app/[appId]/edit.tsx
index 1d6c4035f..b723c72ad 100644
--- a/webapp/src/pages/[resourceSlug]/app/[appId]/edit.tsx
+++ b/webapp/src/pages/[resourceSlug]/app/[appId]/edit.tsx
@@ -1,6 +1,6 @@
 import * as API from '@api';
 import { ChevronLeftIcon, PhotoIcon, UserCircleIcon } from '@heroicons/react/24/solid';
-import ChatAppForm from 'components/ChatAppForm';
+import ChatAppForm2 from 'components/ChatAppForm2';
 import CrewAppForm from 'components/CrewAppForm';
 import Spinner from 'components/Spinner';
 import { useAccountContext } from 'context/account';
@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { AppType } from 'struct/app';
+import { Button } from 'modules/components/ui/button';
 
 export default function EditApp(props) {
 	const [accountContext]: any = useAccountContext();
@@ -35,6 +36,10 @@ export default function EditApp(props) {
 		fetchAppFormData();
 	}, [resourceSlug]);
 
+	const handleBack = () => {
+		router.push(`/${resourceSlug}/apps`);
+	};
+
 	if (app == null) {
 		return <Spinner />;
 	}
@@ -45,12 +50,17 @@ export default function EditApp(props) {
 				<title>{`Edit App - ${teamName}`}</title>
 			</Head>
 
-			<div className='border-b pb-2 my-2 mb-6'>
-				<h3 className='font-semibold text-gray-900'>Edit App - {app.name}</h3>
+			<div className='border-b pb-2 my-2 mb-6 flex items-center justify-between'>
+				<div className='flex items-center gap-2'>
+					<Button variant='ghost' className='hover:bg-transparent p-0' onClick={handleBack}>
+						<ChevronLeftIcon className='h-6 w-6' />
+					</Button>
+					<h3 className='font-semibold text-gray-900'>Edit App - {app.name}</h3>
+				</div>
 			</div>
 
 			{(app.type as AppType) === AppType.CHAT ? (
-				<ChatAppForm
+				<ChatAppForm2
 					editing={true}
 					app={app}
 					fetchFormData={fetchAppFormData}
@@ -61,6 +71,9 @@ export default function EditApp(props) {
 					toolChoices={tools}
 					whiteListSharingChoices={teamMembers}
 					variableChoices={variables}
+					callback={() => {
+						router.push(`/${resourceSlug}/apps`);
+					}}
 				/>
 			) : (
 				<CrewAppForm
@@ -75,6 +88,9 @@ export default function EditApp(props) {
 					whiteListSharingChoices={teamMembers}
 					// toolChoices={tools}
 					variableChoices={variables}
+					callback={() => {
+						router.push(`/${resourceSlug}/apps`);
+					}}
 				/>
 			)}
 		</>
diff --git a/webapp/src/pages/[resourceSlug]/apps.tsx b/webapp/src/pages/[resourceSlug]/apps.tsx
index 1cd66e560..5c6ead26e 100644
--- a/webapp/src/pages/[resourceSlug]/apps.tsx
+++ b/webapp/src/pages/[resourceSlug]/apps.tsx
@@ -42,8 +42,6 @@ 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 { Model } from 'db/model';
-import { Agent } from 'struct/agent';
 
 const DeleteDialog = ({
 	openDeleteDialog,
@@ -100,83 +98,6 @@ const DeleteDialog = ({
 	);
 };
 
-const EditAppSheet = ({
-	open,
-	setOpen,
-	selectedApp,
-	onAppUpdate,
-	toolChoices,
-	modelChoices,
-	agentChoices,
-	fetchFormData // Add this prop
-}: {
-	open: boolean;
-	setOpen: (open: boolean) => void;
-	selectedApp: App;
-	onAppUpdate: () => void;
-	toolChoices: any[];
-	modelChoices: any[];
-	agentChoices: any[];
-	fetchFormData: () => Promise<void>; // Add this type
-}) => {
-	// Add default values for missing properties
-	const enrichedApp = {
-		...selectedApp,
-		chatAppConfig: {
-			...selectedApp?.chatAppConfig,
-			maxMessages: selectedApp?.chatAppConfig?.maxMessages || 30
-		},
-		sharingConfig: {
-			...selectedApp?.sharingConfig,
-			mode: selectedApp?.sharingConfig?.mode || SharingMode.TEAM,
-			permissions: selectedApp?.sharingConfig?.permissions || {}
-		},
-		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
-	};
-
-	return (
-		<Sheet
-			open={open}
-			onOpenChange={open => {
-				if (!open) {
-					// Force a slight delay before resetting pointer events
-					setTimeout(() => {
-						document.body.style.pointerEvents = 'auto';
-						document.body.style.cursor = 'auto';
-					}, 100);
-				}
-				setOpen(open);
-			}}>
-			<SheetContent
-				className='w-full overflow-auto max-w-3xl'
-				// Add pointer-events override for sheet content
-				style={{ pointerEvents: 'auto' }}>
-				<SheetHeader>
-					<SheetTitle>Edit App</SheetTitle>
-				</SheetHeader>
-				<div className='mt-4'>
-					<ChatAppForm2
-						fetchFormData={fetchFormData}
-						app={enrichedApp}
-						editing={true}
-						callback={() => {
-							setOpen(false);
-							onAppUpdate();
-						}}
-						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 || {})}
-					/>
-				</div>
-			</SheetContent>
-		</Sheet>
-	);
-};
-
 export default function Apps(props) {
 	const { agents } = useAgentStore();
 	const [openDeleteDialog, setOpenDeleteDialog] = useState<boolean>(false);
@@ -194,44 +115,9 @@ export default function Apps(props) {
 	const { apps } = state;
 
 	const [selectedAgentId, setSelectedAgentId] = useState<string>(null);
-	const [selectedApp, setSelectedApp] = useState<App>(null);
 
 	const appsToDisplay = filteredApps.length > 0 ? filteredApps : apps;
 
-	// Add these states to fetch required data
-	const [toolChoices, setToolChoices] = useState<any[]>([]);
-	const [modelChoices, setModelChoices] = useState<Model[]>([]);
-	const [agentChoices, setAgentChoices] = useState<Agent[]>([]);
-
-	// Add function to fetch all required data
-	const fetchFormData = async () => {
-		try {
-			// Add your API calls here to fetch tools, models, and agents
-			const [toolsRes, modelsRes, agentsRes] = await Promise.all([
-				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
-			setToolChoices(toolsRes?.data || []);
-			setModelChoices(modelsRes?.data || []);
-			setAgentChoices(agentsRes?.data || []);
-		} catch (error) {
-			console.error('Error fetching form data:', error);
-			toast.error('Error loading data');
-			// Set empty arrays on error to prevent undefined errors
-			setToolChoices([]);
-			setModelChoices([]);
-			setAgentChoices([]);
-		}
-	};
-
-	// Add useEffect to fetch data on mount
-	useEffect(() => {
-		fetchFormData();
-	}, [resourceSlug]);
-
 	async function startSession(appId: ObjectId) {
 		await API.addSession(
 			{
@@ -293,12 +179,8 @@ export default function Apps(props) {
 	}, []);
 
 	// Add handler for opening edit sheet
-	const handleOpenEditSheet = (app: App) => {
-		setSelectedApp(app);
-		setOpenEditSheet(true);
-		// Ensure body pointer events are reset when opening
-		document.body.style.pointerEvents = 'auto';
-		document.body.style.cursor = 'auto';
+	const handleEditApp = (app: App) => {
+		router.push(`/${resourceSlug}/app/${app._id}/edit`);
 	};
 
 	if (!apps) {
@@ -312,16 +194,6 @@ export default function Apps(props) {
 				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>
@@ -377,7 +249,7 @@ export default function Apps(props) {
 																<Ellipsis />
 															</DropdownMenuTrigger>
 															<DropdownMenuContent align='end'>
-																<DropdownMenuItem onClick={() => handleOpenEditSheet(app)}>
+																<DropdownMenuItem onClick={() => handleEditApp(app)}>
 																	Edit
 																</DropdownMenuItem>
 																<DropdownMenuItem