diff --git a/apps/browser/components/Chat.tsx b/apps/browser/components/Chat.tsx
index 747465dc..9c2efb8b 100644
--- a/apps/browser/components/Chat.tsx
+++ b/apps/browser/components/Chat.tsx
@@ -14,19 +14,19 @@ import Disclaimer from "@/components/modals/Disclaimer";
 import Logo from "@/components/Logo";
 import Button from "@/components/Button";
 import ChatInputButton from "@/components/ChatInputButton";
-import TextField from "@/components/TextField";
 import React, { useState, ChangeEvent } from "react";
 import { UploadSimple } from "@phosphor-icons/react";
 import { useAtom } from "jotai";
 import clsx from "clsx";
 import { InMemoryFile } from "@nerfzael/memory-fs";
+import TextAreaField from "./inputs/TextAreaField";
 
 export interface ChatLog {
   title: string;
   content?: string;
   user: string;
   color?: string;
-  created_at?: string
+  created_at?: string;
 }
 
 export interface ChatProps {
@@ -44,21 +44,22 @@ const Chat: React.FC<ChatProps> = ({
   isRunning,
   onGoalSubmit,
   onUpload,
-  status
+  status,
 }: ChatProps) => {
   const [{ id: chatId, name: chatName }] = useAtom(chatInfoAtom);
   const [showDisclaimer, setShowDisclaimer] = useAtom(showDisclaimerAtom);
   const [, setError] = useAtom(errorAtom);
   const [welcomeModalOpen, setWelcomeModalOpen] = useAtom(welcomeModalAtom);
   const [signInModalOpen] = useAtom(signInModalAtom);
-  const [settingsModalOpen] = useAtom(settingsModalAtom)
+  const [settingsModalOpen] = useAtom(settingsModalAtom);
 
   const [message, setMessage] = useState<string>("");
 
   const { getInputProps, open } = useWorkspaceUploadDrop(onUpload);
   const firstTimeUser = useFirstTimeUser();
 
-  const shouldShowExamplePrompts = !chatId || (!logs.length && !isStarting && !isRunning);
+  const shouldShowExamplePrompts =
+    !chatId || (!logs.length && !isStarting && !isRunning);
 
   const handleGoalSubmit = async (goal: string): Promise<void> => {
     if (firstTimeUser) {
@@ -79,7 +80,7 @@ const Chat: React.FC<ChatProps> = ({
       return;
     }
     open();
-  }
+  };
 
   return (
     <main
@@ -90,7 +91,12 @@ const Chat: React.FC<ChatProps> = ({
       {shouldShowExamplePrompts ? (
         <Logo wordmark={false} className="mb-16 w-16" />
       ) : (
-        <ChatLogs status={status}  chatName={chatName ?? "New Session"} isRunning={isStarting || isRunning} logs={logs} />
+        <ChatLogs
+          status={status}
+          chatName={chatName ?? "New Session"}
+          isRunning={isStarting || isRunning}
+          logs={logs}
+        />
       )}
 
       <div
@@ -102,9 +108,7 @@ const Chat: React.FC<ChatProps> = ({
         )}
       >
         {shouldShowExamplePrompts && (
-          <ExamplePrompts
-            onClick={handleGoalSubmit}
-          />
+          <ExamplePrompts onClick={handleGoalSubmit} />
         )}
         <div
           className={clsx(
@@ -112,22 +116,29 @@ const Chat: React.FC<ChatProps> = ({
             shouldShowExamplePrompts ? "max-w-[42rem] " : "max-w-[56rem]"
           )}
         >
-          <TextField
-            type="text"
+          <TextAreaField
+            rows={1}
             value={message}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setMessage(event.target.value)
+            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+              setMessage(event.target.value);
             }}
             onKeyDown={(event: React.KeyboardEvent) => {
-              if (event.key === "Enter" && !isStarting && !isRunning) {
-                return handleGoalSubmit(message);
+              if (!event.shiftKey && event.key === "Enter") {
+                event.preventDefault();
+                if (!isStarting && !isRunning) {
+                  return handleGoalSubmit(message);
+                }
               }
             }}
             placeholder="Ask Evo anything..."
-            className="!rounded-lg !p-4 !pl-12"
+            className="max-h-[200px] resize-none !rounded-lg !p-4 !pl-12"
             leftAdornment={
               <>
-                <Button variant="icon" className="!text-white" onClick={onUploadOpen}>
+                <Button
+                  variant="icon"
+                  className="!text-white"
+                  onClick={onUploadOpen}
+                >
                   <UploadSimple size={20} />
                 </Button>
                 <input {...getInputProps()} />
@@ -146,7 +157,12 @@ const Chat: React.FC<ChatProps> = ({
         </div>
       </div>
       <Disclaimer
-        isOpen={showDisclaimer && !welcomeModalOpen && !signInModalOpen && !settingsModalOpen}
+        isOpen={
+          showDisclaimer &&
+          !welcomeModalOpen &&
+          !signInModalOpen &&
+          !settingsModalOpen
+        }
         onClose={() => setShowDisclaimer(false)}
       />
     </main>
diff --git a/apps/browser/components/Sidebar.tsx b/apps/browser/components/Sidebar.tsx
index 17bf3a4a..0926e5d0 100644
--- a/apps/browser/components/Sidebar.tsx
+++ b/apps/browser/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import { useWorkspaceUploadUpdate } from "@/lib/hooks/useWorkspaceUploadUpdate";
 import Logo from "@/components/Logo";
 import Avatar from "@/components/Avatar";
 import Button from "@/components/Button";
-import TextField from "@/components/TextField";
+import TextField from "@/components/inputs/TextField";
 import DropdownAccount from "@/components/DropdownAccount";
 import Workspace from "@/components/Workspace";
 import React, { memo, useEffect, useRef, useState } from "react";
diff --git a/apps/browser/components/TextField.tsx b/apps/browser/components/TextField.tsx
deleted file mode 100644
index d40ef33f..00000000
--- a/apps/browser/components/TextField.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import clsx from "clsx";
-import {
-  useState,
-  DetailedHTMLProps,
-  ChangeEvent,
-  InputHTMLAttributes,
-  ReactNode,
-} from "react";
-
-interface TextFieldProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  label?: string;
-  error?: string;
-  checked?: boolean;
-  leftAdornment?: ReactNode;
-  leftAdornmentClassnames?: string;
-  rightAdornment?: ReactNode;
-  rightAdornmentClassnames?: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-}
-
-const TextField = ({
-  type = "input",
-  leftAdornment,
-  leftAdornmentClassnames,
-  rightAdornment,
-  rightAdornmentClassnames,
-  className,
-  label,
-  error,
-  checked,
-  ...props
-}: TextFieldProps) => {
-  const [isChecked, setIsChecked] =
-    useState<TextFieldProps["checked"]>(checked);
-
-  const handleCheck = () => {
-    const newValue = !isChecked;
-    setIsChecked(newValue);
-    if (props.onChange) {
-      const event = {
-        target: {
-          type: "checkbox",
-          checked: newValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      props.onChange(event);
-    }
-  };
-
-  return (
-    <div className={clsx("space-y-1", { "w-full": type !== "checkbox" })}>
-      {label && <label className="text-sm font-semibold">{label}</label>}
-      {type === "checkbox" ? (
-        <div
-          className={clsx("checkbox", { checked: isChecked }, className)}
-          onClick={handleCheck}
-        >
-          <div className={clsx("checkmark", { hidden: !isChecked })} />
-        </div>
-      ) : (
-        <div className="relative w-full">
-          {leftAdornment && (
-            <div
-              className={clsx(
-                "absolute left-4 top-1/2 -translate-y-1/2 transform",
-                leftAdornmentClassnames
-              )}
-            >
-              {leftAdornment}
-            </div>
-          )}
-          <input
-            className={clsx(
-              "focus:ring-3 w-full rounded-lg border-2 border-zinc-500 bg-transparent p-4 text-sm text-white outline-none transition-all placeholder:text-white/50 focus:border-cyan-500 focus:ring-cyan-500/20",
-              props.disabled
-                ? "cursor-default opacity-50"
-                : "cursor-text hover:border-zinc-600 hover:bg-zinc-950",
-              { "border-red-500": error },
-              { "!pl-10": leftAdornment },
-              { "!pr-10": rightAdornment },
-              className
-            )}
-            type={type}
-            {...props}
-          />
-          {rightAdornment && (
-            <div
-              className={clsx(
-                "absolute right-4 top-1/2 -translate-y-1/2 transform",
-                rightAdornmentClassnames
-              )}
-            >
-              {rightAdornment}
-            </div>
-          )}
-        </div>
-      )}
-      {error && <div className="text-xs text-red-500">{error}</div>}
-    </div>
-  );
-};
-
-export default TextField;
diff --git a/apps/browser/components/inputs/BaseInput.tsx b/apps/browser/components/inputs/BaseInput.tsx
new file mode 100644
index 00000000..e3f24371
--- /dev/null
+++ b/apps/browser/components/inputs/BaseInput.tsx
@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+export interface BaseInputProps {
+  label?: string;
+  error?: string;
+  leftAdornment?: ReactNode;
+  leftAdornmentClassnames?: string;
+  rightAdornment?: ReactNode;
+  rightAdornmentClassnames?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const BaseInput = ({
+  label,
+  error,
+  leftAdornmentClassnames,
+  leftAdornment,
+  rightAdornmentClassnames,
+  rightAdornment,
+  children,
+}: BaseInputProps) => {
+  return (
+    <div className={"w-full space-y-1"}>
+      {label && <label className="text-sm font-semibold">{label}</label>}
+      <div className="relative w-full">
+        {leftAdornment && (
+          <div
+            className={clsx(
+              "absolute bottom-4 left-4",
+              leftAdornmentClassnames
+            )}
+          >
+            {leftAdornment}
+          </div>
+        )}
+        {children}
+        {rightAdornment && (
+          <div
+            className={clsx(
+              "absolute bottom-4 right-4",
+              rightAdornmentClassnames
+            )}
+          >
+            {rightAdornment}
+          </div>
+        )}
+      </div>
+      {error && <div className="text-xs text-red-500">{error}</div>}
+    </div>
+  );
+};
+
+export default BaseInput;
diff --git a/apps/browser/components/inputs/Checkbox.tsx b/apps/browser/components/inputs/Checkbox.tsx
new file mode 100644
index 00000000..8815f810
--- /dev/null
+++ b/apps/browser/components/inputs/Checkbox.tsx
@@ -0,0 +1,55 @@
+// Checkbox.tsx
+import clsx from "clsx";
+import BaseInput from "./BaseInput";
+import {
+  ChangeEvent,
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useState,
+} from "react";
+
+interface CheckboxProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+  error?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  error,
+  className,
+  ...props
+}) => {
+  const [isChecked, setIsChecked] = useState(props.checked);
+
+  const handleCheck = () => {
+    const newValue = !isChecked;
+    setIsChecked(newValue);
+    if (props.onChange) {
+      const event = {
+        target: {
+          type: "checkbox",
+          checked: newValue,
+        },
+      } as ChangeEvent<HTMLInputElement>;
+      props.onChange(event);
+    }
+  };
+
+  return (
+    <div className={clsx("space-y-1", className)}>
+      {label && <label className="text-sm font-semibold">{label}</label>}
+      <div
+        className={clsx("checkbox", { checked: isChecked }, className)}
+        onClick={handleCheck}
+      >
+        <div className={clsx("checkmark", { hidden: !isChecked })} />
+      </div>
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/apps/browser/components/inputs/TextAreaField.tsx b/apps/browser/components/inputs/TextAreaField.tsx
new file mode 100644
index 00000000..386b979e
--- /dev/null
+++ b/apps/browser/components/inputs/TextAreaField.tsx
@@ -0,0 +1,69 @@
+// TextAreaField.tsx
+import clsx from "clsx";
+import BaseInput, { BaseInputProps } from "./BaseInput";
+import {
+  DetailedHTMLProps,
+  TextareaHTMLAttributes,
+  useRef,
+  useEffect,
+} from "react";
+
+interface TextAreaFieldProps
+  extends DetailedHTMLProps<
+      TextareaHTMLAttributes<HTMLTextAreaElement>,
+      HTMLTextAreaElement
+    >,
+    BaseInputProps {}
+
+const TextAreaField = ({
+  leftAdornment,
+  rightAdornment,
+  leftAdornmentClassnames,
+  rightAdornmentClassnames,
+  className,
+  label,
+  error,
+  ...props
+}: TextAreaFieldProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      if (textareaRef.current.scrollHeight > 200) {
+        textareaRef.current.style.overflowY = "auto";
+      } else {
+        textareaRef.current.style.overflowY = "hidden";
+      }
+    }
+  }, [props.value]);
+
+  return (
+    <BaseInput
+      label={label}
+      error={error}
+      leftAdornment={leftAdornment}
+      leftAdornmentClassnames={leftAdornmentClassnames}
+      rightAdornment={rightAdornment}
+      rightAdornmentClassnames={rightAdornmentClassnames}
+    >
+      <textarea
+        ref={textareaRef}
+        className={clsx(
+          "focus:ring-3 w-full resize-none overflow-y-hidden rounded-lg border-2 border-zinc-500 bg-transparent p-4 text-sm text-white outline-none transition-all placeholder:text-white/50 focus:border-cyan-500 focus:ring-cyan-500/20",
+          props.disabled
+            ? "cursor-default opacity-50"
+            : "cursor-text hover:border-zinc-600 hover:bg-zinc-950",
+          { "!border-red-500": error },
+          { "!pl-10": leftAdornment },
+          { "!pr-10": rightAdornment },
+          className
+        )}
+        {...props}
+      />
+    </BaseInput>
+  );
+};
+
+export default TextAreaField;
diff --git a/apps/browser/components/inputs/TextField.tsx b/apps/browser/components/inputs/TextField.tsx
new file mode 100644
index 00000000..157202e9
--- /dev/null
+++ b/apps/browser/components/inputs/TextField.tsx
@@ -0,0 +1,48 @@
+import clsx from "clsx";
+import BaseInput, { BaseInputProps } from "./BaseInput";
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface TextFieldProps
+  extends DetailedHTMLProps<
+      InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    BaseInputProps {}
+
+const TextField = ({
+  leftAdornment,
+  rightAdornment,
+  leftAdornmentClassnames,
+  rightAdornmentClassnames,
+  className,
+  label,
+  error,
+  ...props
+}: TextFieldProps) => {
+  return (
+    <BaseInput
+      label={label}
+      error={error}
+      leftAdornment={leftAdornment}
+      leftAdornmentClassnames={leftAdornmentClassnames}
+      rightAdornment={rightAdornment}
+      rightAdornmentClassnames={rightAdornmentClassnames}
+    >
+      <input
+        className={clsx(
+          "focus:ring-3 w-full rounded-lg border-2 border-zinc-500 bg-transparent p-4 text-sm text-white outline-none transition-all placeholder:text-white/50 focus:!border-cyan-500 focus:!ring-cyan-500/20",
+          props.disabled
+            ? "cursor-default opacity-50"
+            : "cursor-text hover:border-zinc-600 hover:bg-zinc-950",
+          { "!border-red-900": error },
+          { "!pl-10": leftAdornment },
+          { "!pr-10": rightAdornment },
+          className
+        )}
+        {...props}
+      />
+    </BaseInput>
+  );
+};
+
+export default TextField;
diff --git a/apps/browser/components/modals/AccountConfig.tsx b/apps/browser/components/modals/AccountConfig.tsx
index 9c591ab1..0990383f 100644
--- a/apps/browser/components/modals/AccountConfig.tsx
+++ b/apps/browser/components/modals/AccountConfig.tsx
@@ -1,8 +1,9 @@
 import React, { ChangeEvent, useEffect, useRef } from "react";
-import TextField from "../TextField";
+import TextField from "../inputs/TextField";
 import { useSession, signOut } from "next-auth/react";
 import Button from "../Button";
 import { SignOut } from "@phosphor-icons/react/dist/ssr";
+import Checkbox from "../inputs/Checkbox";
 
 interface AccountConfigProps {
   setApiKey: (key: string) => void;
@@ -13,7 +14,7 @@ interface AccountConfigProps {
 }
 
 function AccountConfig(props: AccountConfigProps) {
-  const { apiKey, setApiKey, telemetry, setTelemetry } = props
+  const { apiKey, setApiKey, telemetry, setTelemetry } = props;
   const apiKeyRef = useRef<HTMLInputElement | null>(null);
   const { data: session } = useSession();
 
@@ -99,10 +100,9 @@ function AccountConfig(props: AccountConfigProps) {
             <label className="text-sm text-zinc-200">
               Share prompts with Evo
             </label>
-            <TextField
+            <Checkbox
               checked={telemetry}
               onChange={(e) => setTelemetry(e.target.checked)}
-              type="checkbox"
             />
           </fieldset>
         </div>