diff --git a/app/page.tsx b/app/page.tsx
index 98dde21..5ee9b4a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,12 +7,11 @@ import DropDown, { VibeType } from '../components/DropDown';
 import Footer from '../components/Footer';
 import Github from '../components/GitHub';
 import Header from '../components/Header';
+import { useChat } from 'ai/react';
 
 export default function Page() {
-  const [loading, setLoading] = useState(false);
   const [bio, setBio] = useState('');
   const [vibe, setVibe] = useState<VibeType>('Professional');
-  const [generatedBios, setGeneratedBios] = useState<String>('');
   const bioRef = useRef<null | HTMLDivElement>(null);
 
   const scrollToBios = () => {
@@ -21,48 +20,25 @@ export default function Page() {
     }
   };
 
-  const generateBio = async (e: any) => {
-    e.preventDefault();
-    setGeneratedBios('');
-    setLoading(true);
-
-    const response = await fetch('/api/chat', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
+  const { input, handleInputChange, handleSubmit, isLoading, messages } =
+    useChat({
+      body: {
         vibe,
         bio,
-      }),
+      },
+      onResponse() {
+        scrollToBios();
+      },
     });
 
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-
-    // This data is a ReadableStream
-    const data = response.body;
-    if (!data) {
-      return;
-    }
-
-    // https://web.dev/streams/#the-getreader-and-read-methods
-    const reader = data.getReader();
-    const decoder = new TextDecoder();
-    let done = false;
-
-    while (!done) {
-      const { value, done: doneReading } = await reader.read();
-      done = doneReading;
-      const chunkValue = decoder.decode(value);
-      setGeneratedBios((prev) => prev + chunkValue);
-    }
-
-    scrollToBios();
-    setLoading(false);
+  const onSubmit = (e: any) => {
+    setBio(input);
+    handleSubmit(e);
   };
 
+  const lastMessage = messages[messages.length - 1];
+  const generatedBios = lastMessage?.role === "assistant" ? lastMessage.content : null;
+
   return (
     <div className="flex max-w-5xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Header />
@@ -80,7 +56,7 @@ export default function Page() {
           Generate your next Twitter bio using chatGPT
         </h1>
         <p className="text-slate-500 mt-5">47,118 bios generated so far.</p>
-        <div className="max-w-xl w-full">
+        <form className="max-w-xl w-full" onSubmit={onSubmit}>
           <div className="flex mt-10 items-center space-x-3">
             <Image
               src="/1-black.png"
@@ -98,8 +74,8 @@ export default function Page() {
             </p>
           </div>
           <textarea
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
+            value={input}
+            onChange={handleInputChange}
             rows={4}
             className="w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black my-5"
             placeholder={
@@ -114,15 +90,15 @@ export default function Page() {
             <DropDown vibe={vibe} setVibe={(newVibe) => setVibe(newVibe)} />
           </div>
 
-          {!loading && (
+          {!isLoading && (
             <button
               className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
-              onClick={(e) => generateBio(e)}
+              type="submit"
             >
               Generate your bio &rarr;
             </button>
           )}
-          {loading && (
+          {isLoading && (
             <button
               className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
               disabled
@@ -134,14 +110,14 @@ export default function Page() {
               </span>
             </button>
           )}
-        </div>
+        </form>
         <Toaster
           position="top-center"
           reverseOrder={false}
           toastOptions={{ duration: 2000 }}
         />
         <hr className="h-px bg-gray-700 border-1 dark:bg-gray-700" />
-        <div className="space-y-10 my-10">
+        <output className="space-y-10 my-10">
           {generatedBios && (
             <>
               <div>
@@ -175,7 +151,7 @@ export default function Page() {
               </div>
             </>
           )}
-        </div>
+        </output>
       </main>
       <Footer />
     </div>