diff --git a/src/interface/web/app/common/iconUtils.tsx b/src/interface/web/app/common/iconUtils.tsx
index 0ef7f09a..e1ebdd78 100644
--- a/src/interface/web/app/common/iconUtils.tsx
+++ b/src/interface/web/app/common/iconUtils.tsx
@@ -168,6 +168,9 @@ 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`} />
+    ),
 };
 
 export function getIconForSlashCommand(command: string, customClassName: string | null = null) {
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 73dfce36..59ce835d 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) {
+            setMessage(props.prefillMessage);
+        }
+    }, [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) {
@@ -630,6 +656,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                             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>
@@ -732,6 +759,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/suggestions/suggestionCard.tsx b/src/interface/web/app/components/suggestions/suggestionCard.tsx
index 5f22de1f..8671dff6 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 { ArrowLeft, ArrowRight } 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`;
     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,45 @@ 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-2 w-full flex flex-row items-center">
+                    <ArrowRight className="w-6 h-6 text-muted-foreground inline-flex mr-1" />
+                    <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-[200px] cursor-pointer md:p-2 animate-fade-in-up`;
+    const descriptionClassName = `${styles.text} dark:text-white`;
+
+    return (
+        <Card className={cardClassName} onClick={data.onClick}>
+            <div className="flex w-full">
+                <CardContent className="m-0 p-2 w-full flex flex-row">
+                    <ArrowLeft className="w-4 h-4 text-muted-foreground inline-flex mr-1" />
+                    {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`}
+                    >
+                        {data.body}
+                    </CardDescription>
+                </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..ab3e5a14 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,19 @@ export enum SuggestionType {
     Fun = "Fun",
     Code = "Code",
     Finance = "Finance",
+    Document = "Document",
+    Image = "Image",
+}
+
+export interface StepOneSuggestion {
+    type: SuggestionType;
+    color: string;
+    description: string;
+    focus: ChatInputFocus;
+}
+
+export interface StepTwoSuggestion {
+    prompt: string;
 }
 
 const suggestionToColorMap: { [key in SuggestionType]?: string } = {};
@@ -30,7 +36,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");
@@ -44,12 +49,12 @@ addSuggestionColorMap(SuggestionType.Fun, "fuchsia");
 addSuggestionColorMap(SuggestionType.Code, "purple");
 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 +73,217 @@ 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");
     else return getIconFromIconName("Lightbulb", color, "w-6", "h-6");
 }
 
-export const suggestionsData: Suggestion[] = [
-    {
-        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.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*",
-    },
+export const stepOneSuggestions: StepOneSuggestion[] = [
     {
         type: SuggestionType.Paint,
+        description: "Create image",
         color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a picture of a sunset but it's made of stained glass tiles",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
-        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.Learning,
+        type: SuggestionType.Document,
+        description: "Summarize text",
         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",
-    },
-    {
-        type: SuggestionType.Paint,
-        color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
-        description: "Paint a portrait of a cat wearing a Victorian-era costume.",
-        link: "",
+        focus: ChatInputFocus.FILE,
     },
     {
         type: SuggestionType.Travel,
+        description: "Find a place",
         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,
     },
     {
         type: SuggestionType.Language,
+        description: "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 * * *",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.PopCulture,
+        description: "Find a movie",
         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: "",
-    },
-    {
-        type: SuggestionType.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: "",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.Food,
+        description: "Find a recipe",
         color: suggestionToColorMap[SuggestionType.Food] || DEFAULT_COLOR,
-        description: "Draw a diagram illustrating the steps in a recipe for lasagna.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+    },
+    {
+        type: SuggestionType.Interviewing,
+        description: "Prepare for interview",
+        color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.Fun,
+        description: "Find a game",
         color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
-        description: "Draw a diagram of a basketball court, labeling the different positions.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.Code,
+        description: "Write 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: "",
-    },
-    {
-        type: SuggestionType.Math,
-        color: suggestionToColorMap[SuggestionType.Math] || DEFAULT_COLOR,
-        description: "Create a chart for the sine and cosine functions over one period.",
-        link: "",
-    },
-    {
-        type: SuggestionType.Learning,
-        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
-        description: "Create a bar chart comparing the average monthly temperatures of two cities.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.Finance,
+        description: "Create chart",
         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: "",
+        focus: ChatInputFocus.MESSAGE,
     },
     {
         type: SuggestionType.Math,
+        description: "Solve a problem",
         color: suggestionToColorMap[SuggestionType.Math] || DEFAULT_COLOR,
-        description: "Create a scatter plot of a set of random data points.",
-        link: "",
+        focus: ChatInputFocus.MESSAGE,
+    },
+    {
+        type: SuggestionType.Image,
+        description: "Explain image",
+        color: suggestionToColorMap[SuggestionType.Image] || DEFAULT_COLOR,
+        focus: ChatInputFocus.MESSAGE,
+    },
+    {
+        type: SuggestionType.Learning,
+        description: "Explain concept",
+        color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
+        focus: ChatInputFocus.MESSAGE,
     },
 ];
+
+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.",
+        },
+    ],
+    [SuggestionType.Travel]: [
+        {
+            prompt: "Search for the best attractions in Austria Hungary.",
+        },
+        {
+            prompt: "Find the top-rated coffee shops in Seattle.",
+        },
+    ],
+    [SuggestionType.Health]: [
+        {
+            prompt: "Generate a weekly meal plan with recipes.",
+        },
+        {
+            prompt: "Suggest healthy meal prep ideas for a busy work week.",
+        },
+    ],
+    [SuggestionType.Learning]: [
+        {
+            prompt: "Research the history of the Eiffel Tower.",
+        },
+        {
+            prompt: "Summarize the biography of this figure: https://en.wikipedia.org/wiki/Jean_Baptiste_Point_du_Sable",
+        },
+    ],
+    [SuggestionType.Language]: [
+        {
+            prompt: "Translate the following text into Spanish: 'Hello, how are you?'",
+        },
+        {
+            prompt: "Tell me how to greet someone in Arabic.",
+        },
+    ],
+    [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.",
+        },
+    ],
+    [SuggestionType.Food]: [
+        {
+            prompt: "Find the best empanada recipe from Colombia.",
+        },
+        {
+            prompt: "Suggest a healthy alternative to a popular fast food dish.",
+        },
+    ],
+    [SuggestionType.Interviewing]: [
+        {
+            prompt: "Create interview prep questions for a consulting job.",
+        },
+        {
+            prompt: "What information should I include in a CV for a PhD application?",
+        },
+    ],
+    [SuggestionType.Home]: [
+        {
+            prompt: "Recommend plants that can grow well indoors.",
+        },
+        {
+            prompt: "Suggest ways to reduce plastic waste in daily life.",
+        },
+    ],
+    [SuggestionType.Fun]: [
+        {
+            prompt: "List creative date ideas for couples on a budget.",
+        },
+        {
+            prompt: "Create a list of fun activities for a family game night.",
+        },
+    ],
+    [SuggestionType.Code]: [
+        {
+            prompt: "Provide tips for writing an effective resume.",
+        },
+        {
+            prompt: "Explain the concept of recursion with a simple coding example.",
+        },
+    ],
+    [SuggestionType.Finance]: [
+        {
+            prompt: "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).",
+        },
+    ],
+    [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.",
+        },
+    ],
+    [SuggestionType.Image]: [
+        {
+            prompt: "Explain what is happening in this photograph",
+        },
+        {
+            prompt: "Show me how I can improve this UI design",
+        },
+    ],
+    [SuggestionType.Document]: [
+        {
+            prompt: "Summarize the key concepts in this document.",
+        },
+        {
+            prompt: "Provide a detailed explanation about the topic of this document.",
+        },
+    ],
+};
+
+export function getStepTwoSuggestions(type: string): StepTwoSuggestion[] {
+    return stepTwoSuggestion[type] || [];
+}
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index b22bf231..037ec032 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -8,14 +8,25 @@ import useSWR from "swr";
 import { ArrowCounterClockwise } 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 {
@@ -38,6 +49,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 { Button } from "@/components/ui/button";
 
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
@@ -59,10 +71,19 @@ function FisherYatesShuffle(array: any[]) {
 
 function ChatBodyData(props: ChatBodyDataProps) {
     const [message, setMessage] = useState("");
+    const [prefilledMessage, setPrefilledMessage] = 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[]>(
+        [],
+    );
+    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);
@@ -103,8 +124,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
     };
 
     function shuffleAndSetOptions() {
-        const shuffled = FisherYatesShuffle(suggestionsData);
-        setShuffledOptions(shuffled.slice(0, 3));
+        const shuffled = FisherYatesShuffle(stepOneSuggestions);
+        setStepOneSuggestionOptions(shuffled.slice(0, 3));
     }
 
     useEffect(() => {
@@ -148,8 +169,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
         setAgentIcons(agentIcons);
     }, [agentsData, props.isMobileWidth]);
 
-    function shuffleSuggestionsCards() {
-        shuffleAndSetOptions();
+    function showAllSuggestionsCards() {
+        setStepOneSuggestionOptions(stepOneSuggestions);
     }
 
     useEffect(() => {
@@ -193,27 +214,22 @@ 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);
+    function clickStepOneSuggestion(suggestion: StepOneSuggestion) {
+        let message_str = "";
+        let prompt =
+            suggestion.description.charAt(0).toLowerCase() + suggestion.description.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);
-            }
+        if (suggestion.type === "Paint") {
+            message_str = "/image " + prompt;
+        } else {
+            message_str = prompt;
         }
+
+        setPrefilledMessage(message_str);
+        const stepTwoSuggestions = getStepTwoSuggestions(suggestion.type);
+        setSelectedStepOneSuggestion(suggestion);
+        setStepTwoSuggestionOptions(stepTwoSuggestions);
+        setChatInputFocus(ChatInputFocus.FILE);
     }
 
     return (
@@ -306,13 +322,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={prefilledMessage}
+                            focus={chatInputFocus}
                             sendMessage={(message) => setMessage(message)}
                             sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
                             sendDisabled={processingMessage}
@@ -327,43 +345,74 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     </div>
                 )}
                 <div
-                    className={`${styles.suggestions} w-full ${props.isMobileWidth ? "grid" : "flex flex-row"} justify-center items-center`}
+                    className={`${styles.suggestions} w-full ${props.isMobileWidth ? "grid" : "grid grid-cols-3"} 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}
-                            />
+                    {stepTwoSuggestionOptions.length == 0 &&
+                        stepOneSuggestionOptions.map((suggestion, index) => (
+                            <div
+                                key={`${suggestion.type} ${suggestion.description}`}
+                                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.description}
+                                    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"
+                            >
+                                More Actions <ArrowCounterClockwise className="h-4 w-4 inline" />
+                            </button>
                         </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"
+                    )}
+                {selectedStepOneSuggestion && (
+                    <StepOneSuggestionRevertCard
+                        title={selectedStepOneSuggestion.type}
+                        body={selectedStepOneSuggestion.description}
+                        color={selectedStepOneSuggestion.color}
+                        onClick={() => {
+                            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 pt-2`}
                     >
-                        More Ideas <ArrowCounterClockwise className="h-4 w-4 inline" />
-                    </button>
-                </div>
+                        {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/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",
             },
         },
     },