diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index f089d25..c9841e8 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,5 +1,46 @@
-export default async function Home() {
-	return <div>
-		
-	</div>;
+'use client';
+
+import { api } from '@repo/client';
+import { Button } from '@repo/ui/components/button';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+
+function HomeContent() {
+	const [name, setName] = useState('');
+	const helloQuery = api.hello.useQuery(name || undefined);
+
+	return (
+		<div className="p-4">
+			<input
+				type="text"
+				value={name}
+				onChange={(e) => setName(e.target.value)}
+				placeholder="输入名字"
+				className="border p-2 mr-2"
+			/>
+			<Button onClick={() => helloQuery.refetch()}>{helloQuery.isLoading ? '加载中...' : helloQuery.data}</Button>
+		</div>
+	);
+}
+
+export default function Home() {
+	const [queryClient] = useState(() => new QueryClient());
+	const [trpcClient] = useState(() =>
+		api.createClient({
+			links: [
+				httpBatchLink({
+					url: 'http://localhost:3000/api/trpc',
+				}),
+			],
+		}),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<api.Provider client={trpcClient} queryClient={queryClient}>
+				<HomeContent />
+			</api.Provider>
+		</QueryClientProvider>
+	);
 }
diff --git a/packages/client/src/api/hooks/index.ts b/packages/client/src/api/hooks/index.ts
index 65ddfc5..4748f6c 100755
--- a/packages/client/src/api/hooks/index.ts
+++ b/packages/client/src/api/hooks/index.ts
@@ -1,2 +1,2 @@
-
-export * from "./useEntity"
+export * from './useEntity';
+export * from './useHello';
diff --git a/packages/client/src/api/hooks/useHello.ts b/packages/client/src/api/hooks/useHello.ts
new file mode 100644
index 0000000..00b5155
--- /dev/null
+++ b/packages/client/src/api/hooks/useHello.ts
@@ -0,0 +1,7 @@
+import { api } from '../trpc';
+
+export function useHello() {
+	return {
+		hello: api.hello,
+	};
+}
diff --git a/packages/client/src/api/trpc.ts b/packages/client/src/api/trpc.ts
index e4b46f0..fe2f94f 100755
--- a/packages/client/src/api/trpc.ts
+++ b/packages/client/src/api/trpc.ts
@@ -1,8 +1,8 @@
-import { AppRouter } from "@repo/backend/trpc"
-import { inferReactQueryProcedureOptions } from "@trpc/react-query";
-import { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { AppRouter } from '@repo/backend/trpc';
+import { inferReactQueryProcedureOptions } from '@trpc/react-query';
+import { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
 import { createTRPCContext } from '@trpc/tanstack-react-query';
 export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
 export type RouterInputs = inferRouterInputs<AppRouter>;
 export type RouterOutputs = inferRouterOutputs<AppRouter>;
-export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
\ No newline at end of file
+export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index e1a7166..b1c13e7 100755
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@@ -1 +1 @@
-export * from "./api"
+export * from './api';