diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 2e0893321..966d8f26d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -48,8 +48,8 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
-                " input-dialog input-primary"
+              : (disabled ? " input-disable input-ring " : "") +
+                " input-primary text-muted-foreground "
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 4b4f9c1e1..84041837b 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -69,8 +69,8 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
-                " input-dialog input-primary"
+              : (disabled ? " input-disable text-ring " : "") +
+                " input-primary text-muted-foreground "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a16aec367..5af8ff70a 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -216,7 +216,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply input-primary pr-7 mx-2
   }
   .input-disable{
-    @apply bg-input text-muted-foreground
+    @apply bg-border placeholder:text-ring border-transparent
   }
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
@@ -920,11 +920,14 @@ The cursor: default; property value restores the browser's default cursor style
   .form-modal-lock-true {
     @apply bg-input text-black
   }
+  .form-modal-no-input {
+    @apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300
+  }
   .form-modal-lock-false {
     @apply bg-white text-black
   }
   .form-modal-lockchat {
-    @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
+    @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }
   .form-modal-send-icon-position {
     @apply absolute bottom-2 right-4
@@ -938,6 +941,9 @@ The cursor: default; property value restores the browser's default cursor style
   .form-modal-send-icon {
     @apply mr-2 h-5 w-5 rotate-[44deg]
   }
+  .form-modal-play-icon {
+    @apply h-5 w-5 mx-1
+  }
   .form-modal-chat-position {
     @apply flex-max-width px-2 py-6 pl-4 pr-9
   }
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index fc012f6b7..21ef182c3 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import { TerminalSquare } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
@@ -37,9 +37,6 @@ export default function CodeAreaModal({
     detail: { error: string; traceback: string };
   }>(null);
   const ref = useRef();
-  useEffect(() => {
-    setValue(code);
-  }, [code, setValue]);
 
   function setModalOpen(x: boolean) {
     if (x === false) {
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 975a152f5..fa9637e1b 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -1,4 +1,4 @@
-import { Lock, LucideSend } from "lucide-react";
+import { Lock, LucideSend, Sparkles } from "lucide-react";
 import { useEffect } from "react";
 import { classNames } from "../../../utils";
 
@@ -49,24 +49,37 @@ export default function ChatInput({
           setChatValue(e.target.value);
         }}
         className={classNames(
-          lockChat || noInput
-            ? " form-modal-lock-true bg-input "
+          lockChat
+            ? " form-modal-lock-true bg-input"
+            : noInput
+            ? "form-modal-no-input bg-input"
             : " form-modal-lock-false",
+
           "form-modal-lockchat"
         )}
-        placeholder={"Send a message..."}
+        placeholder={
+          noInput
+            ? "No chat input variables found. Click to run your flow."
+            : "Send a message..."
+        }
       />
       <div className="form-modal-send-icon-position">
         <button
           className={classNames(
             "form-modal-send-button",
-            chatValue === "" ? "text-primary" : " bg-indigo-600 text-background"
+            noInput
+              ? "bg-indigo-600 text-background"
+              : chatValue === ""
+              ? "text-primary"
+              : "bg-emerald-600 text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}
         >
           {lockChat ? (
             <Lock className="form-modal-lock-icon" aria-hidden="true" />
+          ) : noInput ? (
+            <Sparkles className="form-modal-play-icon" aria-hidden="true" />
           ) : (
             <LucideSend className="form-modal-send-icon " aria-hidden="true" />
           )}
diff --git a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
index c78974a3c..884215ebb 100644
--- a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
@@ -1,5 +1,5 @@
 import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
-import { FC, memo, useState } from "react";
+import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { programmingLanguages } from "../../../../utils";
@@ -9,7 +9,7 @@ interface Props {
   value: string;
 }
 
-export const CodeBlock: FC<Props> = memo(({ language, value }) => {
+export function CodeBlock({ language, value }) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
@@ -63,7 +63,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       </div>
 
       <SyntaxHighlighter
-        className=" w-[47vw]"
+        className="overflow-auto"
         language={language}
         style={oneDark}
         customStyle={{ margin: 0 }}
@@ -72,5 +72,5 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       </SyntaxHighlighter>
     </div>
   );
-});
+}
 CodeBlock.displayName = "CodeBlock";
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 6e7457549..4e941e278 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -1,6 +1,6 @@
 import Convert from "ansi-to-html";
 import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -75,47 +75,60 @@ export default function ChatMessage({
             <div className="w-full">
               <div className="w-full dark:text-white">
                 <div className="w-full">
-                  <ReactMarkdown
-                    remarkPlugins={[remarkGfm, remarkMath]}
-                    rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose inline-block break-words text-primary
+                  {useMemo(
+                    () => (
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm, remarkMath]}
+                        rehypePlugins={[rehypeMathjax]}
+                        className="markdown prose inline-block break-words text-primary
                      dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]"
-                    components={{
-                      code({ node, inline, className, children, ...props }) {
-                        if (children.length) {
-                          if (children[0] === "▍") {
-                            return (
-                              <span className="form-modal-markdown-span">
-                                ▍
-                              </span>
+                        components={{
+                          code: ({
+                            node,
+                            inline,
+                            className,
+                            children,
+                            ...props
+                          }) => {
+                            if (children.length) {
+                              if (children[0] === "▍") {
+                                return (
+                                  <span className="form-modal-markdown-span">
+                                    ▍
+                                  </span>
+                                );
+                              }
+
+                              children[0] = (children[0] as string).replace(
+                                "`▍`",
+                                "▍"
+                              );
+                            }
+
+                            const match = /language-(\w+)/.exec(
+                              className || ""
                             );
-                          }
 
-                          children[0] = (children[0] as string).replace(
-                            "`▍`",
-                            "▍"
-                          );
-                        }
-
-                        const match = /language-(\w+)/.exec(className || "");
-
-                        return !inline ? (
-                          <CodeBlock
-                            key={Math.random()}
-                            language={(match && match[1]) || ""}
-                            value={String(children).replace(/\n$/, "")}
-                            {...props}
-                          />
-                        ) : (
-                          <code className={className} {...props}>
-                            {children}
-                          </code>
-                        );
-                      },
-                    }}
-                  >
-                    {chat.message.toString()}
-                  </ReactMarkdown>
+                            return !inline ? (
+                              <CodeBlock
+                                key={Math.random()}
+                                language={(match && match[1]) || ""}
+                                value={String(children).replace(/\n$/, "")}
+                                {...props}
+                              />
+                            ) : (
+                              <code className={className} {...props}>
+                                {children}
+                              </code>
+                            );
+                          },
+                        }}
+                      >
+                        {chat.message.toString()}
+                      </ReactMarkdown>
+                    ),
+                    [chat.message.toString()]
+                  )}
                 </div>
                 {chat.files && (
                   <div className="my-2 w-full">
@@ -138,51 +151,56 @@ export default function ChatMessage({
         </div>
       ) : (
         <div>
-          <button
-            className="form-modal-initial-prompt-btn"
-            onClick={() => {
-              setPromptOpen((old) => !old);
-            }}
-          >
-            Display Prompt
-            <ChevronDown
-              className={
-                "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
-              }
-            />
-          </button>
-          <span className="prose inline-block break-words text-primary dark:prose-invert">
-            {promptOpen
-              ? template?.split("\n")?.map((line, index) => {
-                  const regex = /{([^}]+)}/g;
-                  let match;
-                  let parts = [];
-                  let lastIndex = 0;
-                  while ((match = regex.exec(line)) !== null) {
-                    // Push text up to the match
-                    if (match.index !== lastIndex) {
-                      parts.push(line.substring(lastIndex, match.index));
-                    }
-                    // Push div with matched text
-                    if (chat.message[match[1]]) {
-                      parts.push(
-                        <span className="my-1 rounded-md bg-indigo-100">
-                          {chat.message[match[1]]}
-                        </span>
-                      );
-                    }
+          {template && (
+            <>
+              <button
+                className="form-modal-initial-prompt-btn"
+                onClick={() => {
+                  setPromptOpen((old) => !old);
+                }}
+              >
+                Display Prompt
+                <ChevronDown
+                  className={
+                    "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
+                  }
+                />
+              </button>
+              <span className="prose inline-block break-words text-primary dark:prose-invert">
+                {promptOpen
+                  ? template?.split("\n")?.map((line, index) => {
+                      const regex = /{([^}]+)}/g;
+                      let match;
+                      let parts = [];
+                      let lastIndex = 0;
+                      while ((match = regex.exec(line)) !== null) {
+                        // Push text up to the match
+                        if (match.index !== lastIndex) {
+                          parts.push(line.substring(lastIndex, match.index));
+                        }
+                        // Push div with matched text
+                        if (chat.message[match[1]]) {
+                          parts.push(
+                            <span className="my-1 rounded-md bg-indigo-100">
+                              {chat.message[match[1]]}
+                            </span>
+                          );
+                        }
 
-                    // Update last index
-                    lastIndex = regex.lastIndex;
-                  }
-                  // Push text after the last match
-                  if (lastIndex !== line.length) {
-                    parts.push(line.substring(lastIndex));
-                  }
-                  return <p>{parts}</p>;
-                })
-              : chat.message[chat.chatKey]}
-          </span>
+                        // Update last index
+                        lastIndex = regex.lastIndex;
+                      }
+                      // Push text after the last match
+                      if (lastIndex !== line.length) {
+                        parts.push(line.substring(lastIndex));
+                      }
+                      return <p>{parts}</p>;
+                    })
+                  : chat.message[chat.chatKey]}
+              </span>
+            </>
+          )}
+          {chat.message[chat.chatKey]}
         </div>
       )}
     </div>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index fe121a030..739308b92 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -226,4 +226,4 @@ module.exports = {
     require("@tailwindcss/typography"),
     require("daisyui"),
   ],
-};
\ No newline at end of file
+};