diff --git a/webui/frontend/package.json b/webui/frontend/package.json
index 9e2339d..da864dd 100644
--- a/webui/frontend/package.json
+++ b/webui/frontend/package.json
@@ -9,24 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.2.10",
-    "framer-motion": "^11.0.25",
+    "@nextui-org/react": "^2.4.2",
+    "framer-motion": "^11.2.14",
     "next": "14.1.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-query": "^3.39.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.1.4",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5"
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
   }
 }
diff --git a/webui/frontend/src/app/components/Header.tsx b/webui/frontend/src/app/components/Header.tsx
index 96529ad..068674c 100644
--- a/webui/frontend/src/app/components/Header.tsx
+++ b/webui/frontend/src/app/components/Header.tsx
@@ -13,8 +13,10 @@ import { usePathname } from "next/navigation";
 const Header = () => {
   const pathName = usePathname();
 
+  const isSticky = pathName === "/" ? "sticky" : "static";
+
   return (
-    <Navbar>
+    <Navbar position={isSticky} className="absolute top-0 left-0">
       <NavbarBrand>
         <h1 className="text-2xl font-bold text-transparent bg-gradient-to-r from-blue-500 to-purple-700 bg-clip-text">
           Research Chain
diff --git a/webui/frontend/src/app/components/PromptInput.tsx b/webui/frontend/src/app/components/PromptInput.tsx
index c1c883f..d4dfaf5 100644
--- a/webui/frontend/src/app/components/PromptInput.tsx
+++ b/webui/frontend/src/app/components/PromptInput.tsx
@@ -1,5 +1,6 @@
 "use client";
-import React, { Key, useState } from "react";
+import React, { Key, useState, useContext } from "react";
+import { SummarizerContext } from "@/app/context/SummarizerContext";
 import { Button, Tab, Tabs, Textarea } from "@nextui-org/react";
 import {
   UseMutationOptions,
@@ -14,8 +15,7 @@ type FormValues = {
 };
 
 type MutationResult = {
-  success: boolean;
-  message: string;
+  uuid: string;
 };
 
 function PromptInput() {
@@ -24,6 +24,7 @@ function PromptInput() {
     prompt: "",
     mode: "",
   });
+  const context = useContext(SummarizerContext);
 
   const FormData = z.object({
     prompt: z.string().min(1),
@@ -83,7 +84,9 @@ function PromptInput() {
         return result;
       },
       {
-        onSuccess: (result) => {},
+        onSuccess: (result) => {
+          context?.sendUuid(result.uuid);
+        },
         onError: (error) => {},
       } as UseMutationOptions<MutationResult, unknown, FormValues>
     );
@@ -103,7 +106,7 @@ function PromptInput() {
     }));
   };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (crawlActive) {
       addCrawl.mutate(formValues);
@@ -113,54 +116,52 @@ function PromptInput() {
   };
 
   return (
-    <form className="w-3/5 flex-col" onSubmit={handleSubmit}>
-      <div className="w-full p-6 py-8 shadow-xl rounded-xl border border-opacity-10 border-gray-400 bg-black bg-opacity-15 z-10 flex flex-col justify-between">
-        <Textarea
-          type="text"
-          name="prompt"
-          value={formValues.prompt}
-          variant="underlined"
-          placeholder="Ask a question :)"
-          color="default"
-          size="lg"
-          minRows={1}
-          onChange={onPromptChange}
-          className="text-gray-300 px-3 text-large whitespace-normal"
-        />
+    <form className="flex-col" onSubmit={handleSubmit}>
+      <Textarea
+        type="text"
+        name="prompt"
+        value={formValues.prompt}
+        variant="underlined"
+        placeholder="Ask a question :)"
+        color="default"
+        size="lg"
+        minRows={1}
+        onChange={onPromptChange}
+        className="text-gray-300 px-3 text-large whitespace-normal"
+      />
+      <Tabs
+        size="md"
+        aria-label="Options"
+        color="primary"
+        variant="light"
+        onSelectionChange={onCrawlChange}
+        className="mt-4 mb-2 shadow-xl  rounded-xl  bg-black bg-opacity-15 z-10 flex flex-col justify-between"
+      >
+        <Tab key="crawl" title="Crawl" />
+        <Tab key="summarize" title="Summarize" />
+      </Tabs>
+      <div className="w-full mt-4 flex justify-between">
         <Tabs
-          size="md"
+          size="lg"
           aria-label="Options"
-          color="primary"
-          variant="light"
-          onSelectionChange={onCrawlChange}
-          className="mt-4 mb-2 shadow-xl  rounded-xl  bg-black bg-opacity-15 z-10 flex flex-col justify-between"
+          variant="underlined"
+          color="default"
+          onSelectionChange={onModeChange}
         >
-          <Tab key="crawl" title="Crawl" />
-          <Tab key="summarize" title="Summarize" />
+          <Tab key="news" title="News" />
+          <Tab key="docs" title="Documentation" />
+          <Tab key="wiki" title="Wikipedia" />
         </Tabs>
-        <div className="w-full mt-4 flex justify-between">
-          <Tabs
+        <div className="w-2/3 mr-3 flex flex-row-reverse">
+          <Button
             size="lg"
-            aria-label="Options"
-            variant="underlined"
+            type="submit"
             color="default"
-            onSelectionChange={onModeChange}
+            variant="bordered"
+            className="w-2/3 mr-3 flex flex-row-reverse"
           >
-            <Tab key="news" title="News" />
-            <Tab key="docs" title="Documentation" />
-            <Tab key="wiki" title="Wikipedia" />
-          </Tabs>
-          <div className="w-2/3 mr-3 flex flex-row-reverse">
-            <Button
-              size="lg"
-              type="submit"
-              color="default"
-              variant="bordered"
-              className="w-2/3 mr-3 flex flex-row-reverse"
-            >
-              Search
-            </Button>
-          </div>
+            Search
+          </Button>
         </div>
       </div>
     </form>
diff --git a/webui/frontend/src/app/components/RenderCompletion.tsx b/webui/frontend/src/app/components/RenderCompletion.tsx
new file mode 100644
index 0000000..fc2aadb
--- /dev/null
+++ b/webui/frontend/src/app/components/RenderCompletion.tsx
@@ -0,0 +1,32 @@
+import { Spinner, Button } from "@nextui-org/react";
+import type { RenderCompletionProps } from "@/app/types/RenderCompletionProps";
+import { IoMdClose } from "react-icons/io";
+
+const RenderCompletion = ({
+  executing,
+  completion_result,
+  handleClose,
+}: RenderCompletionProps) => {
+  return (
+    <>
+      {executing ? (
+        <div className="flex items-center justify-center">
+          <Spinner label="Loading..." color="secondary" size="lg" />
+        </div>
+      ) : (
+        <div>
+          <p className="pb-4 text-primary text-2xl">Result</p>
+          <IoMdClose
+            className="rounded-2xl absolute top-2 right-2 hover:bg-gray-800 p-1 cursor-pointer text-3xl"
+            onClick={handleClose}
+          ></IoMdClose>
+          <div className="overflow-auto ">
+            <p className="text-lg">{completion_result}</p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default RenderCompletion;
diff --git a/webui/frontend/src/app/context/SummarizerContext.tsx b/webui/frontend/src/app/context/SummarizerContext.tsx
new file mode 100644
index 0000000..09fa063
--- /dev/null
+++ b/webui/frontend/src/app/context/SummarizerContext.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { createContext, useState, ReactNode } from "react";
+
+interface SummarizerContextProps {
+  isSummarizing: boolean;
+  completion?: { uuid: string; status: string; payload: string } | null;
+  sendUuid: (uuid: string) => void;
+  handleCloseCompletionModal: () => void;
+}
+
+interface SummarizerContextProviderProps {
+  children?: ReactNode;
+}
+
+export const SummarizerContext = createContext<SummarizerContextProps | null>(
+  null
+);
+
+const SummarizerContextProvider = ({
+  children,
+}: SummarizerContextProviderProps) => {
+  const [isSummarizing, setIsSummarizing] = useState<boolean>(false);
+  const [completion, setCompletion] = useState<{
+    uuid: string;
+    status: string;
+    payload: string;
+  } | null>();
+
+  const socket = new WebSocket("ws://localhost:8000/ws");
+
+  const sendUuid = (uuid: string) => {
+    if (socket && socket.readyState === WebSocket.OPEN && uuid) {
+      setIsSummarizing(true);
+      socket.send(JSON.stringify({ uuid: uuid }));
+    }
+  };
+
+  socket.onmessage = (event) => {
+    try {
+      const completion = JSON.parse(event.data);
+      if (completion.uuid && completion.status === "summary completed") {
+        setCompletion(completion);
+        setIsSummarizing(false);
+      }
+    } catch (error) {
+      console.error("Error parsing message:", error);
+    }
+  };
+  console.log(isSummarizing, completion);
+
+  const handleCloseCompletionModal = () => {
+    setCompletion(null);
+  };
+
+  const value = {
+    isSummarizing,
+    completion,
+    sendUuid,
+    handleCloseCompletionModal,
+  };
+
+  return (
+    <SummarizerContext.Provider value={value}>
+      {children}
+    </SummarizerContext.Provider>
+  );
+};
+
+export default SummarizerContextProvider;
diff --git a/webui/frontend/src/app/crawl-history/page.tsx b/webui/frontend/src/app/crawl-history/page.tsx
index d0bed54..4871c48 100644
--- a/webui/frontend/src/app/crawl-history/page.tsx
+++ b/webui/frontend/src/app/crawl-history/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import Header from "../components/Header";
 import { UseQueryResult, useQuery } from "react-query";
 import HistoryCard from "../components/HistoryCard";
 import { CrawlResult } from "../types/TaskType";
@@ -14,13 +13,12 @@ const CrawlHistory = () => {
         throw new Error("Network response was not ok");
       }
       return response.json() as Promise<CrawlResult>;
-    }
+    },
   );
 
   if (isLoading) {
     return (
       <div className="h-full w-full">
-          <Header />
         <div className="text-center">Loading...</div>
       </div>
     );
@@ -29,7 +27,6 @@ const CrawlHistory = () => {
   if (isError) {
     return (
       <div className="h-screen w-screen">
-        <Header />
         <div className="text-center">Fetching data</div>
       </div>
     );
@@ -38,17 +35,15 @@ const CrawlHistory = () => {
   if (!data || data.tasks.length === 0) {
     return (
       <div className="h-screen w-screen">
-        <Header />
         <div className="text-center">There is no crawler history</div>
       </div>
     );
   }
 
   return (
-    <div className="h-screen w-screen flex-col">
-      <Header />
+    <div className="h-full w-screen flex-col">
       <div className="h-4/5 w-full flex-col items-center justify-center">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
+        <div className="grid grid-cols-1 pt-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
           {data.tasks.map((item) => (
             <HistoryCard key={item.uuid} item={item}></HistoryCard>
           ))}
diff --git a/webui/frontend/src/app/layout.tsx b/webui/frontend/src/app/layout.tsx
index 7c8ef3a..1ac748e 100644
--- a/webui/frontend/src/app/layout.tsx
+++ b/webui/frontend/src/app/layout.tsx
@@ -1,13 +1,25 @@
-import {Providers} from "./providers";
-import './globals.css'
-export default function RootLayout({children}: { children: React.ReactNode }) {
+import React from "react";
+import { Metadata } from "next";
+import { Providers } from "./providers";
+import Header from "./components/Header";
+import "./globals.css";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <html lang="en" className='dark'>
+    <html lang="en" className="dark">
       <body>
         <Providers>
+          <Header />
           {children}
         </Providers>
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
+
+export const metadata: Metadata = {
+  title: "Research Chain",
+};
diff --git a/webui/frontend/src/app/page.tsx b/webui/frontend/src/app/page.tsx
index ce87343..69b4629 100644
--- a/webui/frontend/src/app/page.tsx
+++ b/webui/frontend/src/app/page.tsx
@@ -1,15 +1,38 @@
+"use client";
+import { useContext } from "react";
 import PromptInput from "./components/PromptInput";
-import Header from "./components/Header";
+import RenderCompletion from "./components/RenderCompletion";
+import { SummarizerContext } from "./context/SummarizerContext";
 
 export default function Page() {
+  const context = useContext(SummarizerContext);
+  const isSummarizing = context?.isSummarizing ?? false;
+  const completion = context?.completion ?? null;
+  const handleCloseCompletionModal = context!.handleCloseCompletionModal;
+  let heightClass = "h-60";
+  if (isSummarizing) {
+    heightClass = "h-32";
+  } else if (completion) {
+    heightClass = "h-2/3";
+  }
   return (
-    <div className="h-screen w-screen">
-      <div className="flex">
-        <Header></Header>
-      </div>
-      <div className="h-4/5 flex justify-center items-center">
-        <PromptInput />
-      </div>
-    </div>
+    <>
+      <main className="h-screen flex justify-center items-center flex-col">
+        <div
+          className={`w-3/5 px-6 relative py-8 shadow-xl rounded-xl border border-opacity-10 border-gray-400 bg-black bg-opacity-15 z-10 flex flex-col justify-between ${heightClass} transition-all duration-500 ease-in-out overflow-y-auto`}
+          data-testid="blackbox"
+        >
+          {isSummarizing || completion ? (
+            <RenderCompletion
+              executing={isSummarizing}
+              handleClose={handleCloseCompletionModal}
+              completion_result={completion?.payload}
+            />
+          ) : (
+            <PromptInput />
+          )}
+        </div>
+      </main>
+    </>
   );
 }
diff --git a/webui/frontend/src/app/providers.tsx b/webui/frontend/src/app/providers.tsx
index 2955e2e..a2e78d6 100644
--- a/webui/frontend/src/app/providers.tsx
+++ b/webui/frontend/src/app/providers.tsx
@@ -1,14 +1,15 @@
-"use client"
-import {NextUIProvider} from '@nextui-org/react'
-import { QueryClient, QueryClientProvider } from 'react-query';
+"use client";
+import { NextUIProvider } from "@nextui-org/react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import SummarizerContextProvider from "@/app/context/SummarizerContext";
 
 const queryClient = new QueryClient();
-export function Providers({children}: { children: React.ReactNode }) {
+export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <NextUIProvider>
       <QueryClientProvider client={queryClient}>
-      {children}
+        <SummarizerContextProvider>{children}</SummarizerContextProvider>
       </QueryClientProvider>
     </NextUIProvider>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/webui/frontend/src/app/summarize-history/SummarizeHistoryModal.tsx b/webui/frontend/src/app/summarize-history/SummarizeHistoryModal.tsx
index 8658a9a..128de44 100644
--- a/webui/frontend/src/app/summarize-history/SummarizeHistoryModal.tsx
+++ b/webui/frontend/src/app/summarize-history/SummarizeHistoryModal.tsx
@@ -56,7 +56,7 @@ const ExampleModal: React.FC<ExampleModalProps> = ({
       }}
     >
       <ModalContent className="overflow-auto">
-        <ModalHeader className="border-b-1 border-indigo-800 ">
+        <ModalHeader className="border-b-1 pt-5 border-indigo-800 ">
           <div className="grid grid-cols-3 gap-40 items-center w-full py-2">
             <div className="flex justify-center">
               {getIconComponent(summaryTask)}
@@ -77,24 +77,25 @@ const ExampleModal: React.FC<ExampleModalProps> = ({
             className="flex-1 overflow-y-auto px-6"
             ref={scrollableTargetRef}
           >
-            <div className="grid grid-cols-3 py-4 gap-40 w-full">
-              <div className="text-md text-center">
-                <span className="text-xl">uuid</span>
-                <span className="block">{summaryTask?.uuid}</span>
+            <div className="grid grid-cols-4 py-4 gap-10 w-full">
+              <div className="col-span-2 text-md text-center">
+                <span className="text-md text-primary">UUID</span>
+                <span className="block break-words">{summaryTask?.uuid}</span>
               </div>
               <div className="text-md text-center">
-                Execution date
+                <p className="text-primary">Execution date</p>
                 <span className="block">
                   {calculateElapsedTime(summaryTask?.execution_date)}
                 </span>
               </div>
-              <div className="text-md text-center">
-                Completion date
+              <div className="text-md text-center ">
+              <p className="text-primary">Completion date </p>
                 <span className="block">
                   {calculateElapsedTime(summaryTask?.completion_date)}
                 </span>
               </div>
             </div>
+
             <div className="pb-8">
               <div className="">
                 <p className="pt-3 text-xl text-primary">Prompt</p>
diff --git a/webui/frontend/src/app/summarize-history/page.tsx b/webui/frontend/src/app/summarize-history/page.tsx
index cb6dd3c..986b4db 100644
--- a/webui/frontend/src/app/summarize-history/page.tsx
+++ b/webui/frontend/src/app/summarize-history/page.tsx
@@ -8,7 +8,7 @@ import { SummaryResult, SummaryTask } from "../types/TaskType";
 
 const SummarizeHistory = () => {
   const [selectedTaskIndex, setSelectedTaskIndex] = useState<number | null>(
-    null
+    null,
   );
 
   const handleCardClick = (index: number) => {
@@ -27,13 +27,12 @@ const SummarizeHistory = () => {
         throw new Error("Network response was not ok");
       }
       return response.json() as Promise<SummaryResult>;
-    }
+    },
   );
 
   if (isLoading) {
     return (
       <div className="h-full w-full">
-        <Header></Header>
         <div className="text-center">Loading...</div>
       </div>
     );
@@ -42,7 +41,6 @@ const SummarizeHistory = () => {
   if (isError) {
     return (
       <div className="h-screen w-screen">
-        <Header></Header>
         <div className="text-center">Fetching data</div>
       </div>
     );
@@ -51,17 +49,15 @@ const SummarizeHistory = () => {
   if (!data || data.tasks.length === 0) {
     return (
       <div className="h-screen w-screen">
-        <Header></Header>
         <div className="text-center">There is no crawler history</div>
       </div>
     );
   }
 
   return (
-    <div className="h-screen w-screen flex-col">
-      <Header />
+    <div className="h-full w-screen flex-col">
       <div className="h-4/5 w-full flex-col items-center justify-center">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
+        <div className="grid grid-cols-1 pt-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
           {data.tasks.map((item, index) => (
             <div
               key={item.uuid}
diff --git a/webui/frontend/src/app/types/RenderCompletionProps.ts b/webui/frontend/src/app/types/RenderCompletionProps.ts
new file mode 100644
index 0000000..b39a1c7
--- /dev/null
+++ b/webui/frontend/src/app/types/RenderCompletionProps.ts
@@ -0,0 +1,5 @@
+export interface RenderCompletionProps {
+  executing: boolean;
+  completion_result: string | undefined;
+  handleClose: () => void;
+}
diff --git a/webui/main.py b/webui/main.py
index d06f532..5570512 100644
--- a/webui/main.py
+++ b/webui/main.py
@@ -83,6 +83,7 @@ async def on_connection(websocket: WebSocket):
             del active_connections[websocket]
 
 
+
 # This decorator allow to call async callback function in side synchronous context
 def sync(f):
     @functools.wraps(f)