diff --git a/package-lock.json b/package-lock.json
index e244b31..294a93b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@testing-library/user-event": "^14.5.2",
+        "axios": "^1.6.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
@@ -4920,6 +4921,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -12612,6 +12636,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index de9a35d..f7017aa 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
+    "axios": "^1.6.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
diff --git a/src/App.js b/src/App.js
index af9353e..7013c99 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import Navbar from "./Components/Navbar.js";
 function App() {
   return (
     <>
-     <div className="App ">
+     <div className="App flex flex-col">
       <Navbar/>
       <div className="px-16 py-6">
       <Outlet />
diff --git a/src/Components/EventPlannerAi.js b/src/Components/EventPlannerAi.js
index c0716d4..6886f37 100644
--- a/src/Components/EventPlannerAi.js
+++ b/src/Components/EventPlannerAi.js
@@ -1,101 +1,74 @@
 import React, { useState } from "react";
+import { useParams } from "react-router-dom";
 
-const EventPlannerAi = () => {
+const EventPlannerAi = ({ props }) => {
   const [budget, setBudget] = useState("");
   const [timeToStay, setTimeToStay] = useState("");
-
   const [generatedAnswer, setGeneratedAnswer] = useState("");
+  const { eventId } = useParams();
+  console.log(eventId);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    // Here you can perform any actions you want with the inputs
-    console.log("Budget:", budget);
-    console.log("Time to Stay:", timeToStay);
-    // Here you can generate the AI answer based on the inputs
-    const aiAnswer = generateAIAnswer(budget, timeToStay);
-    setGeneratedAnswer(aiAnswer);
-  };
+    setLoading(true);
+    setError("");
+    setGeneratedAnswer("");
 
-  // Function to generate AI answer
-  const generateAIAnswer = (budget, timeToStay) => {
-    // You can implement your AI logic here
-    // For now, let's just return a dummy answer
-    return `AI Generated Answer: You have a budget of ${budget} and plan to stay for ${timeToStay}`;
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const response = await axios.post("http://localhost:8000/predict", {
+            budget,
+            timeToStay,
+          });
+          setGeneratedAnswer(response.data.prediction);
+        } catch (error) {
+          setError("Something went wrong. Please try again later.");
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchData();
+    }, [budget, timeToStay]);
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-200 py-12 px-4 sm:px-6 lg:px-8 border rounded-xl">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Event Planner AI
-          </h2>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <label htmlFor="budget" className="sr-only">
-                Your Budget:
-              </label>
-              <input
-                id="budget"
-                name="budget"
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Your Budget"
-                value={budget}
-                onChange={(e) => setBudget(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="timeToStay" className="sr-only">
-                Time to Stay:
-              </label>
-              <input
-                id="timeToStay"
-                name="timeToStay"
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Time to Stay"
-                value={timeToStay}
-                onChange={(e) => setTimeToStay(e.target.value)}
-              />
-            </div>
+    <>
+      <div className="relative mx-auto my-[-1.5rem] border border-black max-w-4xl ">
+        <div
+          className="absolute inset-0 bg-cover bg-center filter blur-sm"
+          style={{
+            backgroundImage: `url(${require(`../data${
+              props[eventId - 1].image
+            }`)})`,
+          }}
+        ></div>
+        <div className="flex justify-center relative z-10 bg-white mx-16 mt-3 mb-6 rounded-xl">
+          <div className="w-1/2 bg-white my-4 ml-4 rounded-l-xl">
+            <div className=""></div>
+            {/* Your content here */}
           </div>
-          <div>
-            <button
-              type="submit"
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            >
-              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
-                {/* Heroicon name: solid/check */}
-                <svg
-                  className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M9.293 13.293a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L9 10.586l6.293-6.293a1 1 0 0 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </span>
-              Submit
-            </button>
+          <div className="w-1/2 h-16 sm:h-56 md:h-64 flex justify-center relative m-1">
+            <img
+              src={require(`../data${props[eventId - 1].image}`)}
+              alt="Event Image"
+              className="object-contain max-w-full max-h-full rounded-xl"
+            />
           </div>
-        </form>
+        </div>
+      </div>
+      <div>
+        <div className="w-full h-96">
+          <div className="w-full h-5"></div>
+          <h1>how are you all</h1>
+        </div>
         {generatedAnswer && (
           <div className="bg-white rounded-md p-4 shadow-md">
             <p className="text-gray-800">{generatedAnswer}</p>
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index 9db3d6e..528068c 100644
--- a/src/Components/Footer.js
+++ b/src/Components/Footer.js
@@ -7,8 +7,8 @@ import { FaFacebookF } from "react-icons/fa";
 
 const Footer = () => {
   return (
-    <div className="">
-      <footer className=" w-full  mt-4 border border-gray-200  bg-[#F6E2C0]  z-50 flex justify-between items-center px-10 py-2 ">
+    <>
+      <footer className=" mt-auto w-full border border-gray-200  bg-[#F6E2C0]  z-50 flex justify-between items-center px-10 py-2 ">
         <div className="container m-3 mx-auto py-4 px-6 flex justify-between items-center">
           <div>
             <p className="text-sm">
@@ -21,7 +21,7 @@ const Footer = () => {
           </div>
         </div>
       </footer>
-    </div>
+    </>
   );
 };
 
diff --git a/src/index.js b/src/index.js
index a00cddb..42b88b9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,7 +24,7 @@ const appRouter = createBrowserRouter([
      
       {
         path: "events/:eventId",
-        element: <EventPlannerAi/>,
+        element: <EventPlannerAi props={eventData}/>,
       },
       
     ],