diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
index 89deb663..c42c3ff8 100644
--- a/src/interface/web/app/agents/page.tsx
+++ b/src/interface/web/app/agents/page.tsx
@@ -33,6 +33,7 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
 import { AppSidebar } from "../components/appSidebar/appSidebar";
 import { Separator } from "@/components/ui/separator";
 import { KhojLogoType } from "../components/logo/khojLogo";
+import { DialogTitle } from "@radix-ui/react-dialog";
 
 export interface AgentData {
     slug: string;
@@ -145,7 +146,9 @@ function CreateAgentCard(props: CreateAgentCardProps) {
                     "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
                 }
             >
-                <DialogHeader>Create Agent</DialogHeader>
+                <DialogHeader>
+                    <DialogTitle>Create Agent</DialogTitle>
+                </DialogHeader>
                 {!props.userProfile && showLoginPrompt && (
                     <LoginPrompt
                         onOpenChange={setShowLoginPrompt}
diff --git a/src/interface/web/app/common/iconUtils.tsx b/src/interface/web/app/common/iconUtils.tsx
index 0ef7f09a..58d2f075 100644
--- a/src/interface/web/app/common/iconUtils.tsx
+++ b/src/interface/web/app/common/iconUtils.tsx
@@ -168,6 +168,12 @@ const iconMap: IconMap = {
     Broadcast: (color: string, width: string, height: string) => (
         <Broadcast className={`${width} ${height} ${color} mr-2`} />
     ),
+    Image: (color: string, width: string, height: string) => (
+        <Image className={`${width} ${height} ${color} mr-2`} />
+    ),
+    File: (color: string, width: string, height: string) => (
+        <File className={`${width} ${height} ${color} mr-2`} />
+    ),
 };
 
 export function getIconForSlashCommand(command: string, customClassName: string | null = null) {
diff --git a/src/interface/web/app/components/agentCard/agentCard.tsx b/src/interface/web/app/components/agentCard/agentCard.tsx
index f90be51f..87ce30d2 100644
--- a/src/interface/web/app/components/agentCard/agentCard.tsx
+++ b/src/interface/web/app/components/agentCard/agentCard.tsx
@@ -92,6 +92,7 @@ import ShareLink from "@/app/components/shareLink/shareLink";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export interface AgentData {
     slug: string;
@@ -453,7 +454,9 @@ export function AgentCard(props: AgentCardProps) {
                                 <DialogHeader>
                                     <div className="flex items-center">
                                         {getIconFromIconName(props.data.icon, props.data.color)}
-                                        <p className="font-bold text-lg">{props.data.name}</p>
+                                        <p className="font-bold text-lg">
+                                            <DialogTitle>{props.data.name}</DialogTitle>
+                                        </p>
                                     </div>
                                 </DialogHeader>
                                 <div className="max-h-[60vh] overflow-y-scroll text-neutral-500 dark:text-white">
@@ -649,6 +652,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
     };
 
     const handleSubmit = (values: any) => {
+        console.log("Submitting", values);
         props.onSubmit(values);
         setIsSaving(true);
     };
@@ -937,7 +941,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                 </FormDescription>
                                 <FormControl>
                                     <Textarea
-                                        className="dark:bg-muted"
+                                        className="dark:bg-muted focus:outline-none focus-visible:border-orange-500 focus-visible:border-2"
                                         placeholder="You are an excellent biologist, at the top of your field in marine biology."
                                         {...field}
                                     />
@@ -967,7 +971,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                             ? `${field.value.length} files selected`
                                             : "Select files"}
                                     </CollapsibleTrigger>
-                                    <CollapsibleContent>
+                                    <CollapsibleContent className="m-1">
                                         <Command>
                                             <AlertDialog open={warning !== null || error != null}>
                                                 <AlertDialogContent>
@@ -1040,6 +1044,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                                                         <CommandItem
                                                             value={file}
                                                             key={file}
+                                                            className="break-all"
                                                             onSelect={() => {
                                                                 const currentFiles =
                                                                     props.form.getValues("files") ||
@@ -1257,83 +1262,88 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
 
     return (
         <Form {...props.form}>
-            <form
-                onSubmit={props.form.handleSubmit(handleSubmit)}
-                className="space-y-6 pb-4 h-full flex flex-col justify-between"
-            >
-                <Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
-                    <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
+            <ScrollArea className="h-full">
+                <form
+                    onSubmit={props.form.handleSubmit(handleSubmit)}
+                    className="space-y-6 pb-4 px-4 h-full flex flex-col justify-between"
+                >
+                    <Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
+                        <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
+                            {formGroups.map((group) => (
+                                <TabsTrigger
+                                    key={group.tabName}
+                                    value={group.tabName}
+                                    className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
+                                    onClick={() =>
+                                        setCurrentStep(
+                                            formGroups.findIndex(
+                                                (g) => g.tabName === group.tabName,
+                                            ),
+                                        )
+                                    }
+                                >
+                                    {group.label}{" "}
+                                    {!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
                         {formGroups.map((group) => (
-                            <TabsTrigger
-                                key={group.tabName}
-                                value={group.tabName}
-                                className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
-                                onClick={() =>
-                                    setCurrentStep(
-                                        formGroups.findIndex((g) => g.tabName === group.tabName),
-                                    )
-                                }
-                            >
-                                {group.label}{" "}
-                                {!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
-                            </TabsTrigger>
+                            <TabsContent key={group.tabName} value={group.tabName}>
+                                {group.fields.map((field) => renderFormField(field.name))}
+                            </TabsContent>
                         ))}
-                    </TabsList>
-                    {formGroups.map((group) => (
-                        <TabsContent key={group.tabName} value={group.tabName}>
-                            {group.fields.map((field) => renderFormField(field.name))}
-                        </TabsContent>
-                    ))}
-                </Tabs>
-                <div className="flex justify-between mt-4">
+                    </Tabs>
+
+                    {props.errors && (
+                        <Alert className="bg-secondary border-none my-4">
+                            <AlertDescription className="flex items-center gap-1">
+                                <ShieldWarning
+                                    weight="fill"
+                                    className="h-4 w-4 text-yellow-400 inline"
+                                />
+                                <span>{props.errors}</span>
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                </form>
+            </ScrollArea>
+            <div className="flex justify-between mt-1 left-0 right-0 bg-background p-1">
+                <Button
+                    type="button"
+                    variant={"outline"}
+                    onClick={handlePrevious}
+                    disabled={currentStep === 0}
+                    className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
+                >
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    Previous
+                </Button>
+                {currentStep < formGroups.length - 1 ? (
                     <Button
                         type="button"
                         variant={"outline"}
-                        onClick={handlePrevious}
-                        disabled={currentStep === 0}
+                        onClick={handleNext}
+                        disabled={
+                            !areRequiredFieldsCompletedForCurrentStep(formGroups[currentStep])
+                        }
                         className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
                     >
-                        <ArrowLeft className="mr-2 h-4 w-4" />
-                        Previous
+                        Continue
+                        <ArrowRight className="ml-2 h-4 w-4" />
+                    </Button>
+                ) : (
+                    <Button
+                        type="submit"
+                        variant={"outline"}
+                        disabled={isSaving}
+                        onClick={props.form.handleSubmit(handleSubmit)}
+                        className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
+                    >
+                        <FloppyDisk className="h-4 w-4 mr-2" />
+                        {isSaving ? "Booting..." : "Save"}
                     </Button>
-                    {currentStep < formGroups.length - 1 ? (
-                        <Button
-                            type="button"
-                            variant={"outline"}
-                            onClick={handleNext}
-                            disabled={
-                                !areRequiredFieldsCompletedForCurrentStep(formGroups[currentStep])
-                            }
-                            className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
-                        >
-                            Continue
-                            <ArrowRight className="ml-2 h-4 w-4" />
-                        </Button>
-                    ) : (
-                        <Button
-                            type="submit"
-                            variant={"outline"}
-                            disabled={isSaving}
-                            className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
-                        >
-                            <FloppyDisk className="h-4 w-4 mr-2" />
-                            {isSaving ? "Booting..." : "Save"}
-                        </Button>
-                    )}
-                </div>
-
-                {props.errors && (
-                    <Alert className="bg-secondary border-none my-4">
-                        <AlertDescription className="flex items-center gap-1">
-                            <ShieldWarning
-                                weight="fill"
-                                className="h-4 w-4 text-yellow-400 inline"
-                            />
-                            <span>{props.errors}</span>
-                        </AlertDescription>
-                    </Alert>
                 )}
-            </form>
+            </div>
         </Form>
     );
 }
diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx
index 52c6806e..53ad20bf 100644
--- a/src/interface/web/app/components/allConversations/allConversations.tsx
+++ b/src/interface/web/app/components/allConversations/allConversations.tsx
@@ -420,9 +420,6 @@ interface SessionsAndFilesProps {
 function SessionsAndFiles(props: SessionsAndFilesProps) {
     return (
         <div>
-            {props.data && props.data.length > 5 && (
-                <ChatSessionsModal data={props.organizedData} sideBarOpen={props.sideBarOpen} />
-            )}
             {props.sideBarOpen && (
                 <ScrollArea>
                     <ScrollAreaScrollbar
@@ -461,6 +458,9 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                     </div>
                 </ScrollArea>
             )}
+            {props.data && props.data.length > 5 && (
+                <ChatSessionsModal data={props.organizedData} sideBarOpen={props.sideBarOpen} />
+            )}
         </div>
     );
 }
@@ -786,7 +786,7 @@ function ChatSessionsModal({ data, sideBarOpen }: ChatSessionsModalProps) {
             >
                 <span className="flex items-center gap-1">
                     <ChatsCircle className="inline h-4 w-4 mr-1" />
-                    {sideBarOpen ? "Find Conversation" : ""}
+                    {sideBarOpen ? "All Conversations" : ""}
                 </span>
             </DialogTrigger>
             <DialogContent>
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 73dfce36..3553a71c 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -65,6 +65,12 @@ export interface AttachedFileText {
     size: number;
 }
 
+export enum ChatInputFocus {
+    MESSAGE = "message",
+    FILE = "file",
+    RESEARCH = "research",
+}
+
 interface ChatInputProps {
     sendMessage: (message: string) => void;
     sendImage: (image: string) => void;
@@ -77,11 +83,15 @@ interface ChatInputProps {
     agentColor?: string;
     isResearchModeEnabled?: boolean;
     setTriggeredAbort: (value: boolean) => void;
+    prefillMessage?: string;
+    focus?: ChatInputFocus;
 }
 
 export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((props, ref) => {
     const [message, setMessage] = useState("");
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const fileInputButtonRef = useRef<HTMLButtonElement>(null);
+    const researchModeRef = useRef<HTMLButtonElement>(null);
 
     const [warning, setWarning] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
@@ -125,6 +135,22 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
         }
     }, [uploading]);
 
+    useEffect(() => {
+        if (props.prefillMessage === undefined) return;
+        setMessage(props.prefillMessage);
+        chatInputRef?.current?.focus();
+    }, [props.prefillMessage]);
+
+    useEffect(() => {
+        if (props.focus === ChatInputFocus.MESSAGE) {
+            chatInputRef?.current?.focus();
+        } else if (props.focus === ChatInputFocus.FILE) {
+            fileInputButtonRef.current?.focus();
+        } else if (props.focus === ChatInputFocus.RESEARCH) {
+            researchModeRef.current?.focus();
+        }
+    }, [props.focus]);
+
     useEffect(() => {
         async function fetchImageData() {
             if (imagePaths.length > 0) {
@@ -625,14 +651,24 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                     />
 
                     <div className="flex items-center">
-                        <Button
-                            variant={"ghost"}
-                            className="!bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
-                            disabled={props.sendDisabled || !props.isLoggedIn}
-                            onClick={handleFileButtonClick}
-                        >
-                            <Paperclip className="w-8 h-8" />
-                        </Button>
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant={"ghost"}
+                                        className="!bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                                        disabled={props.sendDisabled || !props.isLoggedIn}
+                                        onClick={handleFileButtonClick}
+                                        ref={fileInputButtonRef}
+                                    >
+                                        <Paperclip className="w-8 h-8" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    Attach a PDF, plain text file, or image
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
                     </div>
                     <div className="flex-grow flex flex-col w-full gap-1.5 relative">
                         <Textarea
@@ -732,6 +768,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                 variant="ghost"
                                 className="float-right justify-center gap-1 flex items-center p-1.5 mr-2 h-fit"
                                 disabled={props.sendDisabled || !props.isLoggedIn}
+                                ref={researchModeRef}
                                 onClick={() => {
                                     setUseResearchMode(!useResearchMode);
                                     chatInputRef?.current?.focus();
diff --git a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
index 923a16fe..5cda444a 100644
--- a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
+++ b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
@@ -299,6 +299,7 @@ function EmailSignInContext({
                         className="p-6 w-[300px] mx-auto rounded-lg"
                         disabled={checkEmail}
                         value={email}
+                        autoFocus={true}
                         onKeyDown={(e) => {
                             if (e.key === "Enter") {
                                 handleMagicLinkSignIn();
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index 434a9e2e..aa6f2177 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -104,7 +104,7 @@ export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) {
                                     <Avatar
                                         className={`${sideBarIsOpen ? "h-8 w-8" : "h-6 w-6"} border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}
                                     >
-                                        <AvatarImage src={userData?.photo} alt="user profile" />
+                                        <AvatarImage src={userData.photo} alt="user profile" />
                                         <AvatarFallback className="bg-transparent hover:bg-muted">
                                             {userData.username[0].toUpperCase()}
                                         </AvatarFallback>
diff --git a/src/interface/web/app/components/suggestions/suggestionCard.tsx b/src/interface/web/app/components/suggestions/suggestionCard.tsx
index 5f22de1f..50127d51 100644
--- a/src/interface/web/app/components/suggestions/suggestionCard.tsx
+++ b/src/interface/web/app/components/suggestions/suggestionCard.tsx
@@ -1,25 +1,32 @@
 "use client";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription } from "@/components/ui/card";
 
 import styles from "./suggestions.module.css";
-import { converColorToBgGradient } from "@/app/common/colorUtils";
 import { convertSuggestionTitleToIconClass } from "./suggestionsData";
+import { MagicWand, XCircle } from "@phosphor-icons/react";
 
-interface SuggestionCardProps {
+interface StepOneSuggestionCardProps {
     title: string;
     body: string;
-    link: string;
     color: string;
 }
 
-export default function SuggestionCard(data: SuggestionCardProps) {
-    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
+interface StepOneSuggestionRevertCardProps extends StepOneSuggestionCardProps {
+    onClick: () => void;
+}
+
+interface StepTwoSuggestionCardProps {
+    prompt: string;
+}
+
+export function StepOneSuggestionCard(data: StepOneSuggestionCardProps) {
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2 animate-fade-in-up`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     const cardContent = (
         <Card className={cardClassName}>
             <div className="flex w-full">
-                <CardContent className="m-0 p-2 w-full">
+                <CardContent className="m-0 p-2 w-full flex flex-row">
                     {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
                     <CardDescription
                         className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}
@@ -31,11 +38,48 @@ export default function SuggestionCard(data: SuggestionCardProps) {
         </Card>
     );
 
-    return data.link ? (
-        <a href={data.link} className="no-underline">
-            {cardContent}
-        </a>
-    ) : (
-        cardContent
+    return cardContent;
+}
+
+export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
+    const cardClassName = `${styles.card} md:h-fit sm:w-full h-fit cursor-pointer md:p-2`;
+
+    return (
+        <Card className={cardClassName}>
+            <div className="flex w-full items-center">
+                <CardContent className="m-0 p-1 w-full flex flex-row items-center">
+                    <MagicWand
+                        weight="thin"
+                        className="w-4 h-4 text-muted-foreground inline-flex mr-1 text-opacity-40"
+                    />
+                    <CardDescription
+                        className={`sm:line-clamp-2 md:line-clamp-4 break-words whitespace-pre-wrap max-w-full text-sm text-wrap text-black dark:text-white`}
+                    >
+                        {data.prompt}
+                    </CardDescription>
+                </CardContent>
+            </div>
+        </Card>
+    );
+}
+
+export function StepOneSuggestionRevertCard(data: StepOneSuggestionRevertCardProps) {
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-fit cursor-pointer m-2 md:p-1 animate-fade-in-up border-opacity-50 shadow-none`;
+    const descriptionClassName = `${styles.text} dark:text-white`;
+
+    return (
+        <Card className={cardClassName} onClick={data.onClick}>
+            <div className="flex w-full h-full items-center justify-center">
+                <CardContent className="m-0 p-2 w-full flex flex-row items-center justify-center">
+                    {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
+                    <CardDescription
+                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full text-center`}
+                    >
+                        {data.body}
+                    </CardDescription>
+                    <XCircle className="w-6 h-6 text-muted-foreground inline-flex ml-1" />
+                </CardContent>
+            </div>
+        </Card>
     );
 }
diff --git a/src/interface/web/app/components/suggestions/suggestionsData.ts b/src/interface/web/app/components/suggestions/suggestionsData.ts
index 43058bd6..8e86adfd 100644
--- a/src/interface/web/app/components/suggestions/suggestionsData.ts
+++ b/src/interface/web/app/components/suggestions/suggestionsData.ts
@@ -1,14 +1,7 @@
 import { getIconFromIconName } from "@/app/common/iconUtils";
-
-export interface Suggestion {
-    type: string;
-    color: string;
-    description: string;
-    link: string;
-}
+import { ChatInputFocus } from "../chatInputArea/chatInputArea";
 
 export enum SuggestionType {
-    Automation = "Automation",
     Paint = "Paint",
     Travel = "Travel",
     Health = "Health",
@@ -22,6 +15,20 @@ export enum SuggestionType {
     Fun = "Fun",
     Code = "Code",
     Finance = "Finance",
+    Document = "Document",
+    Image = "Image",
+}
+
+export interface StepOneSuggestion {
+    type: SuggestionType;
+    color: string;
+    actionTagline: string;
+    focus: ChatInputFocus;
+    intent: string;
+}
+
+export interface StepTwoSuggestion {
+    prompt: string;
 }
 
 const suggestionToColorMap: { [key in SuggestionType]?: string } = {};
@@ -30,7 +37,6 @@ function addSuggestionColorMap(type: SuggestionType, color: string) {
     suggestionToColorMap[type] = color;
 }
 
-addSuggestionColorMap(SuggestionType.Automation, "blue");
 addSuggestionColorMap(SuggestionType.Paint, "indigo");
 addSuggestionColorMap(SuggestionType.Travel, "yellow");
 addSuggestionColorMap(SuggestionType.Health, "teal");
@@ -41,15 +47,15 @@ addSuggestionColorMap(SuggestionType.Food, "yellow");
 addSuggestionColorMap(SuggestionType.Interviewing, "orange");
 addSuggestionColorMap(SuggestionType.Home, "green");
 addSuggestionColorMap(SuggestionType.Fun, "fuchsia");
-addSuggestionColorMap(SuggestionType.Code, "purple");
+addSuggestionColorMap(SuggestionType.Code, "teal");
 addSuggestionColorMap(SuggestionType.Finance, "green");
 addSuggestionColorMap(SuggestionType.Math, "blue");
+addSuggestionColorMap(SuggestionType.Image, "red");
+addSuggestionColorMap(SuggestionType.Document, "orange");
 
 const DEFAULT_COLOR = "orange";
 
 export function convertSuggestionTitleToIconClass(title: string, color: string) {
-    if (title === SuggestionType.Automation)
-        return getIconFromIconName("Robot", color, "w-6", "h-6");
     if (title === SuggestionType.Paint) return getIconFromIconName("Palette", color, "w-6", "h-6");
     if (title === SuggestionType.PopCulture)
         return getIconFromIconName("Confetti", color, "w-6", "h-6");
@@ -68,806 +74,377 @@ export function convertSuggestionTitleToIconClass(title: string, color: string)
     if (title === SuggestionType.Finance) return getIconFromIconName("Wallet", color, "w-6", "h-6");
     if (title === SuggestionType.Math)
         return getIconFromIconName("MathOperations", color, "w-6", "h-6");
+    if (title === SuggestionType.Image) return getIconFromIconName("Image", color, "w-6", "h-6");
+    if (title === SuggestionType.Document) return getIconFromIconName("File", color, "w-6", "h-6");
     else return getIconFromIconName("Lightbulb", color, "w-6", "h-6");
 }
 
-export const suggestionsData: Suggestion[] = [
+export const stepOneSuggestions: StepOneSuggestion[] = [
     {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Send me a summary of HackerNews every morning.",
-        link: "/automations?subject=Summarizing%20Top%20Headlines%20from%20HackerNews&query=Summarize%20the%20top%20headlines%20on%20HackerNews&crontime=00%207%20*%20*%20*",
+        type: SuggestionType.Document,
+        actionTagline: "Analyze document",
+        color: suggestionToColorMap[SuggestionType.Document] || DEFAULT_COLOR,
+        focus: ChatInputFocus.FILE,
+        intent: "Read this document and explain",
     },
     {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Compose a bedtime story that a five-year-old might enjoy.",
-        link: "/automations?subject=Daily%20Bedtime%20Story&query=Compose%20a%20bedtime%20story%20that%20a%20five-year-old%20might%20enjoy.%20It%20should%20not%20exceed%20five%20paragraphs.%20Appeal%20to%20the%20imagination%2C%20but%20weave%20in%20learnings.&crontime=0%2021%20*%20*%20*",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a picture of a sunset but it's made of stained glass tiles",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Search for the best attractions in Austria Hungary",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Generate a weekly meal plan with recipes.",
-        link: "/automations?subject=Weekly Meal Plan&query=Create a weekly meal plan with 7 dinner recipes, including ingredients and brief instructions. Focus on balanced, healthy meals.&crontime=0 18 * * 0",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a futuristic cityscape with flying cars.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Find the top-rated coffee shops in Seattle.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Send daily motivational quotes.",
-        link: "/automations?subject=Daily Motivation&query=Provide an inspiring quote for the day along with a brief explanation of its meaning.&crontime=0 7 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Create an abstract representation of jazz music.",
-        link: "",
+        type: SuggestionType.Code,
+        actionTagline: "Write code",
+        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Write a program that",
     },
     {
         type: SuggestionType.Learning,
+        actionTagline: "Explain concept",
         color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Research the history of the Eiffel Tower.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Compile a weekly news summary.",
-        link: "/automations?subject=Weekly News Digest&query=Summarize the top 5 most important news stories of the week across various categories.&crontime=0 18 * * 5",
+        focus: ChatInputFocus.MESSAGE,
+        intent: "I want to understand a concept",
     },
     {
         type: SuggestionType.Paint,
+        actionTagline: "Create image",
         color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a portrait of a cat wearing a Victorian-era costume.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Find beginner-friendly hiking trails near Los Angeles.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Generate a daily writing prompt.",
-        link: "/automations?subject=Daily Writing Prompt&query=Create an engaging writing prompt suitable for short story or journal writing.&crontime=0 9 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Create a surrealist landscape inspired by Salvador Dali.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Research the benefits and drawbacks of electric vehicles.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Send weekly language learning tips for Spanish.",
-        link: "/automations?subject=Spanish Learning Tips&query=Provide a useful Spanish language learning tip, including vocabulary, grammar, or cultural insight.&crontime=0 19 * * 2",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a scene from a fairy tale in the style of Studio Ghibli.",
-        link: "",
-    },
-    {
-        type: SuggestionType.PopCulture,
-        color: "yellow",
-        description: "Find the best-rated science fiction books of the last decade.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a still life of exotic fruits in a neon color palette.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Research the most eco-friendly cities in Europe.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Send daily reminders for habit tracking.",
-        link: "/automations?subject=Habit Tracker&query=Generate a daily reminder to track habits, including a motivational message.&crontime=0 20 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Create a digital painting of a cyberpunk street market.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Summarize the biography of this figure: https://en.wikipedia.org/wiki/Jean_Baptiste_Point_du_Sable",
-        link: "",
-    },
-    {
-        type: SuggestionType.Language,
-        color: "blue",
-        description: "Send daily Spanish phrases used in Latin America.",
-        link: "/automations?subject=Daily Latin American Spanish&query=Provide a common Spanish phrase or slang term used in Latin America, its meaning, and an example of usage. Include which countries it's most common in.&crontime=0 8 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Create a vibrant painting inspired by Frida Kahlo's style.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Food,
-        color: suggestionToColorMap[SuggestionType.Food] || DEFAULT_COLOR,
-        description: "Find the best empanada recipe from Colombia.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Weekly update on the Brazilian startup ecosystems.",
-        link: "/automations?subject=LatAm Startup News&query=Provide a summary of the most significant developments in Latin American startup ecosystems this week. Include notable funding rounds, expansions, or policy changes.&crontime=0 18 * * 5",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description:
-            "Paint a colorful scene of a traditional Day of the Dead celebration in Mexico.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Paint a picture of",
     },
+    // {
+    //     type: SuggestionType.Travel,
+    //     actionTagline: "Find a place",
+    //     color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Find a place that is",
+    // },
     {
         type: SuggestionType.Language,
+        actionTagline: "Translate text",
         color: suggestionToColorMap[SuggestionType.Language] || DEFAULT_COLOR,
-        description: "Daily Swahili phrase with English translation.",
-        link: "/automations?subject=Daily Swahili Lesson&query=Provide a common Swahili phrase or proverb, its English translation, and a brief explanation of its cultural significance in East Africa.&crontime=0 7 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Create a digital painting of the Serengeti during wildebeest migration.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Research the top M-Pesa alternatives in East Africa.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Weekly update on East African tech startups and innovations.",
-        link: "/automations?subject=East African Tech News&query=Summarize the most significant developments in East African tech startups and innovations this week. Include notable funding rounds, new product launches, or policy changes affecting the tech ecosystem.&crontime=0 18 * * 5",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a colorful scene inspired by Maasai traditional clothing and jewelry.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Weekly summary of EU policy changes and their impact.",
-        link: "/automations?subject=EU Policy Update&query=Summarize the most significant EU policy changes or proposals from this week. Explain their potential impact on European citizens and businesses.&crontime=0 17 * * 5",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a digital landscape of the Northern Lights over the Norwegian fjords.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Daily East Asian proverb with explanation.",
-        link: "/automations?subject=East Asian Wisdom&query=Provide a proverb from an East Asian language (rotating through Chinese, Japanese, Korean, etc.), its English translation, and a brief explanation of its cultural significance and practical application.&crontime=0 7 * * *",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description:
-            "Create a digital painting in the style of traditional Chinese ink wash landscape.",
-        link: "",
-    },
-    {
-        type: SuggestionType.PopCulture,
-        color: "yellow",
-        description: "Research the latest trends in K-pop and its global influence.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Weekly summary of technological innovations from East Asian tech giants.",
-        link: "/automations?subject=East Asian Tech Update&query=Summarize the most significant technological innovations or product launches from major East Asian tech companies (e.g., Samsung, Sony, Alibaba, Tencent) this week. Explain their potential impact on global markets.&crontime=0 18 * * 5",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a vibrant scene of a Japanese cherry blossom festival.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Daily South Asian recipe with cultural significance.",
-        link: "/automations?subject=South Asian Culinary Journey&query=Provide a traditional South Asian recipe (rotating through Indian, Pakistani, Bangladeshi, Sri Lankan, etc. cuisines), including ingredients, brief instructions, and its cultural significance or origin story.&crontime=0 10 * * *",
-    },
-    {
-        type: SuggestionType.PopCulture,
-        color: suggestionToColorMap[SuggestionType.PopCulture] || DEFAULT_COLOR,
-        description: "Research the impact of Bollywood on global cinema and fashion.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Automation,
-        color: suggestionToColorMap[SuggestionType.Automation] || DEFAULT_COLOR,
-        description: "Weekly update on South Asian startup ecosystems and innovations.",
-        link: "/automations?subject=South Asian Startup Pulse&query=Summarize the most significant developments in South Asian startup ecosystems this week. Include notable funding rounds, innovative solutions to local challenges, and any policy changes affecting the tech landscape in countries like India, Bangladesh, Pakistan, and Sri Lanka.&crontime=0 18 * * 5",
-    },
-    {
-        type: SuggestionType.Interviewing,
-        color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
-        description: "Create interview prep questions for a consulting job.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Interviewing,
-        color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
-        description: "What information should I include in a CV for a PhD application?",
-        link: "",
-    },
-    {
-        type: SuggestionType.Home,
-        color: suggestionToColorMap[SuggestionType.Home] || DEFAULT_COLOR,
-        description: "Recommend plants that can grow well indoors.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Suggest healthy meal prep ideas for a busy work week.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "List effective time management techniques for students.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Provide tips for improving public speaking skills.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Recommend books for learning about personal finance.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Home,
-        color: suggestionToColorMap[SuggestionType.Home] || DEFAULT_COLOR,
-        description: "Suggest ways to reduce plastic waste in daily life.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Create a beginner's guide to meditation and mindfulness.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Give me some tips for improving my sleep quality.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "What are weight loss strategies supported by clinical studies?",
-        link: "",
-    },
-    {
-        type: SuggestionType.Fun,
-        color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
-        description: "List creative date ideas for couples on a budget.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
-        description: "Provide tips for writing an effective resume.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Explain the concept of recursion with a simple coding example.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Provide a coding challenge to reverse a string without using built-in functions.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Explain the difference between 'let', 'const', and 'var' in JavaScript.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Create a coding exercise to implement a basic sorting algorithm (e.g., bubble sort).",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Explain object-oriented programming principles with a simple class example.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Provide a coding challenge to find the longest palindromic substring in a given string.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Explain the concept of asynchronous programming with a JavaScript Promise example.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Create a coding exercise to implement a basic data structure (e.g., linked list or stack).",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Explain the time and space complexity of common algorithms (e.g., binary search).",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description:
-            "Provide a coding challenge to implement a simple REST API using Node.js and Express.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Compare popular web frameworks in Rust and Python",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Craft an off-beat itinerary for a weekend in Lagos, Nigeria.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Language,
-        color: suggestionToColorMap[SuggestionType.Language] || DEFAULT_COLOR,
-        description: "Teach me about declensions in Latin.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Break down the concept of photosynthesis for a middle school student.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Use the Socratic method to explore the causes of World War I.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Explain the water cycle using an analogy suitable for elementary students.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Guide a high school student through solving a quadratic equation step-by-step.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Create a series of questions to help a student discover the principles of basic economics.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Develop a hands-on experiment to demonstrate the concept of density to middle schoolers.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Use guided discovery to help a student understand the structure of DNA.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Create a personalized learning plan for a student struggling with grammar concepts.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Design a series of questions to encourage critical thinking about climate change.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Develop a step-by-step guide for conducting a basic science experiment on plant growth.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Provide a detailed explanation about how to manage type 2 diabetes.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Explain the effects a stroke might have on the body.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Describe the recommended steps for preventing heart disease.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description:
-            "Explain the differences between various types of headaches and their treatments.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Provide an overview of the most effective stress management techniques.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Explain the importance of vaccination and how vaccines work.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Describe the symptoms and treatment options for depression.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Explain the process of digestion and common digestive disorders.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description:
-            "Provide an overview of the different types of cancer screenings and their importance.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Explain the effects of sleep deprivation on physical and mental health.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Fun,
-        color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
-        description: "Create a list of fun activities for a family game night.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Translate this text",
     },
+    // {
+    //     type: SuggestionType.PopCulture,
+    //     actionTagline: "Explain a trend",
+    //     color: suggestionToColorMap[SuggestionType.PopCulture] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Tell me more about this phenomenon",
+    // },
+    // {
+    //     type: SuggestionType.Food,
+    //     actionTagline: "Find a recipe",
+    //     color: suggestionToColorMap[SuggestionType.Food] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Find a recipe for",
+    // },
+    // {
+    //     type: SuggestionType.Interviewing,
+    //     actionTagline: "Career advice",
+    //     color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Help me prepare for an interview",
+    // },
+    // {
+    //     type: SuggestionType.Fun,
+    //     actionTagline: "Get creative",
+    //     color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Suggest a fun activity",
+    // },
     {
         type: SuggestionType.Finance,
+        actionTagline: "Explain finance",
         color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description:
-            "Explain the concept of compound interest and its importance in long-term savings.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description:
-            "Provide an overview of different types of retirement accounts (e.g., 401(k), IRA, Roth IRA).",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Describe strategies for creating and sticking to a personal budget.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Explain the basics of stock market investing for beginners.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Outline the pros and cons of renting vs. buying a home.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description:
-            "Describe different methods for paying off debt, such as the snowball and avalanche methods.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Explain the importance of an emergency fund and how to build one.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description:
-            "Provide an overview of different types of insurance and their importance in financial planning.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Explain the concept of diversification in investment portfolios.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Describe strategies for minimizing tax liability legally.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the flow of money in a personal budget.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a mind map summarizing key concepts from the Industrial Revolution.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a diagram of the life cycle of a flowering plant.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the structure of the United States government.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the architecture of a computer network.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Health,
-        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
-        description: "Draw a diagram of the digestive system.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Travel,
-        color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
-        description: "Create a sample flow chart of a travel itinerary for CDMX.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Food,
-        color: suggestionToColorMap[SuggestionType.Food] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the steps in a recipe for lasagna.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Fun,
-        color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
-        description: "Draw a diagram of a basketball court, labeling the different positions.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Code,
-        color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
-        description: "Draw a diagram of a simple electrical circuit.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the notes on a musical staff.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a plot diagram of A Tale of Two Cities.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a timeline of major events in World War II.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a free-body diagram of a falling object.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw the Lewis structure of a water molecule.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a diagram of the layers of the Earth.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a diagram of the solar system.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Draw a graph of the equation y = x^2.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Help me build mental models for finance",
     },
     {
         type: SuggestionType.Math,
+        actionTagline: "Explain math",
         color: suggestionToColorMap[SuggestionType.Math] || DEFAULT_COLOR,
-        description: "Create a chart for the sine and cosine functions over one period.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Help me understand the math behind",
     },
     {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a bar chart comparing the average monthly temperatures of two cities.",
-        link: "",
+        type: SuggestionType.Image,
+        actionTagline: "Analyze image",
+        color: suggestionToColorMap[SuggestionType.Image] || DEFAULT_COLOR,
+        focus: ChatInputFocus.FILE,
+        intent: "Explain the significance of this image",
     },
     {
-        type: SuggestionType.Finance,
-        color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
-        description: "Create a line chart showing the GDP growth rate over the last decade.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a chart for historical rainfall in Karachi last year.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Create a chart showing the trend in smartphone usage in Korea over the past five years.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description:
-            "Create a chart comparing the performance statistics of Lebron James and Kobe Bryant.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a chart showing historical casualties in major wars.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a chart illustrating the relationship between velocity and time.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a chart showing the frequency of earthquakes over the past century.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Math,
-        color: suggestionToColorMap[SuggestionType.Math] || DEFAULT_COLOR,
-        description: "Create a scatter plot of a set of random data points.",
-        link: "",
+        type: SuggestionType.Health,
+        actionTagline: "Improve health",
+        color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
+        focus: ChatInputFocus.MESSAGE,
+        intent: "Help me improve my health",
     },
+    // {
+    //     type: SuggestionType.Home,
+    //     actionTagline: "Improve home",
+    //     color: suggestionToColorMap[SuggestionType.Home] || DEFAULT_COLOR,
+    //     focus: ChatInputFocus.MESSAGE,
+    //     intent: "Help me improve my home",
+    // },
 ];
+
+export const stepTwoSuggestion: { [key: string]: StepTwoSuggestion[] } = {
+    [SuggestionType.Paint]: [
+        {
+            prompt: "Paint a picture of a sunset but it's made of stained glass tiles.",
+        },
+        {
+            prompt: "Paint a futuristic cityscape with flying cars.",
+        },
+        {
+            prompt: "Paint a neon-lit street scene with reflections in the rain.",
+        },
+        {
+            prompt: "Paint a portrait of a person with a unique hairstyle.",
+        },
+        {
+            prompt: "Paint a landscape of a forest with a hidden waterfall.",
+        },
+    ],
+    [SuggestionType.Travel]: [
+        {
+            prompt: "Search for the best attractions in Austria Hungary.",
+        },
+        {
+            prompt: "Find the top-rated coffee shops in Seattle.",
+        },
+        {
+            prompt: "Research the best hiking trails in the Swiss Alps.",
+        },
+        {
+            prompt: "What is the best time of year to visit Bali?",
+        },
+        {
+            prompt: "Find the best hidden gems in Nairobi.",
+        },
+    ],
+    [SuggestionType.Health]: [
+        {
+            prompt: "Explain to me how to improve my posture.",
+        },
+        {
+            prompt: "Tell me how what I eat affects my insulin levels.",
+        },
+        {
+            prompt: "Suggest healthy meal prep ideas for a busy work week.",
+        },
+        {
+            prompt: "Recommend good exercises to improve my flexibility.",
+        },
+        {
+            prompt: "Explain the benefits of a plant-based diet",
+        },
+    ],
+    [SuggestionType.Learning]: [
+        {
+            prompt: "/research look up how Alpha Fold works and explain it to me.",
+        },
+        {
+            prompt: "Explain the key equations of general relativity.",
+        },
+        {
+            prompt: "Explain the concept of 'machine learning' in simple terms.",
+        },
+        {
+            prompt: "What are the key principles of Stoicism?",
+        },
+        {
+            prompt: "/research what are the causes behind the breakthroughs in AI in the last 5 years.",
+        },
+    ],
+    [SuggestionType.Language]: [
+        {
+            prompt: "Translate the following text into Spanish: 'Hello, how are you?'",
+        },
+        {
+            prompt: "Tell me how to greet someone in Arabic.",
+        },
+        {
+            prompt: "Explain the difference between the words 'ser' and 'estar' in Spanish.",
+        },
+        {
+            prompt: "Translate the following text into French: 'Where is the nearest metro station?'",
+        },
+        {
+            prompt: "Translate the following text into Japanese: 'I am learning Japanese.'",
+        },
+    ],
+    [SuggestionType.PopCulture]: [
+        {
+            prompt: "Find the best-rated science fiction books of the last decade.",
+        },
+        {
+            prompt: "Research the latest trends in K-pop and its global influence.",
+        },
+        {
+            prompt: "Explain the plot of the movie 'Doctor Zhivago' in detail.",
+        },
+        {
+            prompt: "What fashion is trending in jackets this season?",
+        },
+        {
+            prompt: "Find the best indie movies of the last year",
+        },
+    ],
+    [SuggestionType.Food]: [
+        {
+            prompt: "Find the best empanada recipe from Colombia.",
+        },
+        {
+            prompt: "Suggest a healthy alternative to a popular fast food dish.",
+        },
+        {
+            prompt: "Find the best recipe for a vegan chocolate cake.",
+        },
+        {
+            prompt: "Suggest a recipe for a quick and easy weeknight dinner.",
+        },
+        {
+            prompt: "Create a diagram that explains how to make a traditional Italian lasagna.",
+        },
+    ],
+    [SuggestionType.Interviewing]: [
+        {
+            prompt: "Create interview prep questions for a consulting job.",
+        },
+        {
+            prompt: "What information should I include in a CV for a PhD application?",
+        },
+        {
+            prompt: "Suggest questions to ask during a job interview.",
+        },
+        {
+            prompt: "What are the best ways to prepare for a technical interview?",
+        },
+        {
+            prompt: "How can I improve my public speaking skills for an interview?",
+        },
+    ],
+    [SuggestionType.Home]: [
+        {
+            prompt: "Recommend plants that can grow well indoors.",
+        },
+        {
+            prompt: "Suggest ways to reduce plastic waste in daily life.",
+        },
+        {
+            prompt: "Create a list of eco-friendly home cleaning products.",
+        },
+        {
+            prompt: "Suggest ways to make a small apartment feel more spacious.",
+        },
+        {
+            prompt: "Recommend ways to reduce energy consumption in a home.",
+        },
+    ],
+    [SuggestionType.Fun]: [
+        {
+            prompt: "List creative date ideas for couples on a budget.",
+        },
+        {
+            prompt: "Create a list of fun activities for a family game night.",
+        },
+        {
+            prompt: "Give me three questions that can help me get to know someone better.",
+        },
+        {
+            prompt: "Suggest fun activities for a group of friends on a rainy day.",
+        },
+        {
+            prompt: "How can I improve my drawing skills?",
+        },
+    ],
+    [SuggestionType.Code]: [
+        {
+            prompt: "Teach me how to write a simple 'Hello World' program in Python.",
+        },
+        {
+            prompt: "Write a single page application using vanilla HTML, CSS, and JavaScript that displays a list of items.",
+        },
+        {
+            prompt: "Explain the concept of recursion with a simple coding example.",
+        },
+        {
+            prompt: "Create a simple calculator app using React.",
+        },
+        {
+            prompt: "Write a function that takes an array of numbers and returns the sum of all the numbers.",
+        },
+    ],
+    [SuggestionType.Finance]: [
+        {
+            prompt: "Create a chart to explain the concept of compound interest and its importance in long-term savings.",
+        },
+        {
+            prompt: "Provide an overview of different types of retirement accounts (e.g., 401(k), IRA, Roth IRA).",
+        },
+        {
+            prompt: "Explain the concept of diversification and its importance in investing.",
+        },
+        {
+            prompt: "Create a budgeting plan for someone who wants to save money for a vacation.",
+        },
+        {
+            prompt: "Explain the difference between a stock and a bond.",
+        },
+    ],
+    [SuggestionType.Math]: [
+        {
+            prompt: "Create a series of questions to help a student discover the principles of basic economics.",
+        },
+        {
+            prompt: "Develop a hands-on experiment to demonstrate the concept of density to middle schoolers.",
+        },
+        {
+            prompt: "Explain the concept of a derivative and its applications in real life.",
+        },
+        {
+            prompt: "Create a lesson plan to teach students about the Pythagorean theorem.",
+        },
+        {
+            prompt: "Explain the concept of a limit in calculus and its importance in mathematics.",
+        },
+    ],
+    [SuggestionType.Image]: [
+        {
+            prompt: "Explain what is happening in this photograph",
+        },
+        {
+            prompt: "Show me how I can improve this UI design",
+        },
+        {
+            prompt: "Explain the significance of this historical painting",
+        },
+        {
+            prompt: "Can you explain this physics diagram to me?",
+        },
+        {
+            prompt: "Explain this meme to me",
+        },
+    ],
+    [SuggestionType.Document]: [
+        {
+            prompt: "Summarize the key concepts in this document.",
+        },
+        {
+            prompt: "Provide a detailed explanation about the topic of this document.",
+        },
+        {
+            prompt: "Create a visual representation of the information in this document.",
+        },
+        {
+            prompt: "Find the main arguments in this document.",
+        },
+        {
+            prompt: "Explain the relevance of this document to various other disciplines.",
+        },
+    ],
+};
+
+export function getStepTwoSuggestions(type: string): StepTwoSuggestion[] {
+    return stepTwoSuggestion[type] || [];
+}
diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css
index faca97c7..eb1b09fe 100644
--- a/src/interface/web/app/page.module.css
+++ b/src/interface/web/app/page.module.css
@@ -98,16 +98,24 @@ div.homeGreetings {
 
     div.chatBox {
         padding: 0;
-        height: 100vh;
+        height: 100%;
     }
 
     div.chatLayout {
         gap: 0;
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
+        display: flex;
+        height: 100%;
     }
 
     div.homeGreetings {
-        grid-template-rows: auto 1fr;
+        display: flex;
+        flex-direction: column;
+    }
+
+    div.inputBox {
+        margin-bottom: 0;
+        height: fit-content;
+        align-items: flex-end;
+        margin-top: auto;
     }
 }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index b22bf231..b99ffaf6 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -5,17 +5,28 @@ import "katex/dist/katex.min.css";
 
 import React, { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
-import { ArrowCounterClockwise } from "@phosphor-icons/react";
+import { ArrowsVertical } from "@phosphor-icons/react";
 
 import { Card, CardTitle } from "@/components/ui/card";
-import SuggestionCard from "@/app/components/suggestions/suggestionCard";
+import {
+    StepOneSuggestionCard,
+    StepOneSuggestionRevertCard,
+    StepTwoSuggestionCard,
+} from "@/app/components/suggestions/suggestionCard";
 import Loading from "@/app/components/loading/loading";
 import {
     AttachedFileText,
     ChatInputArea,
+    ChatInputFocus,
     ChatOptions,
 } from "@/app/components/chatInputArea/chatInputArea";
-import { Suggestion, suggestionsData } from "@/app/components/suggestions/suggestionsData";
+import {
+    StepOneSuggestion,
+    stepOneSuggestions,
+    StepTwoSuggestion,
+    getStepTwoSuggestions,
+    SuggestionType,
+} from "@/app/components/suggestions/suggestionsData";
 import LoginPrompt from "@/app/components/loginPrompt/loginPrompt";
 
 import {
@@ -49,20 +60,21 @@ interface ChatBodyDataProps {
     isLoadingUserConfig: boolean;
 }
 
-function FisherYatesShuffle(array: any[]) {
-    for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-}
-
 function ChatBodyData(props: ChatBodyDataProps) {
     const [message, setMessage] = useState("");
+    const [prefillMessage, setPrefillMessage] = useState("");
+    const [chatInputFocus, setChatInputFocus] = useState<ChatInputFocus>(ChatInputFocus.MESSAGE);
     const [images, setImages] = useState<string[]>([]);
     const [processingMessage, setProcessingMessage] = useState(false);
     const [greeting, setGreeting] = useState("");
-    const [shuffledOptions, setShuffledOptions] = useState<Suggestion[]>([]);
+    const [stepOneSuggestionOptions, setStepOneSuggestionOptions] = useState<StepOneSuggestion[]>(
+        stepOneSuggestions.slice(0, 3),
+    );
+    const [stepTwoSuggestionOptions, setStepTwoSuggestionOptions] = useState<StepTwoSuggestion[]>(
+        [],
+    );
+    const [selectedStepOneSuggestion, setSelectedStepOneSuggestion] =
+        useState<StepOneSuggestion | null>(null);
     const [hoveredAgent, setHoveredAgent] = useState<string | null>(null);
     const debouncedHoveredAgent = useDebounce(hoveredAgent, 500);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -102,11 +114,6 @@ function ChatBodyData(props: ChatBodyDataProps) {
         router.push(`/agents?agent=${agentSlug}`);
     };
 
-    function shuffleAndSetOptions() {
-        const shuffled = FisherYatesShuffle(suggestionsData);
-        setShuffledOptions(shuffled.slice(0, 3));
-    }
-
     useEffect(() => {
         if (props.isLoadingUserConfig) return;
 
@@ -131,12 +138,6 @@ function ChatBodyData(props: ChatBodyDataProps) {
         setGreeting(greeting);
     }, [props.isLoadingUserConfig, props.userConfig]);
 
-    useEffect(() => {
-        if (props.chatOptionsData) {
-            shuffleAndSetOptions();
-        }
-    }, [props.chatOptionsData]);
-
     useEffect(() => {
         const agents = (agentsData || []).filter((agent) => agent !== null && agent !== undefined);
         setAgents(agents);
@@ -146,10 +147,10 @@ function ChatBodyData(props: ChatBodyDataProps) {
         // generate colored icons for the available agents
         const agentIcons = agents.map((agent) => getIconFromIconName(agent.icon, agent.color)!);
         setAgentIcons(agentIcons);
-    }, [agentsData, props.isMobileWidth]);
+    }, [agentsData]);
 
-    function shuffleSuggestionsCards() {
-        shuffleAndSetOptions();
+    function showAllSuggestionsCards() {
+        setStepOneSuggestionOptions(stepOneSuggestions);
     }
 
     useEffect(() => {
@@ -193,27 +194,12 @@ function ChatBodyData(props: ChatBodyDataProps) {
         return () => scrollAreaEl?.removeEventListener("scroll", handleScroll);
     }, []);
 
-    function fillArea(link: string, type: string, prompt: string) {
-        if (!link) {
-            let message_str = "";
-            prompt = prompt.charAt(0).toLowerCase() + prompt.slice(1);
-
-            if (type === "Online Search") {
-                message_str = "/online " + prompt;
-            } else if (type === "Paint") {
-                message_str = "/image " + prompt;
-            } else {
-                message_str = prompt;
-            }
-            // Get the textarea element
-            const message_area = document.getElementById("message") as HTMLTextAreaElement;
-
-            if (message_area) {
-                // Update the value directly
-                message_area.value = message_str;
-                setMessage(message_str);
-            }
-        }
+    function clickStepOneSuggestion(suggestion: StepOneSuggestion) {
+        setPrefillMessage(suggestion.intent);
+        const stepTwoSuggestions = getStepTwoSuggestions(suggestion.type);
+        setSelectedStepOneSuggestion(suggestion);
+        setStepTwoSuggestionOptions(stepTwoSuggestions);
+        setChatInputFocus(suggestion.focus);
     }
 
     return (
@@ -306,13 +292,15 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     </ScrollArea>
                 )}
             </div>
-            <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit max-w-screen-md"}`}>
+            <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-full max-w-screen-md"}`}>
                 {!props.isMobileWidth && (
                     <div
                         className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}
                     >
                         <ChatInputArea
                             isLoggedIn={props.isLoggedIn}
+                            prefillMessage={prefillMessage}
+                            focus={chatInputFocus}
                             sendMessage={(message) => setMessage(message)}
                             sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
                             sendDisabled={processingMessage}
@@ -326,44 +314,77 @@ function ChatBodyData(props: ChatBodyDataProps) {
                         />
                     </div>
                 )}
-                <div
-                    className={`${styles.suggestions} w-full ${props.isMobileWidth ? "grid" : "flex flex-row"} justify-center items-center`}
-                >
-                    {shuffledOptions.map((suggestion, index) => (
-                        <div
-                            key={`${suggestion.type} ${suggestion.description}`}
-                            onClick={(event) => {
-                                if (props.isLoggedIn) {
-                                    fillArea(
-                                        suggestion.link,
-                                        suggestion.type,
-                                        suggestion.description,
-                                    );
-                                } else {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    setShowLoginPrompt(true);
-                                }
-                            }}
-                        >
-                            <SuggestionCard
-                                key={suggestion.type + Math.random()}
-                                title={suggestion.type}
-                                body={suggestion.description}
-                                link={suggestion.link}
-                                color={suggestion.color}
-                            />
-                        </div>
-                    ))}
-                </div>
-                <div className="flex items-center justify-center margin-auto">
-                    <button
-                        onClick={shuffleSuggestionsCards}
-                        className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700"
+                {stepTwoSuggestionOptions.length == 0 && (
+                    <div
+                        className={`${styles.suggestions} w-full ${props.isMobileWidth ? (stepOneSuggestions.length > 3 ? "grid grid-cols-2" : "grid grid-cols-3") : "grid grid-cols-3"} "justify-center items-center"`}
                     >
-                        More Ideas <ArrowCounterClockwise className="h-4 w-4 inline" />
-                    </button>
-                </div>
+                        {stepOneSuggestionOptions.map((suggestion, index) => (
+                            <div
+                                key={`${suggestion.type} ${suggestion.actionTagline}`}
+                                onClick={(event) => {
+                                    if (props.isLoggedIn) {
+                                        clickStepOneSuggestion(suggestion);
+                                    } else {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        setShowLoginPrompt(true);
+                                    }
+                                }}
+                            >
+                                <StepOneSuggestionCard
+                                    key={suggestion.type + Math.random()}
+                                    title={suggestion.type}
+                                    body={suggestion.actionTagline}
+                                    color={suggestion.color}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {stepTwoSuggestionOptions.length == 0 &&
+                    stepOneSuggestionOptions.length < stepOneSuggestions.length && (
+                        <div className="flex items-center justify-center margin-auto">
+                            <button
+                                onClick={showAllSuggestionsCards}
+                                className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700"
+                            >
+                                Show All <ArrowsVertical className="h-4 w-4 inline" />
+                            </button>
+                        </div>
+                    )}
+                {selectedStepOneSuggestion && (
+                    <StepOneSuggestionRevertCard
+                        title={selectedStepOneSuggestion.type}
+                        body={selectedStepOneSuggestion.actionTagline}
+                        color={selectedStepOneSuggestion.color}
+                        onClick={() => {
+                            setPrefillMessage("");
+                            setSelectedStepOneSuggestion(null);
+                            setStepTwoSuggestionOptions([]);
+                            setChatInputFocus(ChatInputFocus.MESSAGE);
+                        }}
+                    />
+                )}
+                {stepTwoSuggestionOptions.length > 0 && (
+                    <div
+                        className={`w-full ${props.isMobileWidth ? "grid" : "grid grid-cols-1"} justify-center items-center gap-2 p-2`}
+                    >
+                        {stepTwoSuggestionOptions.map((suggestion, index) => (
+                            <div
+                                key={`${suggestion.prompt} ${index}`}
+                                className={`w-full cursor-pointer animate-fade-in-up`}
+                                onClick={(event) => {
+                                    setMessage(suggestion.prompt);
+                                }}
+                            >
+                                <StepTwoSuggestionCard
+                                    key={suggestion.prompt}
+                                    prompt={suggestion.prompt}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
             {props.isMobileWidth && (
                 <>
diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index 0fe35b97..d94a3a9d 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -515,7 +515,7 @@ export default function SettingsView() {
     const title = "Settings";
 
     const cardClassName =
-        "w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg border dark:border-none dark:bg-muted border-opacity-50";
+        "w-full lg:w-5/12 grid grid-flow-column border border-gray-300 shadow-md rounded-lg border dark:border-none dark:bg-muted border-opacity-50";
 
     useEffect(() => {
         setUserConfig(initialUserConfig);
diff --git a/src/interface/web/app/settings/settings.module.css b/src/interface/web/app/settings/settings.module.css
index 20317590..d0c8c1b3 100644
--- a/src/interface/web/app/settings/settings.module.css
+++ b/src/interface/web/app/settings/settings.module.css
@@ -8,8 +8,6 @@ div.page {
 div.contentBody {
     display: grid;
     margin: auto;
-    margin-left: 20vw;
-    margin-top: 1rem;
 }
 
 div.phoneInput {
diff --git a/src/interface/web/tailwind.config.ts b/src/interface/web/tailwind.config.ts
index 904d0fa3..07bd0754 100644
--- a/src/interface/web/tailwind.config.ts
+++ b/src/interface/web/tailwind.config.ts
@@ -133,11 +133,16 @@ const config = {
                         opacity: "0",
                     },
                 },
+                fadeInUp: {
+                    "0%": { opacity: "0", transform: "translateY(20px)" },
+                    "100%": { opacity: "1", transform: "translateY(0)" },
+                },
             },
             animation: {
                 "accordion-down": "accordion-down 0.2s ease-out",
                 "accordion-up": "accordion-up 0.2s ease-out",
                 "caret-blink": "caret-blink 1.25s ease-out infinite",
+                "fade-in-up": "fadeInUp 0.3s ease-out",
             },
         },
     },
diff --git a/src/khoj/routers/auth.py b/src/khoj/routers/auth.py
index e5202f5b..ff42e070 100644
--- a/src/khoj/routers/auth.py
+++ b/src/khoj/routers/auth.py
@@ -3,6 +3,7 @@ import datetime
 import logging
 import os
 from typing import Optional
+from urllib.parse import parse_qs, urlencode, urlparse, urlunparse
 
 import requests
 from fastapi import APIRouter, Depends
@@ -13,6 +14,7 @@ from starlette.requests import Request
 from starlette.responses import HTMLResponse, RedirectResponse, Response
 from starlette.status import HTTP_302_FOUND
 
+from khoj.app.settings import DISABLE_HTTPS
 from khoj.database.adapters import (
     acreate_khoj_token,
     aget_or_create_user_by_email,
@@ -28,7 +30,6 @@ from khoj.routers.helpers import (
     update_telemetry_state,
 )
 from khoj.utils import state
-from khoj.utils.helpers import in_debug_mode
 
 logger = logging.getLogger(__name__)
 
@@ -204,23 +205,33 @@ async def auth_post(request: Request):
 
 @auth_router.get("/redirect")
 async def auth(request: Request):
-    next_url = get_next_url(request)
-    for q in request.query_params:
-        if q in ["code", "state", "scope", "authuser", "prompt", "session_state", "access_type"]:
-            continue
-        if q != "next":
-            next_url += f"&{q}={request.query_params[q]}"
+    next_url_path = get_next_url(request)
 
-    code = request.query_params.get("code")
+    # Add query params from request, excluding OAuth params to next URL
+    oauth_params = {"code", "state", "scope", "authuser", "prompt", "session_state", "access_type", "next"}
+    query_params = {param: value for param, value in request.query_params.items() if param not in oauth_params}
 
-    # 1. Construct the full redirect URI including domain
+    # Rebuild next URL with updated query params
+    parsed_next_url_path = urlparse(next_url_path)
+    next_url = urlunparse(
+        (
+            parsed_next_url_path.scheme,
+            parsed_next_url_path.netloc,
+            parsed_next_url_path.path,
+            parsed_next_url_path.params,
+            urlencode(query_params, doseq=True),
+            parsed_next_url_path.fragment,
+        )
+    )
+
+    # Construct the full redirect URI including domain
     base_url = str(request.base_url).rstrip("/")
-
-    if not in_debug_mode():
+    if not DISABLE_HTTPS:
         base_url = base_url.replace("http://", "https://")
-
     redirect_uri = f"{base_url}{request.app.url_path_for('auth')}"
 
+    # Build the payload for the token request
+    code = request.query_params.get("code")
     payload = {
         "code": code,
         "client_id": os.environ["GOOGLE_CLIENT_ID"],
@@ -229,12 +240,14 @@ async def auth(request: Request):
         "grant_type": "authorization_code",
     }
 
+    # Request the token from Google
     verified_data = requests.post(
         "https://oauth2.googleapis.com/token",
         headers={"Content-Type": "application/x-www-form-urlencoded"},
         data=payload,
     )
 
+    # Validate the OAuth response
     if verified_data.status_code != 200:
         logger.error(f"Token request failed: {verified_data.text}")
         try:
@@ -245,20 +258,24 @@ async def auth(request: Request):
         verified_data.raise_for_status()
 
     credential = verified_data.json().get("id_token")
-
     if not credential:
         logger.error("Missing id_token in OAuth response")
         return RedirectResponse(url="/login?error=invalid_token", status_code=HTTP_302_FOUND)
 
+    # Validate the OAuth token
     try:
         idinfo = id_token.verify_oauth2_token(credential, google_requests.Request(), os.environ["GOOGLE_CLIENT_ID"])
     except OAuthError as error:
         return HTMLResponse(f"<h1>{error.error}</h1>")
+
+    # Get or create the authenticated user in the database
     khoj_user = await get_or_create_user(idinfo)
 
+    # Set the user session if the user is authenticated
     if khoj_user:
         request.session["user"] = dict(idinfo)
 
+        # Send a welcome email to new users
         if datetime.timedelta(minutes=3) > (datetime.datetime.now(datetime.timezone.utc) - khoj_user.date_joined):
             asyncio.create_task(send_welcome_email(idinfo["name"], idinfo["email"]))
             update_telemetry_state(
@@ -269,6 +286,7 @@ async def auth(request: Request):
             )
             logger.log(logging.INFO, f"🥳 New User Created: {khoj_user.uuid}")
 
+    # Redirect the user to the next URL
     return RedirectResponse(url=next_url, status_code=HTTP_302_FOUND)
 
 
diff --git a/src/khoj/routers/helpers.py b/src/khoj/routers/helpers.py
index c77b9443..4e458651 100644
--- a/src/khoj/routers/helpers.py
+++ b/src/khoj/routers/helpers.py
@@ -325,7 +325,7 @@ async def acheck_if_safe_prompt(system_prompt: str, user: KhojUser = None, lax:
 
         response = response.strip()
         try:
-            response = json.loads(response)
+            response = clean_json(response)
             is_safe = response.get("safe", "True") == "True"
             if not is_safe:
                 reason = response.get("reason", "")