diff --git a/src/main.jsx b/src/main.jsx
index d9dee63..be176f6 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -19,6 +19,7 @@ import CallCenter from '@/views/CallCenter'
 import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper'
 import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile'
 import SnippetList from '@/views/accounts/SnippetList'
+import GeneratePayment from '@/views/accounts/GeneratePayment'
 
 import Unassign from '@/views/ChatUnassign'
 import ChatAssign from '@/views/Conversations/ChatAssign'
@@ -72,6 +73,8 @@ const router = createBrowserRouter([
               { path: 'order/chat/:order_sn', element: <ChatWindow /> },
               { path: 'order/chat', element: <ChatWindow /> },
               { path: 'account/snippet-list', element: <SnippetList /> },
+              { path: 'account/generate-payment', element: <GeneratePayment /> },
+
               { path: 'account/profile', element: <AccountProfile /> },
               { path: 'chat/unassign/:whatsappid', element: <ChatAssign /> },
               { path: 'chat/unassign', element: <Unassign /> },
diff --git a/src/views/accounts/GeneratePayment.jsx b/src/views/accounts/GeneratePayment.jsx
new file mode 100644
index 0000000..042e2b2
--- /dev/null
+++ b/src/views/accounts/GeneratePayment.jsx
@@ -0,0 +1,86 @@
+import { App, Row, Col, Flex, Form, Input, Button, InputNumber, Select, message } from 'antd'
+import { useState, useEffect } from 'react'
+import HtmlPreview from './HtmlPreview'
+import useAuthStore from '@/stores/AuthStore'
+
+function GeneratePayment() {
+  const [messageApi, contextHolder] = message.useMessage()
+
+  const [searchform] = Form.useForm()
+
+  const [isHtmlLoading, setHtmlLoading] = useState(false)
+
+  const handleSearchFinish = (values) => {
+  }
+
+  useEffect(() => {}, [])
+
+  return (
+    <>
+      <Row gutter={16}>
+        <Col span={6} offset={6}>
+          <Form
+            labelCol={{
+              span: 4,
+            }}
+            layout={'horizontal'}
+            form={searchform}
+            onFinish={handleSearchFinish}
+            initialValues={{}}>
+            <Form.Item label='币种' name='owner'>
+              <Select
+                options={[
+                  { value: '美元', label: '美元' },
+                  { value: '欧元', label: '欧元' },
+                  { value: '人民币', label: '人民币' },
+                ]}></Select>
+            </Form.Item>
+            <Form.Item label='语种' name='type'>
+              <Select
+                options={[
+                  { value: '英语', label: '英语' },
+                  { value: '意语', label: '意语' },
+                  { value: '法语', label: '法语' },
+                ]}
+              />
+            </Form.Item>
+            <Form.Item label='订单类型' name='订单类型'>
+              <Select
+                options={[
+                  { value: '线路订单', label: '线路订单' },
+                  { value: '商务订单', label: '商务订单' },
+                ]}
+              />
+            </Form.Item>
+            <Form.Item label='订单号' name='订单号'>
+              <Input />
+            </Form.Item>
+            <Form.Item label='金额' name='title'>
+              <InputNumber className='w-full' />
+            </Form.Item>
+            <Form.Item label='描述' name='描述'>
+              <Input.TextArea rows={4} />
+            </Form.Item>
+            <Form.Item label='通知邮箱' name='通知邮箱'>
+              <Input />
+            </Form.Item>
+          </Form>
+
+          <Flex gap='middle' justify='center'>
+            <Button onClick={() => {}}>生成</Button>
+            <Button type='primary' onClick={() => {}}>
+              复制
+            </Button>
+          </Flex>
+        </Col>
+
+        <Col span={6}>
+          <HtmlPreview />
+        </Col>
+        {contextHolder}
+      </Row>
+    </>
+  )
+}
+
+export default GeneratePayment
diff --git a/src/views/accounts/SnippetList.jsx b/src/views/accounts/SnippetList.jsx
index 91f8c48..6ac21ff 100644
--- a/src/views/accounts/SnippetList.jsx
+++ b/src/views/accounts/SnippetList.jsx
@@ -177,7 +177,7 @@ function SnippetList() {
         </Form.Item>
       </Modal>
 
-      <Space direction='vertical' size='large' style={{ width: '100%' }}>
+      <Space direction='vertical' size='large' className='w-full'>
         <Form
           layout={'inline'}
           form={searchform}