diff --git a/license_ui/src/components/LicenseCode.module.css b/license_ui/src/components/LicenseCode.module.css
index f8a43fd..29a03bf 100644
--- a/license_ui/src/components/LicenseCode.module.css
+++ b/license_ui/src/components/LicenseCode.module.css
@@ -3,4 +3,7 @@
 }
 .license-code-area {
   flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-wrap: break-word;
 }
diff --git a/license_ui/src/components/LicenseCode.tsx b/license_ui/src/components/LicenseCode.tsx
index 23dd572..b19138d 100644
--- a/license_ui/src/components/LicenseCode.tsx
+++ b/license_ui/src/components/LicenseCode.tsx
@@ -1,8 +1,10 @@
-import { ActionIcon, Flex, Group, Paper, Textarea, Title, Tooltip } from "@mantine/core";
+import { useLicenseCode } from "@/hooks/use-license-code";
+import { ActionIcon, Box, Flex, Group, Paper, Title, Tooltip } from "@mantine/core";
 import { IconCopy } from "@tabler/icons-react";
 import classes from "./LicenseCode.module.css";
 
 export function LicenseCode() {
+  const [licenseCode] = useLicenseCode();
   return (
     <Paper shadow="md" p="lg" className={classes["container"]}>
       <Flex direction="column" justify="flex-start" align="stretch" gap="md">
@@ -14,7 +16,9 @@ export function LicenseCode() {
             </ActionIcon>
           </Tooltip>
         </Group>
-        <Textarea autosize minRows={9} maxRows={12} readOnly variant="transparent" />
+        <Box className={classes["license-code-area"]} c="green">
+          {licenseCode}
+        </Box>
       </Flex>
     </Paper>
   );
diff --git a/license_ui/src/components/ProductList.module.css b/license_ui/src/components/ProductList.module.css
index 3da53b8..befc017 100644
--- a/license_ui/src/components/ProductList.module.css
+++ b/license_ui/src/components/ProductList.module.css
@@ -1,3 +1,9 @@
 .conatiner {
   flex-grow: 1;
 }
+.title {
+  flex-grow: 5;
+}
+.title-search {
+  flex-grow: 1;
+}
diff --git a/license_ui/src/components/ProductList.tsx b/license_ui/src/components/ProductList.tsx
index 6440160..4f5c176 100644
--- a/license_ui/src/components/ProductList.tsx
+++ b/license_ui/src/components/ProductList.tsx
@@ -1,10 +1,21 @@
-import { Flex, Paper, Title } from "@mantine/core";
+import { Flex, Paper, TextInput, Title } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import classes from "./ProductList.module.css";
 
 export function ProductList() {
   return (
     <Paper shadow="md" p="lg" h="100%">
       <Flex direction="column" justify="flex-start" align="stretch" gap="md">
-        <Title order={4}>产品列表</Title>
+        <Flex direction="row" justify={"space-between"} align={"center"} gap="sm">
+          <Title order={4} className={classes["title"]}>
+            产品列表
+          </Title>
+          <TextInput
+            placeholder="输入关键词检索产品"
+            className={classes["title-search"]}
+            leftSection={<IconSearch size={16} />}
+          />
+        </Flex>
       </Flex>
     </Paper>
   );
diff --git a/license_ui/src/hooks/use-license-code.ts b/license_ui/src/hooks/use-license-code.ts
new file mode 100644
index 0000000..42e0198
--- /dev/null
+++ b/license_ui/src/hooks/use-license-code.ts
@@ -0,0 +1,6 @@
+import { useState } from "react";
+
+export function useLicenseCode(): [string, (licenseCode: string) => void] {
+  const [licenseCode, setLicenseCode] = useState<string>("");
+  return [licenseCode, setLicenseCode];
+}
diff --git a/license_ui/src/hooks/use-products.ts b/license_ui/src/hooks/use-products.ts
new file mode 100644
index 0000000..da6f394
--- /dev/null
+++ b/license_ui/src/hooks/use-products.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+type ProductSearchKeyword = string | undefined | null;
+
+interface Product {
+  id: string;
+  name: string;
+}
+
+export function useProducts(keyword: ProductSearchKeyword): Product[] {
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      const response = await fetch(`/api/products?keyword=${keyword}`);
+      const data = await response.json();
+      setProducts(data);
+    }
+
+    fetchProducts();
+  }, [keyword]);
+
+  return products;
+}