diff --git a/src/renderer/src/components/ExtractorOperationHistoryModal.tsx b/src/renderer/src/components/ExtractorOperationHistoryModal.tsx
index 2cec417..af11ace 100644
--- a/src/renderer/src/components/ExtractorOperationHistoryModal.tsx
+++ b/src/renderer/src/components/ExtractorOperationHistoryModal.tsx
@@ -3,10 +3,16 @@
  *
  * Displays extraction operation history with batch statistics and details.
  * Admin users see all users' records, regular users see only their own.
+ *
+ * Migrated to use shadcn/ui components
  */
 
 import React, { useState, useEffect, useCallback } from 'react'
 import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/shadcn/table'
+import { ScrollArea } from './ui/shadcn/scroll-area'
+import { cn } from '@renderer/lib/utils'
 import {
   RefreshCw,
   Trash2,
@@ -31,10 +37,10 @@ interface ExtractorOperationHistoryModalProps {
 }
 
 const statusStyles: Record<string, string> = {
-  success: 'bg-green-100 text-green-700',
-  partial: 'bg-amber-100 text-amber-700',
-  failed: 'bg-red-100 text-red-700',
-  pending: 'bg-gray-100 text-gray-700'
+  success: 'bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400',
+  partial: 'bg-amber-100 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400',
+  failed: 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400',
+  pending: 'bg-muted text-muted-foreground'
 }
 
 const statusLabels: Record<string, string> = {
@@ -45,10 +51,10 @@ const statusLabels: Record<string, string> = {
 }
 
 const statusIcons: Record<string, React.ReactNode> = {
-  success: <CheckCircle size={16} className="text-green-600" />,
-  partial: <Clock size={16} className="text-amber-600" />,
-  failed: <XCircle size={16} className="text-red-600" />,
-  pending: <Clock size={16} className="text-gray-500" />
+  success: <CheckCircle size={16} className="text-green-600 dark:text-green-400" />,
+  partial: <Clock size={16} className="text-amber-600 dark:text-amber-400" />,
+  failed: <XCircle size={16} className="text-red-600 dark:text-red-400" />,
+  pending: <Clock size={16} className="text-muted-foreground" />
 }
 
 const formatDateTime = (dateStr: string) => {
@@ -195,44 +201,45 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
     <Modal isOpen={isOpen} onClose={onClose} title="操作历史" size="3xl">
       <div className="flex flex-col h-[70vh]">
         {/* Toolbar */}
-        <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
+        <div className="flex items-center justify-between mb-4 pb-4 border-b border-border">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-gray-600">
+            <span className="text-sm text-muted-foreground">
               {isAdmin ? (
-                <span className="text-amber-600 font-medium">管理员模式：显示所有用户记录</span>
+                <span className="text-amber-600 dark:text-amber-400 font-medium">管理员模式：显示所有用户记录</span>
               ) : (
                 <span>仅显示您的操作记录</span>
               )}
             </span>
             {batches.length > 0 && (
-              <span className="text-sm text-gray-500">共 {batches.length} 条批次</span>
+              <span className="text-sm text-muted-foreground">共 {batches.length} 条批次</span>
             )}
           </div>
-          <button
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+          <Button
+            variant="ghost"
             onClick={() => void fetchBatches()}
             disabled={loading}
             title="刷新"
+            className="h-8 w-8 p-0"
           >
             <RefreshCw size={18} className={loading ? 'animate-spin' : ''} />
-          </button>
+          </Button>
         </div>
 
         {/* Error message */}
         {error && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+          <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive text-sm dark:bg-destructive/20 dark:border-destructive/30">
             {error}
           </div>
         )}
 
         {/* Batch list */}
-        <div className="flex-1 overflow-y-auto">
+        <ScrollArea className="flex-1">
           {loading && batches.length === 0 ? (
-            <div className="flex items-center justify-center h-32 text-gray-500">加载中...</div>
+            <div className="flex items-center justify-center h-32 text-muted-foreground">加载中...</div>
           ) : batches.length === 0 ? (
-            <div className="flex items-center justify-center h-32 text-gray-500">暂无操作记录</div>
+            <div className="flex items-center justify-center h-32 text-muted-foreground">暂无操作记录</div>
           ) : (
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-3 pr-4">
               {batches.map((batch) => {
                 const isExpanded = expandedBatches.has(batch.batchId)
                 const details = batchDetails.get(batch.batchId) || []
@@ -241,60 +248,65 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
                 return (
                   <div
                     key={batch.batchId}
-                    className="border border-gray-200 rounded-lg overflow-hidden"
+                    className="border border-border rounded-lg overflow-hidden"
                   >
                     {/* Batch summary */}
                     <div
-                      className={`flex items-center justify-between p-4 cursor-pointer transition-colors ${
-                        isExpanded ? 'bg-gray-50' : 'hover:bg-gray-50'
-                      }`}
+                      className={cn(
+                        "flex items-center justify-between p-4 cursor-pointer transition-colors",
+                        isExpanded ? 'bg-muted/50' : 'hover:bg-muted/30'
+                      )}
                       onClick={() => toggleBatchExpansion(batch.batchId)}
                     >
                       <div className="flex items-center gap-4 flex-1">
-                        <button className="p-1 hover:bg-gray-200 rounded">
+                        <Button
+                          variant="ghost"
+                          className="h-6 w-6 p-0"
+                        >
                           {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
-                        </button>
+                        </Button>
 
                         <div className="flex-1 grid grid-cols-6 gap-4 text-sm">
                           <div>
-                            <div className="text-gray-500 text-xs">操作时间</div>
-                            <div className="font-medium text-gray-900">
+                            <div className="text-muted-foreground text-xs">操作时间</div>
+                            <div className="font-medium">
                               {formatDateTime(batch.operationTime)}
                             </div>
                           </div>
                           <div>
-                            <div className="text-gray-500 text-xs">操作用户</div>
-                            <div className="font-medium text-gray-900">{batch.username}</div>
+                            <div className="text-muted-foreground text-xs">操作用户</div>
+                            <div className="font-medium">{batch.username}</div>
                           </div>
                           <div>
-                            <div className="text-gray-500 text-xs">状态</div>
+                            <div className="text-muted-foreground text-xs">状态</div>
                             <div className="flex items-center gap-1">
                               {statusIcons[batch.status] || statusIcons.pending}
                               <span
-                                className={`px-2 py-0.5 rounded text-xs font-medium ${
+                                className={cn(
+                                  "px-2 py-0.5 rounded text-xs font-medium",
                                   statusStyles[batch.status] || statusStyles.pending
-                                }`}
+                                )}
                               >
                                 {statusLabels[batch.status] || batch.status}
                               </span>
                             </div>
                           </div>
                           <div>
-                            <div className="text-gray-500 text-xs">订单数</div>
-                            <div className="font-medium text-gray-900">{batch.totalOrders}</div>
+                            <div className="text-muted-foreground text-xs">订单数</div>
+                            <div className="font-medium">{batch.totalOrders}</div>
                           </div>
                           <div>
-                            <div className="text-gray-500 text-xs">记录数</div>
-                            <div className="font-medium text-gray-900">{batch.totalRecords}</div>
+                            <div className="text-muted-foreground text-xs">记录数</div>
+                            <div className="font-medium">{batch.totalRecords}</div>
                           </div>
                           <div>
-                            <div className="text-gray-500 text-xs">成功/失败</div>
-                            <div className="font-medium text-gray-900">
-                              <span className="text-green-600">{batch.successCount}</span>
+                            <div className="text-muted-foreground text-xs">成功/失败</div>
+                            <div className="font-medium">
+                              <span className="text-green-600 dark:text-green-400">{batch.successCount}</span>
                               {batch.failedCount > 0 && (
                                 <>
                                   {' / '}
-                                  <span className="text-red-600">{batch.failedCount}</span>
+                                  <span className="text-destructive">{batch.failedCount}</span>
                                 </>
                               )}
                             </div>
@@ -302,8 +314,9 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
                         </div>
                       </div>
 
-                      <button
-                        className="p-2 hover:bg-red-50 text-gray-400 hover:text-red-600 rounded transition-colors disabled:opacity-50"
+                      <Button
+                        variant="ghost"
+                        className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 h-8 w-8 p-0"
                         onClick={(e) => {
                           e.stopPropagation()
                           void handleDeleteBatch(batch.batchId)
@@ -312,21 +325,22 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
                         title="删除批次"
                       >
                         <Trash2 size={16} className={isDeleting ? 'animate-pulse' : ''} />
-                      </button>
+                      </Button>
                     </div>
 
                     {/* Batch details */}
                     {isExpanded && details.length > 0 && (
-                      <div className="border-t border-gray-200 bg-white">
+                      <div className="border-t border-border bg-background">
                         <div className="overflow-x-auto">
-                          <table className="w-full text-sm">
-                            <thead className="bg-gray-50">
-                              <tr>
-                                <th className="px-4 py-2 text-left font-medium text-gray-600">
+                          <Table>
+                            <TableHeader className="bg-muted/50">
+                              <TableRow>
+                                <TableHead>
                                   <div className="flex items-center gap-2">
                                     总排号
-                                    <button
-                                      className="p-1 hover:bg-gray-200 rounded transition-colors"
+                                    <Button
+                                      variant="ghost"
+                                      className="h-5 w-5 p-0"
                                       onClick={() =>
                                         void handleCopyColumn('productionId', batch.batchId)
                                       }
@@ -334,16 +348,17 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
                                     >
                                       <Copy
                                         size={14}
-                                        className="text-gray-500 hover:text-gray-700"
+                                        className="text-muted-foreground hover:text-foreground"
                                       />
-                                    </button>
+                                    </Button>
                                   </div>
-                                </th>
-                                <th className="px-4 py-2 text-left font-medium text-gray-600">
+                                </TableHead>
+                                <TableHead>
                                   <div className="flex items-center gap-2">
                                     订单号
-                                    <button
-                                      className="p-1 hover:bg-gray-200 rounded transition-colors"
+                                    <Button
+                                      variant="ghost"
+                                      className="h-5 w-5 p-0"
                                       onClick={() =>
                                         void handleCopyColumn('orderNumber', batch.batchId)
                                       }
@@ -351,51 +366,46 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
                                     >
                                       <Copy
                                         size={14}
-                                        className="text-gray-500 hover:text-gray-700"
+                                        className="text-muted-foreground hover:text-foreground"
                                       />
-                                    </button>
+                                    </Button>
                                   </div>
-                                </th>
-                                <th className="px-4 py-2 text-left font-medium text-gray-600">
-                                  状态
-                                </th>
-                                <th className="px-4 py-2 text-left font-medium text-gray-600">
-                                  记录数
-                                </th>
-                                <th className="px-4 py-2 text-left font-medium text-gray-600">
-                                  错误信息
-                                </th>
-                              </tr>
-                            </thead>
-                            <tbody className="divide-y divide-gray-100">
+                                </TableHead>
+                                <TableHead>状态</TableHead>
+                                <TableHead>记录数</TableHead>
+                                <TableHead>错误信息</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
                               {details.map((detail) => (
-                                <tr key={detail.id} className="hover:bg-gray-50">
-                                  <td className="px-4 py-2 text-gray-900">
+                                <TableRow key={detail.id} className="hover:bg-muted/30">
+                                  <TableCell className="font-mono">
                                     {detail.productionId || '-'}
-                                  </td>
-                                  <td className="px-4 py-2 text-gray-900 font-mono text-xs">
+                                  </TableCell>
+                                  <TableCell className="font-mono text-xs">
                                     {detail.orderNumber}
-                                  </td>
-                                  <td className="px-4 py-2">
+                                  </TableCell>
+                                  <TableCell>
                                     <span
-                                      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${
+                                      className={cn(
+                                        "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium",
                                         statusStyles[detail.status] || statusStyles.pending
-                                      }`}
+                                      )}
                                     >
                                       {statusIcons[detail.status]}
                                       {statusLabels[detail.status] || detail.status}
                                     </span>
-                                  </td>
-                                  <td className="px-4 py-2 text-gray-900">
+                                  </TableCell>
+                                  <TableCell>
                                     {detail.recordCount ?? '-'}
-                                  </td>
-                                  <td className="px-4 py-2 text-red-600 text-xs max-w-xs truncate">
+                                  </TableCell>
+                                  <TableCell className="text-destructive text-xs max-w-xs truncate">
                                     {detail.errorMessage || '-'}
-                                  </td>
-                                </tr>
+                                  </TableCell>
+                                </TableRow>
                               ))}
-                            </tbody>
-                          </table>
+                            </TableBody>
+                          </Table>
                         </div>
                       </div>
                     )}
@@ -404,16 +414,16 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
               })}
             </div>
           )}
-        </div>
+        </ScrollArea>
 
         {/* Footer */}
-        <div className="pt-4 border-t border-gray-200 flex justify-end">
-          <button
-            className="px-6 py-2 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium transition-colors"
+        <div className="pt-4 border-t border-border flex justify-end">
+          <Button
+            variant="secondary"
             onClick={onClose}
           >
             关闭
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/src/renderer/src/components/LoginDialog.tsx b/src/renderer/src/components/LoginDialog.tsx
index 7ce74d6..bf14cb2 100644
--- a/src/renderer/src/components/LoginDialog.tsx
+++ b/src/renderer/src/components/LoginDialog.tsx
@@ -5,10 +5,15 @@
  * - Modal dialog for username/password input
  * - Display computer name
  * - Enter key to submit
+ *
+ * Migrated to use shadcn/ui components
  */
 
 import React, { useState, useRef } from 'react'
 import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { Input } from './ui/shadcn/input'
+import { Label } from './ui/shadcn/label'
 
 interface LoginDialogProps {
   isOpen: boolean
@@ -84,7 +89,7 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
           <div
             ref={errorRef}
             id="login-dialog-error"
-            className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm"
+            className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm dark:bg-destructive/20 dark:border-destructive/30"
             role="alert"
             aria-live="polite"
             tabIndex={-1}
@@ -94,14 +99,14 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
         )}
 
         <div className="space-y-4">
-          <div className="text-sm text-gray-600">当前计算机：{computerName}</div>
+          <div className="text-sm text-muted-foreground">当前计算机：{computerName}</div>
 
-          <div>
-            <label className="block text-sm text-slate-700 mb-1">用户名:</label>
-            <input
+          <div className="space-y-2">
+            <Label htmlFor="username">用户名</Label>
+            <Input
               ref={usernameInputRef}
+              id="username"
               type="text"
-              className="border border-slate-300 rounded-md p-2 w-full text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               placeholder="请输入用户名"
@@ -109,11 +114,11 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
             />
           </div>
 
-          <div>
-            <label className="block text-sm text-slate-700 mb-1">密码:</label>
-            <input
+          <div className="space-y-2">
+            <Label htmlFor="password">密码</Label>
+            <Input
+              id="password"
               type="password"
-              className="border border-slate-300 rounded-md p-2 w-full text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="请输入密码"
@@ -123,23 +128,23 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
         </div>
 
         <div className="mt-6 flex justify-end gap-3">
-          <button
-            className="px-4 py-2 rounded-md bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors"
+          <Button
+            variant="secondary"
             onClick={onCancel}
             disabled={isLoggingIn}
           >
             取消
-          </button>
-          <button
-            className="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-50"
+          </Button>
+          <Button
             onClick={handleLogin}
             disabled={isLoggingIn}
+            loading={isLoggingIn}
           >
             {isLoggingIn ? '登录中...' : '登录'}
-          </button>
+          </Button>
         </div>
 
-        <div className="mt-4 text-xs text-gray-400 text-right">v1.0</div>
+        <div className="mt-4 text-xs text-muted-foreground text-right">v1.0</div>
       </div>
     </Modal>
   )
diff --git a/src/renderer/src/components/MaterialTypeManagementDialog.tsx b/src/renderer/src/components/MaterialTypeManagementDialog.tsx
index b2ebafb..e6a87e3 100644
--- a/src/renderer/src/components/MaterialTypeManagementDialog.tsx
+++ b/src/renderer/src/components/MaterialTypeManagementDialog.tsx
@@ -4,11 +4,17 @@
  * Provides a dialog for managing material type keywords used to identify
  * materials for deletion. Admin users can see all records and filter by manager.
  * Regular users can only see and edit their own records.
+ *
+ * Migrated to use shadcn/ui components
  */
 
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { Plus, Trash2, Save, RotateCcw, Users } from 'lucide-react'
 import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/shadcn/table'
+import { ScrollArea } from './ui/shadcn/scroll-area'
+import { cn } from '@renderer/lib/utils'
 import { showSuccess, showError, showInfo } from '../stores/useAppStore'
 import { ConfirmDialog } from './ui/ConfirmDialog'
 import { useConfirmDialog } from './ui/useConfirmDialog'
@@ -317,18 +323,18 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
     onClose()
   }
 
-  // Get row background color
-  const getRowStyle = (row: RowState): React.CSSProperties => {
+  // Get row background color class
+  const getRowClass = (row: RowState): string => {
     if (row.state === 'deleted') {
-      return { backgroundColor: '#fee2e2', textDecoration: 'line-through', opacity: 0.6 }
+      return 'bg-destructive/10 line-through opacity-60'
     }
     if (row.state === 'new') {
-      return { backgroundColor: '#dcfce7' }
+      return 'bg-green-100 dark:bg-green-900/20'
     }
     if (row.state === 'modified') {
-      return { backgroundColor: '#fef9c3' }
+      return 'bg-yellow-100 dark:bg-yellow-900/20'
     }
-    return {}
+    return ''
   }
 
   return (
@@ -342,22 +348,22 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
       <div onKeyDown={handleKeyDown}>
         {/* Manager filter (admin only) */}
         {isAdmin && (
-          <div className="mb-4 p-3 bg-slate-50 rounded-lg border border-slate-200">
+          <div className="mb-4 p-3 bg-muted/50 rounded-lg border border-border">
             <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2 text-sm font-medium text-slate-700">
+              <div className="flex items-center gap-2 text-sm font-medium">
                 <Users size={16} />
                 按负责人筛选
               </div>
               <div className="flex gap-2">
                 <button
                   onClick={() => setSelectedManagers(new Set(managers))}
-                  className="text-xs text-blue-600 hover:underline"
+                  className="text-xs text-primary hover:underline"
                 >
                   全选
                 </button>
                 <button
                   onClick={() => setSelectedManagers(new Set())}
-                  className="text-xs text-slate-500 hover:underline"
+                  className="text-xs text-muted-foreground hover:underline"
                 >
                   取消全选
                 </button>
@@ -367,11 +373,11 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
               {managers.map((manager) => (
                 <label
                   key={manager}
-                  className="flex items-center gap-1.5 text-xs text-slate-600 cursor-pointer hover:bg-white px-2 py-1 rounded"
+                  className="flex items-center gap-1.5 text-xs cursor-pointer hover:bg-background px-2 py-1 rounded"
                 >
                   <input
                     type="checkbox"
-                    className="rounded text-blue-600"
+                    className="rounded text-primary"
                     checked={selectedManagers.has(manager)}
                     onChange={(e) => {
                       setSelectedManagers((prev) => {
@@ -392,131 +398,97 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
         {/* Toolbar */}
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
-            <button
+            <Button
+              size="sm"
               onClick={insertNewRow}
-              className="flex items-center gap-1.5 text-xs bg-green-50 border border-green-200 text-green-700 px-3 py-1.5 rounded hover:bg-green-100"
+              className="gap-1.5 bg-green-100 hover:bg-green-200 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800"
             >
               <Plus size={14} /> 新增 (Insert)
-            </button>
-            <button
+            </Button>
+            <Button
+              size="sm"
               onClick={() => selectedRowIndex !== null && deleteRow(selectedRowIndex)}
               disabled={selectedRowIndex === null}
-              className="flex items-center gap-1.5 text-xs bg-red-50 border border-red-200 text-red-700 px-3 py-1.5 rounded hover:bg-red-100 disabled:opacity-50 disabled:cursor-not-allowed"
+              variant="danger"
+              className="gap-1.5"
             >
               <Trash2 size={14} /> 删除 (Delete)
-            </button>
-            <button
+            </Button>
+            <Button
+              size="sm"
               onClick={handleReset}
               disabled={pendingCount === 0}
-              className="flex items-center gap-1.5 text-xs bg-slate-50 border border-slate-200 text-slate-700 px-3 py-1.5 rounded hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
+              variant="secondary"
+              className="gap-1.5"
             >
               <RotateCcw size={14} /> 重置
-            </button>
+            </Button>
           </div>
           <div className="flex items-center gap-3">
             {pendingCount > 0 && (
-              <span className="text-xs text-amber-600 bg-amber-50 px-2 py-1 rounded">
+              <span className="text-xs text-amber-600 bg-amber-100 dark:bg-amber-900/20 dark:text-amber-400 px-2 py-1 rounded">
                 {pendingCount} 项待保存
               </span>
             )}
-            <button
+            <Button
+              size="sm"
               onClick={handleSave}
               disabled={saving || pendingCount === 0}
-              className="flex items-center gap-1.5 text-xs bg-blue-500 text-white px-3 py-1.5 rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              loading={saving}
+              className="gap-1.5"
             >
               <Save size={14} /> {saving ? '保存中...' : '保存'}
-            </button>
+            </Button>
           </div>
         </div>
 
         {/* Table */}
-        <div className="border border-slate-200 rounded-lg overflow-hidden max-h-[400px] overflow-y-auto">
+        <div className="border border-border rounded-lg overflow-hidden">
           {loading ? (
-            <div className="flex items-center justify-center py-12 text-slate-500">加载中...</div>
+            <div className="flex items-center justify-center py-12 text-muted-foreground">加载中...</div>
           ) : (
-            <table ref={tableRef} className="w-full text-sm">
-              <thead className="bg-slate-100 sticky top-0">
-                <tr>
-                  <th className="px-4 py-2 text-left font-medium text-slate-700 w-64">
-                    物料名称关键词
-                  </th>
-                  <th className="px-4 py-2 text-left font-medium text-slate-700">负责人</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-100">
-                {filteredRows.filter((r) => r.state !== 'deleted').length === 0 ? (
-                  <tr>
-                    <td colSpan={2} className="px-4 py-8 text-center text-slate-400">
-                      暂无数据，点击&quot;新增&quot;按钮添加物料类型关键词
-                    </td>
-                  </tr>
-                ) : (
-                  filteredRows
-                    .filter((r) => r.state !== 'deleted')
-                    .map((row, index) => {
-                      const originalIndex = rows.indexOf(row)
-                      const isSelected = selectedRowIndex === originalIndex
-                      const isEditingMaterial =
-                        editingCell?.rowIndex === originalIndex &&
-                        editingCell?.field === 'materialName'
-                      const isEditingManager =
-                        editingCell?.rowIndex === originalIndex &&
-                        editingCell?.field === 'managerName'
+            <ScrollArea className="max-h-[400px]">
+              <Table ref={tableRef}>
+                <TableHeader className="sticky top-0 bg-muted">
+                  <TableRow>
+                    <TableHead className="w-64">
+                      物料名称关键词
+                    </TableHead>
+                    <TableHead>负责人</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.filter((r) => r.state !== 'deleted').length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={2} className="text-center text-muted-foreground py-8">
+                        暂无数据，点击"新增"按钮添加物料类型关键词
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredRows
+                      .filter((r) => r.state !== 'deleted')
+                      .map((row, index) => {
+                        const originalIndex = rows.indexOf(row)
+                        const isSelected = selectedRowIndex === originalIndex
+                        const isEditingMaterial =
+                          editingCell?.rowIndex === originalIndex &&
+                          editingCell?.field === 'materialName'
+                        const isEditingManager =
+                          editingCell?.rowIndex === originalIndex &&
+                          editingCell?.field === 'managerName'
 
-                      return (
-                        <tr
-                          key={index}
-                          style={getRowStyle(row)}
-                          className={`${isSelected ? 'ring-2 ring-blue-300 ring-inset' : ''} hover:bg-slate-50 cursor-pointer`}
-                          onClick={() => setSelectedRowIndex(originalIndex)}
-                        >
-                          <td className="px-4 py-2 border-r border-slate-100">
-                            {isEditingMaterial ? (
-                              <input
-                                ref={inputRef}
-                                type="text"
-                                value={editValue}
-                                onChange={(e) => setEditValue(e.target.value)}
-                                onBlur={saveEdit}
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter') saveEdit()
-                                  if (e.key === 'Escape') cancelEdit()
-                                }}
-                                className="w-full px-2 py-1 border border-blue-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                              />
-                            ) : (
-                              <div
-                                className="min-h-[24px] cursor-text"
-                                onDoubleClick={() => startEdit(originalIndex, 'materialName')}
-                              >
-                                {row.record.materialName || (
-                                  <span className="text-slate-400 italic">双击编辑</span>
-                                )}
-                              </div>
+                        return (
+                          <TableRow
+                            key={index}
+                            className={cn(
+                              getRowClass(row),
+                              isSelected && 'ring-2 ring-primary ring-inset',
+                              'cursor-pointer'
                             )}
-                          </td>
-                          <td className="px-4 py-2">
-                            {isEditingManager ? (
-                              isAdmin ? (
-                                <select
-                                  ref={selectRef}
-                                  value={editValue}
-                                  onChange={(e) => setEditValue(e.target.value)}
-                                  onBlur={saveEdit}
-                                  onKeyDown={(e) => {
-                                    if (e.key === 'Enter') saveEdit()
-                                    if (e.key === 'Escape') cancelEdit()
-                                  }}
-                                  className="w-full px-2 py-1 border border-blue-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                >
-                                  <option value="">选择负责人</option>
-                                  {managers.map((m) => (
-                                    <option key={m} value={m}>
-                                      {m}
-                                    </option>
-                                  ))}
-                                </select>
-                              ) : (
+                            onClick={() => setSelectedRowIndex(originalIndex)}
+                          >
+                            <TableCell className="border-r border-border">
+                              {isEditingMaterial ? (
                                 <input
                                   ref={inputRef}
                                   type="text"
@@ -527,31 +499,77 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
                                     if (e.key === 'Enter') saveEdit()
                                     if (e.key === 'Escape') cancelEdit()
                                   }}
-                                  className="w-full px-2 py-1 border border-blue-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                  className="w-full px-2 py-1 border border-primary rounded focus:outline-none focus:ring-2 focus:ring-ring bg-background"
                                 />
-                              )
-                            ) : (
-                              <div
-                                className="min-h-[24px] cursor-text"
-                                onDoubleClick={() => startEdit(originalIndex, 'managerName')}
-                              >
-                                {row.record.managerName || (
-                                  <span className="text-slate-400 italic">双击编辑</span>
-                                )}
-                              </div>
-                            )}
-                          </td>
-                        </tr>
-                      )
-                    })
-                )}
-              </tbody>
-            </table>
+                              ) : (
+                                <div
+                                  className="min-h-[24px] cursor-text"
+                                  onDoubleClick={() => startEdit(originalIndex, 'materialName')}
+                                >
+                                  {row.record.materialName || (
+                                    <span className="text-muted-foreground italic">双击编辑</span>
+                                  )}
+                                </div>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isEditingManager ? (
+                                isAdmin ? (
+                                  <select
+                                    ref={selectRef}
+                                    value={editValue}
+                                    onChange={(e) => setEditValue(e.target.value)}
+                                    onBlur={saveEdit}
+                                    onKeyDown={(e) => {
+                                      if (e.key === 'Enter') saveEdit()
+                                      if (e.key === 'Escape') cancelEdit()
+                                    }}
+                                    className="w-full px-2 py-1 border border-primary rounded focus:outline-none focus:ring-2 focus:ring-ring bg-background"
+                                  >
+                                    <option value="">选择负责人</option>
+                                    {managers.map((m) => (
+                                      <option key={m} value={m}>
+                                        {m}
+                                      </option>
+                                    ))}
+                                  </select>
+                                ) : (
+                                  <input
+                                    ref={inputRef}
+                                    type="text"
+                                    value={editValue}
+                                    onChange={(e) => setEditValue(e.target.value)}
+                                    onBlur={saveEdit}
+                                    onKeyDown={(e) => {
+                                      if (e.key === 'Enter') saveEdit()
+                                      if (e.key === 'Escape') cancelEdit()
+                                    }}
+                                    className="w-full px-2 py-1 border border-primary rounded focus:outline-none focus:ring-2 focus:ring-ring bg-background"
+                                  />
+                                )
+                              ) : (
+                                <div
+                                  className="min-h-[24px] cursor-text"
+                                  onDoubleClick={() => startEdit(originalIndex, 'managerName')}
+                                >
+                                  {row.record.managerName || (
+                                    <span className="text-muted-foreground italic">双击编辑</span>
+                                  )}
+                                </div>
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        )
+                      })
+                  )}
+                </TableBody>
+              </Table>
+            </ScrollArea>
           )}
         </div>
 
         {/* Footer info */}
-        <div className="mt-3 text-xs text-slate-500 flex justify-between">
+        <div className="mt-3 text-xs text-muted-foreground flex justify-between">
           <span>
             双击单元格编辑 | Insert 新增 | Delete 删除
             {isAdmin && ' | 绿色=新增 | 黄色=已修改'}
diff --git a/src/renderer/src/components/UserSelectionDialog.tsx b/src/renderer/src/components/UserSelectionDialog.tsx
index 6b39da3..c72da51 100644
--- a/src/renderer/src/components/UserSelectionDialog.tsx
+++ b/src/renderer/src/components/UserSelectionDialog.tsx
@@ -5,10 +5,15 @@
  * - Display list of all users
  * - Allow admin to select a user
  * - Return selected user info
+ *
+ * Migrated to use shadcn/ui components
  */
 
 import React, { useState, useRef } from 'react'
 import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { ScrollArea } from './ui/shadcn/scroll-area'
+import { cn } from '@renderer/lib/utils'
 
 export interface UserInfo {
   id: number
@@ -60,8 +65,8 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
   }
 
   const userTypeStyles: Record<string, string> = {
-    Admin: 'bg-amber-50 text-amber-600',
-    User: 'bg-blue-50 text-blue-600'
+    Admin: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+    User: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
   }
 
   if (!isOpen) return null
@@ -77,19 +82,20 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
       ariaDescribedBy="user-selection-description"
     >
       <div ref={dialogRef} className="max-h-[60vh] flex flex-col">
-        <div className="text-sm text-gray-600 mb-4">当前登录：{currentUsername}</div>
+        <div className="text-sm text-muted-foreground mb-4">当前登录：{currentUsername}</div>
         <p id="user-selection-description" className="sr-only">
           从列表中选择一个用户，双击可直接确认选择
         </p>
 
-        <div className="flex-1 overflow-y-auto mb-4">
+        <ScrollArea className="flex-1 mb-4 pr-4">
           <div className="flex flex-col gap-2">
             {users.map((user) => (
               <div
                 key={user.id}
-                className={`user-item p-3 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-green-50 ${
-                  selectedUserId === user.id ? 'border-blue-500 bg-blue-50' : ''
-                }`}
+                className={cn(
+                  "user-item p-3 border rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-accent",
+                  selectedUserId === user.id ? 'border-primary bg-accent' : 'border-border'
+                )}
                 onClick={() => setSelectedUserId(user.id)}
                 onDoubleClick={() => handleDoubleClick(user)}
                 tabIndex={0}
@@ -100,40 +106,42 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
                 }}
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-gray-900">{user.username}</span>
+                  <span className="text-sm font-medium">{user.username}</span>
                   <span
-                    className={`text-xs px-2 py-1 rounded font-medium ${userTypeStyles[user.userType]}`}
+                    className={cn(
+                      "text-xs px-2 py-1 rounded font-medium",
+                      userTypeStyles[user.userType]
+                    )}
                   >
                     {user.userType}
                   </span>
                 </div>
                 {user.createTime && (
-                  <div className="mt-1 text-xs text-gray-500">
+                  <div className="mt-1 text-xs text-muted-foreground">
                     创建于：{new Date(user.createTime).toLocaleString('zh-CN')}
                   </div>
                 )}
               </div>
             ))}
           </div>
-        </div>
+        </ScrollArea>
 
-        <div className="border-t border-gray-200 pt-4">
+        <div className="border-t border-border pt-4">
           <div className="flex justify-center gap-3">
-            <button
-              className="px-6 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            <Button
               onClick={handleConfirm}
               disabled={selectedUserId === null}
             >
               确认
-            </button>
-            <button
-              className="px-6 py-2 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium transition-colors"
+            </Button>
+            <Button
+              variant="secondary"
               onClick={handleCancel}
             >
               取消
-            </button>
+            </Button>
           </div>
-          <div className="text-center text-xs text-gray-500 mt-3">双击用户可直接选择</div>
+          <div className="text-center text-xs text-muted-foreground mt-3">双击用户可直接选择</div>
         </div>
       </div>
     </Modal>
diff --git a/src/renderer/src/components/app/AuthenticatedAppShell.tsx b/src/renderer/src/components/app/AuthenticatedAppShell.tsx
index d0dce91..8ec61b1 100644
--- a/src/renderer/src/components/app/AuthenticatedAppShell.tsx
+++ b/src/renderer/src/components/app/AuthenticatedAppShell.tsx
@@ -17,6 +17,10 @@ import type {
 } from '../../../../main/types/update.types'
 import type { CurrentUser, Page } from '../../hooks/useAppBootstrap'
 import { Toast } from '../ui/Toast'
+import { ThemeSwitcher } from '../ThemeSwitcher'
+import { Button } from '../ui/shadcn/button'
+import { ScrollArea } from '../ui/shadcn/scroll-area'
+import { Separator } from '../ui/shadcn/separator'
 import CleanerPage from '../../pages/CleanerPage'
 import ExtractorPage from '../../pages/ExtractorPage'
 import SettingsPage from '../../pages/SettingsPage'
@@ -81,9 +85,9 @@ export function AuthenticatedAppShell({
         : '发现新版本'
 
   return (
-    <div className="flex flex-col h-screen bg-slate-50 text-slate-800 font-sans overflow-hidden">
+    <div className="flex flex-col h-screen bg-background text-foreground font-sans overflow-hidden">
       <header
-        className="h-16 bg-slate-900 text-slate-300 flex items-center justify-between px-4 shadow-md z-20 flex-shrink-0"
+        className="h-16 bg-slate-900 text-slate-300 dark:bg-slate-950 flex items-center justify-between px-4 shadow-md z-20 flex-shrink-0 border-b border-border"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         <div className="flex items-center gap-6">
@@ -109,22 +113,20 @@ export function AuthenticatedAppShell({
         </div>
 
         <nav
-          className="flex items-center gap-2 bg-slate-800 p-1 rounded-lg"
+          className="flex items-center gap-2 bg-slate-800 dark:bg-slate-900 p-1 rounded-lg border border-border"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
           {navItems.map((item) => (
-            <button
+            <Button
               key={item.id}
+              variant={currentPage === item.id ? 'default' : 'ghost'}
+              size="sm"
               onClick={() => onNavigate(item.id)}
-              className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
-                currentPage === item.id
-                  ? 'bg-blue-600 text-white shadow'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-700'
-              }`}
+              className="gap-2"
             >
               {item.icon}
               {item.label}
-            </button>
+            </Button>
           ))}
         </nav>
 
@@ -133,9 +135,11 @@ export function AuthenticatedAppShell({
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
           {showUpdateEntry && (
-            <button
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => void onOpenUpdateDialog()}
-              className="inline-flex items-center gap-2 rounded-full border border-blue-500/40 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-100 transition hover:bg-blue-500/20"
+              className="rounded-full border-blue-500/40 bg-blue-500/10 text-blue-100 hover:bg-blue-500/20"
               title={updateStatus?.message || '查看更新'}
             >
               {updateStatus?.phase === 'downloading' || updateStatus?.phase === 'installing' ? (
@@ -144,16 +148,16 @@ export function AuthenticatedAppShell({
                 <ArrowUpCircle size={15} />
               )}
               <span>{updateButtonLabel}</span>
-            </button>
+            </Button>
           )}
-          <div className="flex items-center gap-2 text-xs bg-slate-800 px-3 py-1.5 rounded-full border border-slate-700">
+          <div className="flex items-center gap-2 text-xs bg-slate-800 dark:bg-slate-900 px-3 py-1.5 rounded-full border border-border">
             <Database size={14} className="text-green-500" />
-            <span className="text-slate-300">数据库已连接</span>
+            <span className="text-slate-300 dark:text-slate-400">数据库已连接</span>
           </div>
-          <div className="flex items-center gap-2 bg-slate-800 px-3 py-1.5 rounded-full">
+          <div className="flex items-center gap-2 bg-slate-800 dark:bg-slate-900 px-3 py-1.5 rounded-full">
             <User size={16} className="text-slate-400" />
             <span
-              className="font-medium text-slate-200"
+              className="font-medium text-slate-200 dark:text-slate-300"
               title={`User Type: ${currentUser?.userType}`}
             >
               {currentUser?.username}
@@ -169,25 +173,29 @@ export function AuthenticatedAppShell({
               </button>
             )}
           </div>
+          <Separator orientation="vertical" className="h-6" />
+          <ThemeSwitcher />
         </div>
       </header>
 
       <div className="flex flex-1 overflow-hidden relative">
-        <main className="flex-1 overflow-hidden bg-slate-50 p-6 h-full">
-          {currentPage === 'home' && (
-            <div className="h-full overflow-auto">
-              <div className="max-w-4xl mx-auto mt-10 text-center animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <LayoutDashboard size={48} className="mx-auto text-blue-500 mb-4" />
-                <h1 className="text-3xl font-bold text-slate-800 mb-4">欢迎使用 ERP Auto</h1>
-                <p className="text-slate-500 text-lg max-w-2xl mx-auto">
-                  自动化处理 ERP 系统中的数据提取和清理任务。请使用上方导航栏选择您需要的功能模块。
-                </p>
+        <main className="flex-1 overflow-hidden bg-muted/30 p-6 h-full">
+          <ScrollArea className="h-full">
+            {currentPage === 'home' && (
+              <div className="h-full">
+                <div className="max-w-4xl mx-auto mt-10 text-center animate-in fade-in slide-in-from-bottom-4 duration-500">
+                  <LayoutDashboard size={48} className="mx-auto text-primary mb-4" />
+                  <h1 className="text-3xl font-bold mb-4">欢迎使用 ERP Auto</h1>
+                  <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+                    自动化处理 ERP 系统中的数据提取和清理任务。请使用上方导航栏选择您需要的功能模块。
+                  </p>
+                </div>
               </div>
-            </div>
-          )}
-          {currentPage === 'extractor' && <ExtractorPage />}
-          {currentPage === 'cleaner' && <CleanerPage />}
-          {currentPage === 'settings' && <SettingsPage />}
+            )}
+            {currentPage === 'extractor' && <ExtractorPage />}
+            {currentPage === 'cleaner' && <CleanerPage />}
+            {currentPage === 'settings' && <SettingsPage />}
+          </ScrollArea>
         </main>
       </div>