diff --git a/frontend/src/renderer/index.html b/frontend/src/renderer/index.html
index 07b28d9..e842dd8 100644
--- a/frontend/src/renderer/index.html
+++ b/frontend/src/renderer/index.html
@@ -8,6 +8,13 @@
   <style>
     body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
     #root { min-height: 100vh; }
+    .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
+    .login-box { width: 400px; padding: 40px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+    .login-title { text-align: center; margin-bottom: 30px; font-size: 24px; }
+    .main-layout { min-height: 100vh; }
+    .header { background: #1890ff; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 20px; font-weight: bold; }
+    .toolbar { padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
+    .file-list { padding: 16px; background: #fff; }
   </style>
 </head>
 <body>
@@ -16,19 +23,25 @@
   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/antd@5.12.0/dist/antd.min.js"></script>
-  <script src="https://unpkg.com/@ant-design/icons@5.2.6/dist/index.umd.min.js"></script>
+  <script src="https://unpkg.com/@ant-design/icons@5.2.6/dist/index-umd.min.js"></script>
   
   <script>
-    // Simple app without JSX
-    const { Button, Layout, Menu, Input, Table, Modal, Upload, Progress, Breadcrumb, Avatar, Dropdown, Spin, message, notification } = antd;
-    const { FolderOutlined, FileOutlined, UploadOutlined, DeleteOutlined, DownloadOutlined, ShareAltOutlined, UserOutlined, SettingOutlined, LogoutOutlined, HomeOutlined, ClockCircleOutlined, CloudOutlined } = icons;
+    const { Button, Layout, Menu, Input, Table, Avatar, Spin } = antd;
+    const { FolderOutlined, FileOutlined, UploadOutlined, DeleteOutlined, DownloadOutlined, ShareAltOutlined, UserOutlined, ClockCircleOutlined, HomeOutlined } = icons;
     const { Header, Sider, Content } = Layout;
     
+    // App Component
     function App() {
-      const [user, setUser] = React.useState(null);
-      const [files, setFiles] = React.useState([]);
-      const [currentPath, setCurrentPath] = React.useState([]);
       const [isLoggedIn, setIsLoggedIn] = React.useState(false);
+      const [loading, setLoading] = React.useState(false);
+      const [username, setUsername] = React.useState('');
+      const [password, setPassword] = React.useState('');
+      
+      const handleLogin = () => {
+        if (username && password) {
+          setIsLoggedIn(true);
+        }
+      };
       
       const menuItems = [
         { key: 'files', icon: React.createElement(FolderOutlined), label: '我的文件' },
@@ -38,46 +51,51 @@
       ];
       
       if (!isLoggedIn) {
-        return React.createElement('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#f0f2f5' } },
-          React.createElement('div', { style: { width: '400px', padding: '40px', background: 'white', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' } },
-            React.createElement('h1', { style: { textAlign: 'center', marginBottom: '30px' } }, 'CloudDisk'),
-            React.createElement(Input, { placeholder: '用户名', style: { marginBottom: '16px' } }),
-            React.createElement(Input.Password, { placeholder: '密码', style: { marginBottom: '16px' } }),
-            React.createElement(Button, { type: 'primary', block: true }, '登录')
+        return React.createElement('div', { className: 'login-container' },
+          React.createElement('div', { className: 'login-box' },
+            React.createElement('h1', { className: 'login-title' }, 'CloudDisk'),
+            React.createElement(Input, { 
+              placeholder: '用户名', 
+              value: username,
+              onChange: (e) => setUsername(e.target.value),
+              style: { marginBottom: '16px' } 
+            }),
+            React.createElement(Input.Password, { 
+              placeholder: '密码', 
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              style: { marginBottom: '16px' } 
+            }),
+            React.createElement(Button, { 
+              type: 'primary', 
+              block: true,
+              onClick: handleLogin
+            }, '登录')
           )
         );
       }
       
-      return React.createElement(Layout, { style: { minHeight: '100vh' } },
-        React.createElement(Header, { style: { background: '#1890ff', padding: '0 20px', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
-          React.createElement('span', { style: { fontSize: '20px', fontWeight: 'bold' } }, 'CloudDisk'),
-          React.createElement(Avatar, { icon: React.createElement(UserOutlined) })
+      return React.createElement(Layout, { className: 'main-layout' },
+        React.createElement(Header, { className: 'header' },
+          React.createElement('span', null, 'CloudDisk'),
+          React.createElement(Avatar, { icon: React.createElement(UserOutlined), style: { cursor: 'pointer' } })
         ),
         React.createElement(Layout, {},
           React.createElement(Sider, { width: 200, style: { background: '#fff' } },
             React.createElement(Menu, { mode: 'inline', defaultSelectedKeys: ['files'], items: menuItems, style: { height: '100%' } })
           ),
-          React.createElement(Layout, { style: { padding: '20px', background: '#fff' } },
-            React.createElement('div', { style: { marginBottom: '16px' } },
-              React.createElement(Upload, { showUploadList: false },
-                React.createElement(Button, { icon: React.createElement(UploadOutlined) }, '上传文件')
-              ),
-              React.createElement(Button, { icon: React.createElement(FolderOutlined), style: { marginLeft: '8px' } }, '新建文件夹')
+          React.createElement(Content, { style: { padding: '20px', background: '#fff' } },
+            React.createElement('div', { className: 'toolbar' },
+              React.createElement(Button, { icon: React.createElement(UploadOutlined), style: { marginRight: '8px' } }, '上传文件'),
+              React.createElement(Button, { icon: React.createElement(FolderOutlined) }, '新建文件夹')
             ),
-            React.createElement(Table, { 
-              dataSource: files, 
-              columns: [
-                { title: '名称', dataIndex: 'name', key: 'name' },
-                { title: '大小', dataIndex: 'size', key: 'size', render: (v) => v ? (v/1024/1024).toFixed(2) + ' MB' : '-' },
-                { title: '修改时间', dataIndex: 'updated_at', key: 'updated_at' }
-              ],
-              rowKey: 'id'
-            })
+            React.createElement('p', { style: { color: '#999', textAlign: 'center', marginTop: '50px' } }, '暂无文件，请上传文件开始使用')
           )
         )
       );
     }
     
+    // Render
     ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
   </script>
 </body>
