diff --git a/src/feature/home/WorkCard.tsx b/src/feature/home/WorkCard.tsx
new file mode 100644
index 0000000..1d3ac22
--- /dev/null
+++ b/src/feature/home/WorkCard.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card, Typography, Space } from 'antd';
+import { EyeOutlined, UserOutlined } from '@ant-design/icons';
+import type { WorkCardProps } from './types';
+import { useNavigate } from 'react-router';
+
+const { Text, Title } = Typography;
+const { Meta } = Card;
+
+const WorkCard: React.FC<WorkCardProps> = ({ artwork }) => {
+    const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        const target = e.target as HTMLImageElement;
+        target.src = 'https://via.placeholder.com/300x200?text=No+Image';
+    };
+    const nav = useNavigate()
+    const handleClick = () => {
+        nav(`/work/${artwork.id}`)
+    }
+
+    const formatViews = (views: number): string => {
+        return views.toLocaleString();
+    };
+
+    return (
+        <Card
+            hoverable
+            style={{ marginBottom: 16 }}
+            cover={
+                <img
+                    alt={artwork.title}
+                    src={artwork.cover}
+                    style={{
+                        height: 200,
+                        objectFit: 'cover',
+                        borderRadius: '8px 8px 0 0'
+                    }}
+                    onError={handleImageError}
+                />
+            }
+            actions={[
+                <Space key="views">
+                    <EyeOutlined />
+                    <Text type="secondary">{formatViews(artwork.views)}</Text>
+                </Space>,
+                <Space key="author">
+                    <UserOutlined />
+                    <Text type="secondary">{artwork.author}</Text>
+                </Space>,
+            ]}
+            onClick={handleClick}
+        >
+            <Meta
+                title={
+                    <div style={{ marginBottom: 8 }}>
+                        <Title level={4} style={{ margin: 0, fontSize: 16 }}>
+                            {artwork.title}
+                        </Title>
+                    </div>
+                }
+                description={
+                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                        <Text type="secondary" style={{ fontSize: 12 }}>
+                            分类: {artwork.category.name}
+                        </Text>
+                        {artwork.category.children.length > 0 && (
+                            <Space wrap size={[4, 4]}>
+                                {artwork.category.children.map((child, index) => (
+                                    <Text
+                                        key={index}
+                                        code
+                                        style={{
+                                            fontSize: 11,
+                                            padding: '2px 6px',
+                                            backgroundColor: '#f5f5f5',
+                                            borderRadius: 4
+                                        }}
+                                    >
+                                        {child}
+                                    </Text>
+                                ))}
+                            </Space>
+                        )}
+                    </Space>
+                }
+            />
+        </Card>
+    );
+};
+
+export default WorkCard;
\ No newline at end of file