diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 31bec2a..0d49956 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -333,9 +333,23 @@ function App() {
 
             {/* 添加/编辑表单 */}
             <div className="category-form">
-              <div className="form-row">
-                <input className="form-input" style={{flex: 1}} value={categoryForm.name} onChange={e => setCategoryForm({...categoryForm, name: e.target.value})} placeholder="分类名称"/>
-                <input type="number" className="form-input" style={{width: '80px'}} value={categoryForm.sort_order} onChange={e => setCategoryForm({...categoryForm, sort_order: e.target.value})} placeholder="排序"/>
+              <div className="form-group">
+                <label className="form-label">分类名称 *</label>
+                <input className="form-input" value={categoryForm.name} onChange={e => setCategoryForm({...categoryForm, name: e.target.value})} placeholder="输入分类名称"/>
+              </div>
+              <div className="form-group">
+                <label className="form-label">排序（数字越小越靠前）</label>
+                <input type="number" className="form-input" value={categoryForm.sort_order} onChange={e => setCategoryForm({...categoryForm, sort_order: e.target.value})} placeholder="0"/>
+              </div>
+              <div className="form-group">
+                <label className="form-label">图标</label>
+                <div className="icon-picker">
+                  {PRESET_ICONS.map(iconName => (
+                    <button key={iconName} type="button" className={`icon-option ${categoryForm.icon === iconName ? 'selected' : ''}`} onClick={() => setCategoryForm({...categoryForm, icon: iconName})}>
+                      <Icon name={iconName} size={16}/>
+                    </button>
+                  ))}
+                </div>
               </div>
               <div className="form-group">
                 <label className="form-label">颜色</label>
@@ -345,9 +359,12 @@ function App() {
                   ))}
                 </div>
               </div>
-              <button className="btn btn-submit" style={{width: '100%', marginTop: '12px'}} onClick={saveCategory} disabled={!categoryForm.name}>
-                {editingCategory ? '保存修改' : '添加分类'}
-              </button>
+              <div className="form-actions" style={{marginTop: '20px'}}>
+                <button className="btn btn-cancel" onClick={() => { setEditingCategory(null); setCategoryForm({name: '', icon: 'folder', color: '#667eea', sort_order: 0}) }}>取消</button>
+                <button className="btn btn-submit" onClick={saveCategory} disabled={!categoryForm.name}>
+                  {editingCategory ? '保存修改' : '添加分类'}
+                </button>
+              </div>
             </div>
 
             {/* 分类列表 */}