diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index f569046ea..d87008971 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -22,6 +22,13 @@ export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
 export const CODE_DIALOG_SUBTITLE =
   "Export your flow to use it with this code.";
 
+/**
+ * The base text for subtitle of Chat Form
+ * @constant
+ */
+export const CHAT_FORM_DIALOG_SUBTITLE =
+  "Export your flow to use it with this code.";
+
 /**
  * The base text for subtitle of Edit Node Dialog
  * @constant
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index e1d2e1067..0d139a2d6 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -5,7 +5,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare } from "lucide-react";
+import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare, Variable } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -21,7 +21,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { dark } from "@mui/material/styles/createPalette";
-import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
+import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
 import { postValidateCode } from "../../controllers/API";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -38,6 +38,8 @@ import { Textarea } from "../../components/ui/textarea";
 import { Badge } from "../../components/ui/badge";
 import { Separator } from "../../components/ui/separator";
 import { Switch } from "../../components/ui/switch";
+import { CardTitle } from "../../components/ui/card";
+import ToggleShadComponent from "../../components/toggleShadComponent";
 
 export default function FormModal({
   flow,
@@ -359,19 +361,26 @@ export default function FormModal({
   return (
     <Dialog open={open} onOpenChange={setModalOpen}>
       <DialogTrigger className="hidden"></DialogTrigger>
-      <DialogContent className="min-w-[95vw]">
+      <DialogContent className="min-w-[80vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
-            <span className="pr-2">Chat Form</span>
+            <span className="pr-2">Chat</span>
             <TerminalSquare
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
+          <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
         <div className="flex h-[80vh] w-full mt-2">
-          <div className="w-2/5 h-full flex flex-col justify-start mr-6">
+          <div className="w-1/4 h-full flex flex-col justify-start mr-6">
+          <div className="flex py-2">
+              <Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
+              <span className="text-md font-semibold text-gray-800 dark:text-white">
+                Input Variables
+              </span>
+            </div>
             <Accordion type="single" collapsible className="w-full">
               {tabsState[id.current].formKeysData.input_keys.map((i, k) => (
                 <AccordionItem key={k} value={i}>
@@ -379,8 +388,13 @@ export default function FormModal({
                   <AccordionContent>
                     <div className="p-1 flex flex-col gap-4">
                     <div className="flex items-center space-x-2">
-                      <Switch id="airplane-mode" checked={chatKey === k } onCheckedChange={(value) => handleOnCheckedChange(value, k)}/>
                       <Label htmlFor="airplane-mode">From Chat</Label>
+                      <ToggleShadComponent
+                                  enabled={chatKey === k }
+                                  setEnabled={(value) => handleOnCheckedChange(value, k)}
+                                  size="small"
+                                  disabled={false}
+                                />
                     </div>
                       <Textarea value={keysValue[k]} onChange={(e) => setKeysValue({...keysValue, [k]: e.target.value})} disabled={chatKey === k} placeholder="Enter text..."></Textarea>
                     </div>