diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1ece96a..57eed1f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@heroui/react';
+import Card from "./components/Card"
+
+
 function App() {
 
   return (
-    <>    <Button>
-      My Button
-    </Button></>
+    <><Card /></>
   )
 }
 
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
new file mode 100644
index 0000000..20ece61
--- /dev/null
+++ b/frontend/src/components/Card.tsx
@@ -0,0 +1,44 @@
+import {ScrollShadow} from "@heroui/react";
+import { useEffect, useState } from "react";
+
+export default function Card() {
+  // Data
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  
+  // Load Data
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('http://localhost:8080/agent/card/你好')
+        if (!response.ok) {
+          throw new Error('API Error');
+        }
+        const result = await response.json();
+        setData(result);
+      } catch (error) {
+        console.error("Failed to fetch data: ", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+
+  return (
+    <div className="w-full p-0 sm:max-w-sm">
+      <ScrollShadow className="max-h-[500px] p-10">
+        <div className="space-y-4">
+{loading ? (
+            // 3. 加载状态显示 Loading...
+            <p className="text-center text-gray-500">Loading data...</p>
+          ) : (
+            // 4. 渲染从 API 获取的数据
+            <pre>{data?.message}</pre>
+          )}
+        </div>
+      </ScrollShadow>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/global.css b/frontend/src/global.css
index b2160b7..7af4b60 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -1,2 +1,2 @@
-@import "tailwindcss/theme" theme(reference);
+@import "tailwindcss/theme";
 @import "@heroui/styles"; 
\ No newline at end of file