diff --git a/frontend/src/renderer/components/FileItem.jsx b/frontend/src/renderer/components/FileItem.jsx
new file mode 100644
index 0000000..571bef4
--- /dev/null
+++ b/frontend/src/renderer/components/FileItem.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { FileOutlined, FolderOutlined, FilePdfOutlined, FileImageOutlined, FileWordOutlined, FileExcelOutlined } from '@ant-design/icons';
+
+const getFileIcon = (filename) => {
+  const ext = filename.split('.').pop().toLowerCase();
+  const iconMap = {
+    pdf: <FilePdfOutlined style={{ color: '#ff4d4f' }} />,
+    jpg: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    jpeg: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    png: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    gif: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    doc: <FileWordOutlined style={{ color: '#1890ff' }} />,
+    docx: <FileWordOutlined style={{ color: '#1890ff' }} />,
+    xls: <FileExcelOutlined style={{ color: '#52c41a' }} />,
+    xlsx: <FileExcelOutlined style={{ color: '#52c41a' }} />,
+  };
+  return iconMap[ext] || <FileOutlined />;
+};
+
+function FileItem({ file, onClick, onSelect }) {
+  const isFolder = file.is_folder;
+  
+  return (
+    <div 
+      onClick={() => onClick?.(file)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '12px',
+        borderBottom: '1px solid #f0f0f0',
+        cursor: 'pointer',
+        background: '#fff'
+      }}
+    >
+      <span 
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelect?.(file);
+        }}
+        style={{ marginRight: '8px' }}
+      >
+        <input type="checkbox" />
+      </span>
+      <span style={{ fontSize: '20px', marginRight: '12px' }}>
+        {isFolder ? <FolderOutlined style={{ color: '#faad14' }} /> : getFileIcon(file.name)}
+      </span>
+      <span style={{ flex: 1 }}>{file.name}</span>
+      <span style={{ color: '#8c8c8c', marginRight: '16px' }}>
+        {file.size ? `${(file.size / 1024 / 1024).toFixed(2)} MB` : '-'}
+      </span>
+      <span style={{ color: '#8c8c8c' }}>
+        {file.updated_at ? new Date(file.updated_at).toLocaleDateString() : '-'}
+      </span>
+    </div>
+  );
+}
+
+export default FileItem;