diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 34153cc..6019f7f 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -13,25 +13,30 @@ interface HeaderMenuLink {
 }
 
 export const menuLinks: HeaderMenuLink[] = [
+  // {
+  //   label: "Home",
+  //   href: "/",
+  // },
+  // {
+  //   label: "Debug Contracts",
+  //   href: "/debug",
+  //   icon: <BugAntIcon className="h-4 w-4" />,
+  // },
+  // {
+  //   label: "Example UI",
+  //   href: "/example-ui",
+  //   icon: <SparklesIcon className="h-4 w-4" />,
+  // },
   {
-    label: "Home",
+    label: "ETH-SPACE",
     href: "/",
-  },
-  {
-    label: "Debug Contracts",
-    href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
-  },
-  {
-    label: "Example UI",
-    href: "/example-ui",
     icon: <SparklesIcon className="h-4 w-4" />,
   },
-  {
-    label: "Block Explorer",
-    href: "/blockexplorer",
-    icon: <MagnifyingGlassIcon className="h-4 w-4" />,
-  },
+  // {
+  //   label: "Block Explorer",
+  //   href: "/blockexplorer",
+  //   icon: <MagnifyingGlassIcon className="h-4 w-4" />,
+  // },
 ];
 
 export const HeaderMenuLinks = () => {
diff --git a/packages/nextjs/pages/eth-space.tsx b/packages/nextjs/pages/eth-space.tsx
new file mode 100644
index 0000000..d9a9543
--- /dev/null
+++ b/packages/nextjs/pages/eth-space.tsx
@@ -0,0 +1,111 @@
+import { NextPage } from "next";
+import { useEffect, useState } from "react";
+
+const ETHSpace: NextPage = () => {
+    //在对后端发起请求后，将response的内容保存在results中
+    const [result, setResult] = useState("The search results will be shown here");
+    //设置默认是在我们提供的数据集而不是公共数据集中查询
+    const [qinPublic, setQinPublic] = useState(false);
+    //获取目前提供的数据集选项
+    const [options, setOptions] = useState<string[]>([]);
+    //获取用户选择的数据集
+    const [dataset, setDataset] = useState("");
+    //获取用户搜索的prompt
+    const [seaPrompt, setSeaPrompt] = useState("");
+    //仅在组件挂载时执行一次获取数据集列表
+    useEffect(() => {
+        const data = fetchOptions();
+        setOptions(data);
+    });
+
+    //从后端获取数据集列表
+    const fetchOptions = () => {
+        return ['eth-whitepaper', 'eth-contracts'];
+    };
+    //获取search prompt与dataset名字后向后端发request
+    const handleonClick =()=>{
+        
+    };
+    return (
+        <div className="grid lg:grid-cols-2 flex-grow">
+            <div className="hero min-h-screen bg-base-200 bg-gradient-to-r from-green-500 to-blue-500">
+                <div className="hero-content text-center">
+                    <div className="max-w-md">
+                        <h1 className="text-5xl font-bold">ETH-SPACE</h1>
+                        <p className="py-6">AI-based Smart Contract Explorer</p>
+                        <div className="form-control mb-6">
+                            <label className="label cursor-pointer">
+                                <span className="label-text text-2xl">Search in the Public Dataset</span>
+                                <input
+                                    type="checkbox"
+                                    className="toggle toggle-accent"
+                                    checked={qinPublic}
+                                    onChange={() => {
+                                        setQinPublic(!qinPublic);
+                                    }}
+                                />
+                            </label>
+                        </div>
+                        <div className="join mb-6">
+                            <div>
+                                <div>
+                                    <input
+                                        className="input input-bordered join-item"
+                                        value={seaPrompt}
+                                        onChange={(e) => {
+                                            setSeaPrompt(e.target.value);
+                                        }}
+                                        placeholder="Enter your prompt to search" />
+                                </div>
+                            </div>
+                            <div>
+                                <div>
+                                    {!qinPublic ? (
+                                        <select
+                                            className="select select-bordered join-item"
+                                            onChange={(e) => {
+                                                setDataset(e.target.value);
+                                            }}>
+                                            {
+                                                options.map((option, index) => (
+                                                    <option key={index} value={option}>{option}</option>
+                                                ))
+                                            }
+                                        </select>
+                                    ) : (
+                                        <input
+                                            className="input input-bordered join-item"
+                                            value={dataset}
+                                            onChange={(e) => {
+                                                setDataset(e.target.value);
+                                            }}
+                                            placeholder="Pls input the public dataset name" />
+                                    )}
+                                </div>
+                            </div>
+                            <div className="indicator">
+                                <button className="btn join-item" onClick={()=>{
+                                    handleonClick();
+                                }}>Search</button>
+                            </div>
+                        </div>
+                        <span className="text-sm m-10">
+                            A search question example: Give me the examples about struct. The "type" in metadata should be "struct".
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div className="bg-gradient-to-r from-blue-500 to-green-500">
+                <div className="mx-auto w-4/5 h-4/5 backdrop-blur-lg backdrop-filter p-10 m-10 rounded-lg opacity-80 shadow-md">
+                    <h2 className="text-4xl font-bold mb-4">Search Results</h2>
+                    <span className="text-2xl m-2">
+                        {result}
+                    </span>
+                </div>
+
+            </div>
+        </div>
+    )
+};
+
+export default ETHSpace;
\ No newline at end of file
diff --git a/packages/nextjs/pages/index copy.tsx b/packages/nextjs/pages/index copy.tsx
new file mode 100644
index 0000000..4cac710
--- /dev/null
+++ b/packages/nextjs/pages/index copy.tsx	
@@ -0,0 +1,73 @@
+import Link from "next/link";
+import type { NextPage } from "next";
+import { BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
+import { MetaHeader } from "~~/components/MetaHeader";
+//se-2原先的home界面留存
+const Home: NextPage = () => {
+  return (
+    <>
+      <MetaHeader />
+      <div className="flex items-center flex-col flex-grow pt-10">
+        <div className="px-5">
+          <h1 className="text-center mb-8">
+            <span className="block text-2xl mb-2">Welcome to</span>
+            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
+          </h1>
+          <p className="text-center text-lg">
+            Get started by editing{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              packages/nextjs/pages/index.tsx
+            </code>
+          </p>
+          <p className="text-center text-lg">
+            Edit your smart contract{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              YourContract.sol
+            </code>{" "}
+            in{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              packages/hardhat/contracts
+            </code>
+          </p>
+        </div>
+
+        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <BugAntIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Tinker with your smart contract using the{" "}
+                <Link href="/debug" passHref className="link">
+                  Debug Contract
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <SparklesIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Experiment with{" "}
+                <Link href="/example-ui" passHref className="link">
+                  Example UI
+                </Link>{" "}
+                to build your own UI.
+              </p>
+            </div>
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Explore your local transactions with the{" "}
+                <Link href="/blockexplorer" passHref className="link">
+                  Block Explorer
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Home;
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 0a5c06a..d9a9543 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -1,73 +1,111 @@
-import Link from "next/link";
-import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
-import { MetaHeader } from "~~/components/MetaHeader";
+import { NextPage } from "next";
+import { useEffect, useState } from "react";
 
-const Home: NextPage = () => {
-  return (
-    <>
-      <MetaHeader />
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center mb-8">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
-          </h1>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/pages/index.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
-        </div>
+const ETHSpace: NextPage = () => {
+    //在对后端发起请求后，将response的内容保存在results中
+    const [result, setResult] = useState("The search results will be shown here");
+    //设置默认是在我们提供的数据集而不是公共数据集中查询
+    const [qinPublic, setQinPublic] = useState(false);
+    //获取目前提供的数据集选项
+    const [options, setOptions] = useState<string[]>([]);
+    //获取用户选择的数据集
+    const [dataset, setDataset] = useState("");
+    //获取用户搜索的prompt
+    const [seaPrompt, setSeaPrompt] = useState("");
+    //仅在组件挂载时执行一次获取数据集列表
+    useEffect(() => {
+        const data = fetchOptions();
+        setOptions(data);
+    });
 
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contract
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <SparklesIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Experiment with{" "}
-                <Link href="/example-ui" passHref className="link">
-                  Example UI
-                </Link>{" "}
-                to build your own UI.
-              </p>
+    //从后端获取数据集列表
+    const fetchOptions = () => {
+        return ['eth-whitepaper', 'eth-contracts'];
+    };
+    //获取search prompt与dataset名字后向后端发request
+    const handleonClick =()=>{
+        
+    };
+    return (
+        <div className="grid lg:grid-cols-2 flex-grow">
+            <div className="hero min-h-screen bg-base-200 bg-gradient-to-r from-green-500 to-blue-500">
+                <div className="hero-content text-center">
+                    <div className="max-w-md">
+                        <h1 className="text-5xl font-bold">ETH-SPACE</h1>
+                        <p className="py-6">AI-based Smart Contract Explorer</p>
+                        <div className="form-control mb-6">
+                            <label className="label cursor-pointer">
+                                <span className="label-text text-2xl">Search in the Public Dataset</span>
+                                <input
+                                    type="checkbox"
+                                    className="toggle toggle-accent"
+                                    checked={qinPublic}
+                                    onChange={() => {
+                                        setQinPublic(!qinPublic);
+                                    }}
+                                />
+                            </label>
+                        </div>
+                        <div className="join mb-6">
+                            <div>
+                                <div>
+                                    <input
+                                        className="input input-bordered join-item"
+                                        value={seaPrompt}
+                                        onChange={(e) => {
+                                            setSeaPrompt(e.target.value);
+                                        }}
+                                        placeholder="Enter your prompt to search" />
+                                </div>
+                            </div>
+                            <div>
+                                <div>
+                                    {!qinPublic ? (
+                                        <select
+                                            className="select select-bordered join-item"
+                                            onChange={(e) => {
+                                                setDataset(e.target.value);
+                                            }}>
+                                            {
+                                                options.map((option, index) => (
+                                                    <option key={index} value={option}>{option}</option>
+                                                ))
+                                            }
+                                        </select>
+                                    ) : (
+                                        <input
+                                            className="input input-bordered join-item"
+                                            value={dataset}
+                                            onChange={(e) => {
+                                                setDataset(e.target.value);
+                                            }}
+                                            placeholder="Pls input the public dataset name" />
+                                    )}
+                                </div>
+                            </div>
+                            <div className="indicator">
+                                <button className="btn join-item" onClick={()=>{
+                                    handleonClick();
+                                }}>Search</button>
+                            </div>
+                        </div>
+                        <span className="text-sm m-10">
+                            A search question example: Give me the examples about struct. The "type" in metadata should be "struct".
+                        </span>
+                    </div>
+                </div>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
+            <div className="bg-gradient-to-r from-blue-500 to-green-500">
+                <div className="mx-auto w-4/5 h-4/5 backdrop-blur-lg backdrop-filter p-10 m-10 rounded-lg opacity-80 shadow-md">
+                    <h2 className="text-4xl font-bold mb-4">Search Results</h2>
+                    <span className="text-2xl m-2">
+                        {result}
+                    </span>
+                </div>
+
             </div>
-          </div>
         </div>
-      </div>
-    </>
-  );
+    )
 };
 
-export default Home;
+export default ETHSpace;
\ No newline at end of file