diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index b055e2d..2995b2d 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -1,6 +1,6 @@
 services:
   web-app:
-    image: ghcr.io/${REPO_NAME_LOWER}/web-app:${IMAGE_TAG}
+    image: ghcr.io/${REPO_NAME_LOWER}/fallback-web-app:${IMAGE_TAG}
     restart: always
     ports:
       - "127.0.0.1:3033:3000"
diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx
index da88fd0..afc0d73 100644
--- a/web-app/src/components/layouts/chat-layout.jsx
+++ b/web-app/src/components/layouts/chat-layout.jsx
@@ -2,6 +2,20 @@ import React, { useState } from "react";
 import ChatHeader from "src/components/ui/chat/chat-header";
 import ChatWindow from "src/components/ui/chat/chat-window";
 import MessageInput from "src/components/ui/chat/message-input";
+import { GoogleGenAI } from "@google/genai";
+
+let userInput = [];
+
+const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY });
+
+async function AIResponse(userInputArray) {
+  const response = await ai.models.generateContent({
+    model: "gemini-2.5-flash",
+    contents: userInputArray,
+  });
+
+  return response.text;
+}
 
 export default function ChatLayout() {
   const [messages, setMessages] = useState([
@@ -11,21 +25,13 @@ export default function ChatLayout() {
     },
   ]);
 
-  function addMessage(role, content) {
-    const msg = { role, content };
-    setMessages((s) => [...s, msg]);
-  }
-
-  function handleSend(text) {
+  async function handleSend(text) {
     const userMsg = { role: "user", content: text };
+    userInput.push(text);
+    const res = await AIResponse(userInput);
     setMessages((s) => [...s, userMsg]);
-
-    // fake assistant reply after short delay
     setTimeout(() => {
-      setMessages((s) => [
-        ...s,
-        { role: "assistant", content: `You said: ${text}` },
-      ]);
+      setMessages((s) => [...s, { role: "assistant", content: res }]);
     }, 600);
   }
 
@@ -38,11 +44,7 @@ export default function ChatLayout() {
     <div className="flex flex-col flex-start w-full max-w-3xl gap-4 p-4">
       <ChatHeader />
       <ChatWindow messages={messages} />
-      <MessageInput
-        onSend={handleSend}
-        onMessage={addMessage}
-        onDeleteAll={handleDeleteAll}
-      />
+      <MessageInput onSend={handleSend} onDeleteAll={handleDeleteAll} />
     </div>
   );
 }
diff --git a/web-app/src/components/ui/button/down-button.jsx b/web-app/src/components/ui/button/down-button.jsx
index bae6021..b55558b 100644
--- a/web-app/src/components/ui/button/down-button.jsx
+++ b/web-app/src/components/ui/button/down-button.jsx
@@ -14,7 +14,7 @@ export default function DownButton({ onClick }) {
   return (
     <motion.button
       onClick={handleClick}
-      className="bg-gray-700 p-2 rounded-2xl file-input border-2 border-gray-600 size-10"
+      className="bg-gray-700 p-2 rounded-2xl file-input border-2 border-gray-600"
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.9 }}
     >
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index fbda3f2..7ef0367 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -3,6 +3,7 @@ import { motion } from "motion/react";
 import { Rocket } from "lucide-react";
 import DeleteButton from "src/components/ui/button/delete-button";
 import SchematicButton from "../button/schematic-button";
+import FileList from "../file/file-list";
 
 export default function ChatHeader({ title = "Title of Chat" }) {
   const isDebug = useMemo(() => {
@@ -17,7 +18,9 @@ export default function ChatHeader({ title = "Title of Chat" }) {
       setIngesting(true);
       const res = await fetch("/api/files/import-demo", { method: "POST" });
       const json = await res.json().catch(() => ({}));
-      setToast(`Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`);
+      setToast(
+        `Imported: ${json.imported ?? "?"}, Skipped: ${json.skipped ?? "?"}`
+      );
       setTimeout(() => setToast(""), 4000);
     } catch (e) {
       setToast("Import failed");
@@ -32,24 +35,23 @@ export default function ChatHeader({ title = "Title of Chat" }) {
       <header className="text-slate-100 fixed top-4 max-w-3xl w-full px-4">
         <div className="flex justify-between items-center gap-4">
           <SchematicButton />
-          <div className="flex items-center gap-3">
-            <h1 className="text-lg font-semibold shadow-md shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
-              {title}
-            </h1>
-            <DeleteButton />
-            {isDebug && (
-              <motion.button
-                onClick={triggerDemoIngest}
-                className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                disabled={ingesting}
-              >
-                <Rocket size={16} />
-                {ingesting ? "Seeding…" : "Seed Demo Data"}
-              </motion.button>
-            )}
-          </div>
+          <FileList />
+          <h1 className="text-lg font-semibold shadow-md shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
+            {title}
+          </h1>
+          <DeleteButton />
+          {isDebug && (
+            <motion.button
+              onClick={triggerDemoIngest}
+              className="bg-gray-800 border-2 border-gray-700 rounded-xl px-3 py-2 flex items-center gap-2"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              disabled={ingesting}
+            >
+              <Rocket size={16} />
+              {ingesting ? "Seeding…" : "Seed Demo Data"}
+            </motion.button>
+          )}
         </div>
         {toast && (
           <div className="mt-2 text-xs text-slate-300 bg-gray-800/80 border border-gray-700 rounded px-2 py-1 inline-block">
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 4f20709..37e8440 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -3,7 +3,11 @@ import DownButton from "src/components/ui/button/down-button";
 import { motion } from "motion/react";
 import { BotMessageSquare } from "lucide-react";
 
-export default function MessageInput({ onSend, onMessage }) {
+import { GoogleGenAI } from "@google/genai";
+
+const ai = new GoogleGenAI({ apiKey: import.meta.env.GEMINI_API_KEY });
+
+export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
   const textareaRef = useRef(null);
 
@@ -13,53 +17,10 @@ export default function MessageInput({ onSend, onMessage }) {
   }, []);
 
   async function handleSubmit(e) {
-    e.preventDefault();
-    if (!text.trim()) return;
-
     // send user message locally
+    e.preventDefault();
+    if (text.trim() === "") return;
     onSend(text.trim());
-
-    // create query on backend
-    try {
-      if (onMessage)
-        onMessage("assistant", "Queued: sending request to server...");
-      const createRes = await fetch(`/api/query/create`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ q: text, top_k: 5 }),
-      });
-      const createJson = await createRes.json();
-      const id = createJson.id;
-      if (!id) throw new Error("no id returned");
-
-      // poll status
-      let status = "Queued";
-      if (onMessage) onMessage("assistant", `Status: ${status}`);
-      while (status !== "Completed" && status !== "Failed") {
-        await new Promise((r) => setTimeout(r, 1000));
-        const sRes = await fetch(`/api/query/status?id=${id}`);
-        const sJson = await sRes.json();
-        status = sJson.status;
-        if (onMessage) onMessage("assistant", `Status: ${status}`);
-        if (status === "Cancelled") break;
-      }
-
-      if (status === "Completed") {
-        const resultRes = await fetch(`/api/query/result?id=${id}`);
-        const resultJson = await resultRes.json();
-        const final =
-          resultJson?.result?.final_answer ||
-          JSON.stringify(resultJson?.result || {});
-        if (onMessage) onMessage("assistant", final);
-      } else {
-        if (onMessage)
-          onMessage("assistant", `Query status ended as: ${status}`);
-      }
-    } catch (err) {
-      console.error(err);
-      if (onMessage) onMessage("assistant", `Error: ${err.message}`);
-    }
-
     setText("");
   }
 
@@ -67,7 +28,12 @@ export default function MessageInput({ onSend, onMessage }) {
     <div className="w-full flex justify-center">
       <footer className="fixed bottom-6 max-w-3xl w-full px-4">
         <div className="flex flex-col gap-4">
-          <DownButton></DownButton>
+          <div className="flex justify-between items-center">
+            <div className="flex items-center gap-2">
+              <DownButton />
+            </div>
+          </div>
+
           <form
             onSubmit={handleSubmit}
             className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
diff --git a/web-app/src/main.jsx b/web-app/src/main.jsx
index e054df6..4eed68d 100644
--- a/web-app/src/main.jsx
+++ b/web-app/src/main.jsx
@@ -1,10 +1,5 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./app/index.jsx";
 
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById("root")).render(<App />);