diff --git a/README.md b/README.md
index 14e6b05..f16b892 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 <div align="center">
 
-![](https://p.weizwz.com/nav/20251119_170634_d89c36024f0efbc4.webp)
+![](https://p.weizwz.com/nav/20251120_110028_78c15d3713752f31.webp)
 
 现代化的个人前端导航网站，为开发者提供高效、美观的资源导航体验
 
diff --git a/app/globals.css b/app/globals.css
index 00b37cc..d13c46d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -322,23 +322,6 @@ select:focus-visible {
   transition: none;
 }
 
-/* DataTable 分类行样式 */
-.category-row > td {
-  background-color: #eff6ff !important;
-}
-
-.dark .category-row > td {
-  background-color: rgba(30, 58, 138, 0.3) !important;
-}
-
-.category-row:hover > td {
-  background-color: #dbeafe !important;
-}
-
-.dark .category-row:hover > td {
-  background-color: rgba(30, 64, 175, 0.4) !important;
-}
-
 /* PWA 安装提示动画 */
 @keyframes slide-up {
   from {
diff --git a/app/manage/page.tsx b/app/manage/page.tsx
index 56c9c50..2fbe708 100644
--- a/app/manage/page.tsx
+++ b/app/manage/page.tsx
@@ -281,134 +281,136 @@ export default function ManagePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="container mx-auto p-4">
-        {/* 页头 */}
-        <header className="mb-4" role="banner">
-          <Space direction="vertical" size="small" className="w-full">
-            <div className="flex justify-between items-center">
-              {/* Logo/标题 */}
-              <div className="flex items-center gap-3 py-2">
-                <img 
-                  src="/logo.png" 
-                  alt="网站Logo" 
-                  className="w-6 h-6 object-contain"
-                />
-                <h1 className="text-lg font-bold text-gray-900 dark:text-white whitespace-nowrap">
-                  数据管理
-                </h1>
-              </div>
-              <Button
-                icon={<ArrowLeftOutlined aria-hidden="true" />}
-                onClick={handleBack}
-                type="text"
-                aria-label="返回主页"
-              >
-                返回主页
-              </Button>
-            </div>
-          </Space>
-        </header>
-
-        {/* 导入导出工具栏 */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4">
-          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
-            <div className="flex flex-wrap items-center gap-4">
-              <ImportExport />
-              <span className="text-sm text-gray-600 dark:text-gray-400">
-                已选择 {selectedRowKeys.length} 项
-              </span>
+    <div className="h-screen flex flex-col bg-(--background) transition-theme">
+      {/* 页头 */}
+      <header className="flex-none w-full bg-(--background-main) border-b border-gray-200 dark:border-neutral-700 transition-theme" role="banner">
+        <div className="container mx-auto px-4 py-3 sm:px-8 ">
+          <div className="flex justify-between items-center">
+            {/* Logo/标题 */}
+            <div className="flex items-center gap-3 py-2">
+              <img 
+                src="/logo.png" 
+                alt="网站Logo" 
+                className="w-5 h-5 object-contain"
+              />
+              <h1 className="text-base font-bold text-gray-800 dark:text-white whitespace-nowrap">
+                数据管理
+              </h1>
             </div>
-            <div className='flex flex-wrap gap-2 lg:gap-4'>
-              <Button
-                danger
-                icon={<ReloadOutlined aria-hidden="true" />}
-                onClick={handleResetClick}
-                aria-label="重置数据"
-              >
-                <span className="hidden md:inline">重置数据</span>
-              </Button>
-              <Popconfirm
-                title={`确定要删除选中的 ${selectedRowKeys.length} 个链接吗？`}
-                onConfirm={handleBatchDelete}
-                okText="确定"
-                cancelText="取消"
-                disabled={selectedRowKeys.length === 0}
-              >
-                <Button 
+            <Button
+              icon={<ArrowLeftOutlined aria-hidden="true" />}
+              onClick={handleBack}
+              type="text"
+              aria-label="返回主页"
+            >
+              返回主页
+            </Button>
+          </div>
+        </div>
+      </header>
+      {/* 数据表格 */}
+      <div className='flex-1 overflow-y-auto'>
+        <div className="container flex flex-col mx-auto p-4 sm:px-8">
+          {/* 导入导出工具栏 */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4">
+            <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+              <div className="flex flex-wrap items-center gap-4">
+                <ImportExport />
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  已选择 {selectedRowKeys.length} 项
+                </span>
+              </div>
+              <div className='flex flex-wrap gap-2 lg:gap-4'>
+                <Button
                   danger
-                  icon={<DeleteOutlined aria-hidden="true" />}
-                  onClick={handleBatchDeleteClick}
-                  aria-label={selectedRowKeys.length > 0 ? `批量删除选中的 ${selectedRowKeys.length} 个链接` : '批量删除'}
+                  icon={<ReloadOutlined aria-hidden="true" />}
+                  onClick={handleResetClick}
+                  aria-label="重置数据"
                 >
-                  <span className="hidden md:inline">批量删除</span>
+                  <span className="hidden md:inline">重置数据</span>
                 </Button>
-              </Popconfirm>
-              <Button
-                icon={<TagsOutlined aria-hidden="true" />}
-                onClick={handleBatchCategoryClick}
-                aria-label={selectedRowKeys.length > 0 ? `批量分类选中的 ${selectedRowKeys.length} 个链接` : '批量分类'}
-              >
-                <span className="hidden md:inline">批量分类</span>
-              </Button>
-              <Button
-                type="primary"
-                icon={<PlusOutlined aria-hidden="true" />}
-                onClick={handleAddNew}
-                aria-label="添加新链接"
-              >
-                <span className="hidden sm:inline">添加链接</span>
-              </Button>
+                <Popconfirm
+                  title={`确定要删除选中的 ${selectedRowKeys.length} 个链接吗？`}
+                  onConfirm={handleBatchDelete}
+                  okText="确定"
+                  cancelText="取消"
+                  disabled={selectedRowKeys.length === 0}
+                >
+                  <Button 
+                    danger
+                    icon={<DeleteOutlined aria-hidden="true" />}
+                    onClick={handleBatchDeleteClick}
+                    aria-label={selectedRowKeys.length > 0 ? `批量删除选中的 ${selectedRowKeys.length} 个链接` : '批量删除'}
+                  >
+                    <span className="hidden md:inline">批量删除</span>
+                  </Button>
+                </Popconfirm>
+                <Button
+                  icon={<TagsOutlined aria-hidden="true" />}
+                  onClick={handleBatchCategoryClick}
+                  aria-label={selectedRowKeys.length > 0 ? `批量分类选中的 ${selectedRowKeys.length} 个链接` : '批量分类'}
+                >
+                  <span className="hidden md:inline">批量分类</span>
+                </Button>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined aria-hidden="true" />}
+                  onClick={handleAddNew}
+                  aria-label="添加新链接"
+                >
+                  <span className="hidden sm:inline">添加链接</span>
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* 数据表格 */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm px-4 pt-4">
-          <DataTable
-            links={links}
-            onEdit={handleEdit}
-            onDelete={handleDelete}
-            onEditCategory={handleEditCategory}
-            onDeleteCategory={handleDeleteCategory}
-            selectedRowKeys={selectedRowKeys}
-            onSelectionChange={setSelectedRowKeys}
+          {/* 数据表格 */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm px-4 pt-4 mb-4">
+            <DataTable
+              links={links}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              onEditCategory={handleEditCategory}
+              onDeleteCategory={handleDeleteCategory}
+              selectedRowKeys={selectedRowKeys}
+              onSelectionChange={setSelectedRowKeys}
+            />
+          </div>
+
+          {/* 编辑链接弹窗 */}
+          <EditLinkModal
+            open={editModalOpen}
+            link={currentLink}
+            onCancel={handleModalCancel}
+            onSubmit={handleModalSubmit}
+          />
+
+          {/* 编辑分类弹窗 */}
+          <EditCategoryModal
+            open={categoryEditModalOpen}
+            category={currentCategory}
+            onCancel={() => {
+              setCategoryEditModalOpen(false);
+              setCurrentCategory(null);
+            }}
+            onSubmit={handleCategorySubmit}
+          />
+
+          {/* 重置数据确认对话框 */}
+          <ResetDataModal
+            open={resetModalOpen}
+            onConfirm={handleResetConfirm}
+            onCancel={handleResetCancel}
           />
-        </div>
 
-        {/* 编辑链接弹窗 */}
-        <EditLinkModal
-          open={editModalOpen}
-          link={currentLink}
-          onCancel={handleModalCancel}
-          onSubmit={handleModalSubmit}
-        />
-
-        {/* 编辑分类弹窗 */}
-        <EditCategoryModal
-          open={categoryEditModalOpen}
-          category={currentCategory}
-          onCancel={() => {
-            setCategoryEditModalOpen(false);
-            setCurrentCategory(null);
-          }}
-          onSubmit={handleCategorySubmit}
-        />
-
-        {/* 重置数据确认对话框 */}
-        <ResetDataModal
-          open={resetModalOpen}
-          onConfirm={handleResetConfirm}
-          onCancel={handleResetCancel}
-        />
-
-        {/* 批量分类弹窗 */}
-        <BatchCategoryModal
-          open={batchCategoryModalOpen}
-          selectedCount={selectedRowKeys.length}
-          onCancel={() => setBatchCategoryModalOpen(false)}
-          onSubmit={handleBatchCategorySubmit}
-        />
+          {/* 批量分类弹窗 */}
+          <BatchCategoryModal
+            open={batchCategoryModalOpen}
+            selectedCount={selectedRowKeys.length}
+            onCancel={() => setBatchCategoryModalOpen(false)}
+            onSubmit={handleBatchCategorySubmit}
+          />
+      </div>
       </div>
     </div>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 6a7d883..872d65e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -146,7 +146,7 @@ export default function Home() {
   );
 
   return (
-    <div className="h-screen flex flex-col bg-gray-50 dark:bg-(--background) transition-theme overflow-hidden">
+    <div className="h-screen flex flex-col bg-(--background) transition-theme overflow-hidden">
       {/* 固定顶部 Header */}
       <div className="flex-none">
         <Header onMenuClick={() => setDrawerOpen(true)} />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index c82b8d1..1d233d6 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -3,7 +3,7 @@
 import React, { memo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button, Tooltip } from 'antd';
-import { EditOutlined, MenuOutlined, GithubOutlined } from '@ant-design/icons';
+import { MenuOutlined, GithubOutlined, SettingOutlined } from '@ant-design/icons';
 import SearchBar from './SearchBar';
 import ThemeToggle from './ThemeToggle';
 
@@ -37,7 +37,7 @@ const Header = memo(function Header({ onMenuClick }: HeaderProps) {
       className="w-full bg-(--background-main) border-b border-gray-200 dark:border-neutral-700 transition-theme"
       role="banner"
     >
-      <div className="container mx-auto p-4">
+      <div className="container mx-auto px-4 py-3 sm:px-8">
         {/* Desktop 布局 */}
         <div className="hidden md:flex items-center justify-between gap-6">
           {/* Logo/标题 */}
@@ -45,9 +45,9 @@ const Header = memo(function Header({ onMenuClick }: HeaderProps) {
             <img 
               src="/logo.png" 
               alt="网站Logo" 
-              className="w-6 h-6 object-contain"
+              className="w-5 h-5 object-contain"
             />
-            <h1 className="text-lg font-bold text-gray-900 dark:text-white whitespace-nowrap">
+            <h1 className="text-base font-bold text-gray-800 dark:text-white whitespace-nowrap">
               唯知导航
             </h1>
           </div>
@@ -58,70 +58,58 @@ const Header = memo(function Header({ onMenuClick }: HeaderProps) {
           </div>
 
           {/* 右侧工具栏 */}
-          <div className="shrink-0 flex items-center gap-2" role="toolbar" aria-label="工具栏">
+          <div className="shrink-0 flex items-center" role="toolbar" aria-label="工具栏">
             <ThemeToggle />
             <Tooltip title="数据管理" placement="bottom">
               <Button
                 type="text"
-                icon={<EditOutlined aria-hidden="true" />}
+                icon={<SettingOutlined aria-hidden="true" />}
+                size='large'
                 onClick={handleManageClick}
                 aria-label="打开数据管理页面"
                 title="数据管理"
                 className="flex items-center justify-center"
-                style={{
-                  fontSize: '18px',
-                  width: '40px',
-                  height: '40px',
-                }}
               />
             </Tooltip>
             <Tooltip title="GitHub 项目地址" placement="bottom">
               <Button
                 type="text"
                 icon={<GithubOutlined aria-hidden="true" />}
+                size='large'
                 onClick={() => window.open('https://github.com/weizwz/weiz-nav', '_blank', 'noopener,noreferrer')}
                 aria-label="访问 GitHub 项目地址"
                 title="GitHub"
                 className="flex items-center justify-center"
-                style={{
-                  fontSize: '18px',
-                  width: '40px',
-                  height: '40px',
-                }}
               />
             </Tooltip>
           </div>
         </div>
 
         {/* Mobile 布局 */}
-        <div className="md:hidden space-y-4">
+        <div className="md:hidden space-y-1">
           {/* 顶部行：标题和工具栏 */}
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <img 
                 src="/logo.png" 
                 alt="网站Logo" 
-                className="w-7 h-7 object-contain"
+                className="w-5 h-5 object-contain"
               />
-              <h1 className="text-lg font-bold text-gray-900 dark:text-white">
+              <h1 className="text-base font-bold text-gray-800 dark:text-white whitespace-nowrap">
                 唯知导航
               </h1>
             </div>
-            <div className="flex items-center gap-2" role="toolbar" aria-label="工具栏">
+            <div className="flex items-center" role="toolbar" aria-label="工具栏">
               {onMenuClick && (
                 <Tooltip title="分类菜单" placement="bottom">
                   <Button
                     type="text"
                     icon={<MenuOutlined aria-hidden="true" />}
+                    size='large'
                     onClick={onMenuClick}
                     aria-label="打开分类菜单"
                     title="分类菜单"
                     className="flex items-center justify-center lg:hidden"
-                    style={{
-                      fontSize: '18px',
-                      width: '40px',
-                      height: '40px',
-                    }}
                   />
                 </Tooltip>
               )}
@@ -129,38 +117,30 @@ const Header = memo(function Header({ onMenuClick }: HeaderProps) {
               <Tooltip title="数据管理" placement="bottom">
                 <Button
                   type="text"
-                  icon={<EditOutlined aria-hidden="true" />}
+                  icon={<SettingOutlined aria-hidden="true" />}
+                  size='large'
                   onClick={handleManageClick}
                   aria-label="打开数据管理页面"
                   title="数据管理"
                   className="flex items-center justify-center"
-                  style={{
-                    fontSize: '18px',
-                    width: '40px',
-                    height: '40px',
-                  }}
                 />
               </Tooltip>
               <Tooltip title="GitHub 项目地址" placement="bottom">
                 <Button
                   type="text"
                   icon={<GithubOutlined aria-hidden="true" />}
+                  size='large'
                   onClick={() => window.open('https://github.com/weizwz/weiz-nav', '_blank', 'noopener,noreferrer')}
                   aria-label="访问 GitHub 项目地址"
                   title="GitHub"
                   className="flex items-center justify-center"
-                  style={{
-                    fontSize: '18px',
-                    width: '40px',
-                    height: '40px',
-                  }}
                 />
               </Tooltip>
             </div>
           </div>
 
           {/* 搜索栏 - 全宽 */}
-          <div className="w-full">
+          <div className="w-full pb-2">
             <SearchBar />
           </div>
         </div>
diff --git a/components/layout/SearchBar.tsx b/components/layout/SearchBar.tsx
index ab4df92..8e453a9 100644
--- a/components/layout/SearchBar.tsx
+++ b/components/layout/SearchBar.tsx
@@ -157,8 +157,8 @@ export default function SearchBar() {
   return (
     <div className="w-full max-w-2xl" role="search" aria-label="搜索导航">
       <Input
-        size="large"
         placeholder="搜索"
+        variant="filled"
         value={inputValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyPress}
@@ -166,7 +166,7 @@ export default function SearchBar() {
         prefix={
           <Dropdown menu={{ items: menuItems }} trigger={['click']} placement="bottomLeft">
             <div 
-              className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity pr-2"
+              className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity pr-1"
               aria-label={`当前搜索引擎：${currentEngine.name}，点击切换搜索引擎`}
               role="button"
               tabIndex={0}
@@ -181,11 +181,7 @@ export default function SearchBar() {
             </div>
           </Dropdown>
         }
-        className="search-bar-modern"
-        style={{
-          borderRadius: '24px',
-          paddingLeft: '12px',
-        }}
+        className="search-bar-modern bg-(--background)! pl-3! shadow-none!"
         aria-label="搜索输入框"
         role="searchbox"
         aria-describedby="search-description"
diff --git a/components/layout/ThemeToggle.tsx b/components/layout/ThemeToggle.tsx
index d3988e9..fb29e0b 100644
--- a/components/layout/ThemeToggle.tsx
+++ b/components/layout/ThemeToggle.tsx
@@ -76,16 +76,12 @@ export default function ThemeToggle() {
       <Button
         type="text"
         icon={isDark ? <SunOutlined aria-hidden="true" /> : <MoonOutlined aria-hidden="true" />}
+        size='large'
         onClick={toggleTheme}
         className="transition-theme flex items-center justify-center"
         aria-label={getTooltipTitle()}
         role="switch"
         aria-checked={isDark}
-        style={{
-          fontSize: '18px',
-          width: '40px',
-          height: '40px',
-        }}
       />
     </Tooltip>
   );
diff --git a/components/management/DataTable.tsx b/components/management/DataTable.tsx
index cc92a15..af93b33 100644
--- a/components/management/DataTable.tsx
+++ b/components/management/DataTable.tsx
@@ -59,18 +59,19 @@ export const DataTable: React.FC<DataTableProps> = ({
   const categories = useAppSelector((state) => state.categories.items);
 
   // 使用外部传入的 selectedRowKeys 或内部状态
-  const selectedRowKeys = externalSelectedRowKeys !== undefined ? externalSelectedRowKeys : internalSelectedRowKeys;
+  const selectedRowKeys =
+    externalSelectedRowKeys !== undefined ? externalSelectedRowKeys : internalSelectedRowKeys;
 
   // 构建树形数据结构
   const treeData = useMemo(() => {
     const tree: TreeNode[] = [];
 
     // 按分类组织链接
-    categories.forEach(category => {
+    categories.forEach((category) => {
       const categoryLinks = links
-        .filter(link => link.category === category.name)
+        .filter((link) => link.category === category.name)
         .sort((a, b) => a.order - b.order)
-        .map(link => ({
+        .map((link) => ({
           key: link.id,
           id: link.id,
           name: link.name,
@@ -101,9 +102,9 @@ export const DataTable: React.FC<DataTableProps> = ({
 
     // 添加未分类节点（如果有未分类的链接）
     const uncategorizedLinks = links
-      .filter(link => !link.category || link.category === '')
+      .filter((link) => !link.category || link.category === '')
       .sort((a, b) => a.order - b.order)
-      .map(link => ({
+      .map((link) => ({
         key: link.id,
         id: link.id,
         name: link.name,
@@ -136,16 +137,13 @@ export const DataTable: React.FC<DataTableProps> = ({
     return tree.sort((a, b) => a.order - b.order);
   }, [links, categories]);
 
-  // 默认展开所有分类（包括未分类）
+  // 默认展开第一个分类
   useEffect(() => {
-    const allCategoryKeys = categories.map(cat => `category-${cat.id}`);
-    // 如果有未分类链接，也展开未分类节点
-    const hasUncategorized = links.some(link => !link.category || link.category === '');
-    if (hasUncategorized) {
-      allCategoryKeys.push('category-uncategorized');
+    if (categories.length > 0) {
+      const firstCategoryKey = `category-${categories[0].id}`;
+      setExpandedRowKeys([firstCategoryKey]);
     }
-    setExpandedRowKeys(allCategoryKeys);
-  }, [categories, links]);
+  }, [categories]);
 
   // 表格列定义
   const columns: ColumnsType<TreeNode> = [
@@ -153,25 +151,48 @@ export const DataTable: React.FC<DataTableProps> = ({
       title: '名称',
       dataIndex: 'name',
       key: 'name',
-      width: 160,
+      width: 120,
       ellipsis: true,
-      render: (name: string, record: TreeNode) => (
-        <span className={record.isCategory ? 'font-semibold text-base' : ''}>
-          {name}
-        </span>
-      ),
+      render: (name: string, record: TreeNode) =>
+        record.isCategory ? (
+          <span className="font-semibold">{name}</span>
+        ) : record.icon ? (
+          <div className="flex items-center">
+            <div
+              className="w-6 h-6 rounded border border-gray-300 flex justify-center items-center mr-2"
+              style={{ background: record.backgroundColor }}
+            >
+              <img
+                src={record.icon}
+                alt="图标"
+                className="w-4 h-4 object-contain"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                }}
+              />
+            </div>
+            <span> {name} </span>
+          </div>
+        ) : (
+          <span> {name} </span>
+        ),
     },
     {
       title: '地址',
       dataIndex: 'url',
       key: 'url',
-      width: 200,
+      width: 180,
       ellipsis: true,
-      render: (url: string, record: TreeNode) => 
+      render: (url: string, record: TreeNode) =>
         record.isCategory ? (
           <span className="text-gray-400">-</span>
         ) : url ? (
-          <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700">
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-700"
+          >
             {url}
           </a>
         ) : null,
@@ -180,9 +201,9 @@ export const DataTable: React.FC<DataTableProps> = ({
       title: '描述',
       dataIndex: 'description',
       key: 'description',
-      width: 300,
+      width: 240,
       ellipsis: true,
-      render: (description: string, record: TreeNode) => 
+      render: (description: string, record: TreeNode) =>
         record.isCategory ? (
           <span className="text-gray-500">共 {record.children?.length || 0} 条链接</span>
         ) : (
@@ -190,11 +211,11 @@ export const DataTable: React.FC<DataTableProps> = ({
         ),
     },
     {
-      title: '背景颜色',
+      title: '背景',
       dataIndex: 'backgroundColor',
       key: 'backgroundColor',
       width: 100,
-      render: (color: string, record: TreeNode) => 
+      render: (color: string, record: TreeNode) =>
         record.isCategory ? (
           <span className="text-gray-400">-</span>
         ) : (
@@ -203,14 +224,14 @@ export const DataTable: React.FC<DataTableProps> = ({
               className="w-6 h-6 rounded border border-gray-300"
               style={{ backgroundColor: color || '#d9d9d9' }}
             />
-            <span className="text-xs text-gray-500">{color || '#d9d9d9'}</span>
+            <span className="text-xs text-gray-500 dark:text-gray-200">{color || '#d9d9d9'}</span>
           </div>
         ),
     },
     {
       title: '操作',
       key: 'action',
-      width: 150,
+      width: 120,
       fixed: 'right',
       render: (_, record: TreeNode) => {
         if (record.isCategory) {
@@ -218,7 +239,7 @@ export const DataTable: React.FC<DataTableProps> = ({
           if (record.id === 'uncategorized') {
             return <span className="text-gray-400">-</span>;
           }
-          
+
           // 分类节点的操作
           const category: Category = {
             id: record.id,
@@ -228,7 +249,7 @@ export const DataTable: React.FC<DataTableProps> = ({
             createdAt: record.createdAt,
             updatedAt: record.updatedAt,
           };
-          
+
           return (
             <Space size="small">
               <Button
@@ -250,19 +271,14 @@ export const DataTable: React.FC<DataTableProps> = ({
                 cancelText="取消"
                 okType="danger"
               >
-                <Button
-                  type="link"
-                  danger
-                  icon={<DeleteOutlined />}
-                  size="small"
-                >
+                <Button type="link" danger icon={<DeleteOutlined />} size="small">
                   删除
                 </Button>
               </Popconfirm>
             </Space>
           );
         }
-        
+
         // 链接节点的操作
         return (
           <Space size="small">
@@ -280,12 +296,7 @@ export const DataTable: React.FC<DataTableProps> = ({
               okText="确定"
               cancelText="取消"
             >
-              <Button
-                type="link"
-                danger
-                icon={<DeleteOutlined />}
-                size="small"
-              >
+              <Button type="link" danger icon={<DeleteOutlined />} size="small">
                 删除
               </Button>
             </Popconfirm>
@@ -300,7 +311,7 @@ export const DataTable: React.FC<DataTableProps> = ({
     selectedRowKeys,
     onChange: (newSelectedRowKeys: React.Key[]) => {
       // 过滤掉分类节点
-      const linkKeys = newSelectedRowKeys.filter(key => !String(key).startsWith('category-'));
+      const linkKeys = newSelectedRowKeys.filter((key) => !String(key).startsWith('category-'));
       if (onSelectionChange) {
         onSelectionChange(linkKeys);
       } else {
@@ -321,15 +332,12 @@ export const DataTable: React.FC<DataTableProps> = ({
         rowKey="key"
         size="middle"
         rowSelection={rowSelection}
-        rowClassName={(record) => 
-          record.isCategory 
-            ? 'category-row' 
-            : ''
-        }
+        rowClassName={(record) => (record.isCategory ? 'category-row' : '')}
         expandable={{
           expandedRowKeys,
+          indentSize: 0,
           onExpandedRowsChange: (keys) => setExpandedRowKeys([...keys]),
-          defaultExpandAllRows: true,
+          // defaultExpandAllRows: true,
         }}
         pagination={{
           current: currentPage,
@@ -347,7 +355,6 @@ export const DataTable: React.FC<DataTableProps> = ({
           pageSizeOptions: ['10', '20', '50', '100'],
         }}
         scroll={{ x: 1200 }}
-        className="[&_.ant-empty]:z-0 [&_.category-row>td]:bg-blue-50! [&_.category-row>td]:dark:bg-blue-900/30! [&_.category-row:hover>td]:bg-blue-100! [&_.category-row:hover>td]:dark:bg-blue-800/40!"
       />
     </div>
   );
diff --git a/components/modals/EditLinkModal.tsx b/components/modals/EditLinkModal.tsx
index 1825319..3066bf1 100644
--- a/components/modals/EditLinkModal.tsx
+++ b/components/modals/EditLinkModal.tsx
@@ -367,7 +367,34 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
         </Form.Item>
 
         <Row gutter={16}>
-          <Col span={12}>
+          <Col xs={24} sm={12}>
+            <Form.Item label="背景">
+              <Space.Compact>
+                <Form.Item name="backgroundColor" noStyle>
+                  <ColorPicker
+                    presets={[
+                      {
+                        label: '预设颜色',
+                        colors: PRESET_COLORS,
+                      },
+                    ]}
+                    showText
+                    format="hex"
+                    onChange={handleBgColorChange}
+                  />
+                </Form.Item>
+                {supportsEyeDropper && (
+                  <Button
+                    icon={<BgColorsOutlined />}
+                    onClick={handleEyeDropper}
+                    title="使用吸管工具选择颜色"
+                  />
+                )}
+              </Space.Compact>
+            </Form.Item>
+          </Col>
+          
+          <Col xs={24} sm={12}>
             <Form.Item label="预览">
               <div className="flex items-center gap-3">
                 {/* 预览卡片 */}
@@ -426,33 +453,6 @@ export const EditLinkModal: React.FC<EditLinkModalProps> = ({
               </div>
             </Form.Item>
           </Col>
-          
-          <Col span={12}>
-            <Form.Item label="背景">
-              <Space.Compact>
-                <Form.Item name="backgroundColor" noStyle>
-                  <ColorPicker
-                    presets={[
-                      {
-                        label: '预设颜色',
-                        colors: PRESET_COLORS,
-                      },
-                    ]}
-                    showText
-                    format="hex"
-                    onChange={handleBgColorChange}
-                  />
-                </Form.Item>
-                {supportsEyeDropper && (
-                  <Button
-                    icon={<BgColorsOutlined />}
-                    onClick={handleEyeDropper}
-                    title="使用吸管工具选择颜色"
-                  />
-                )}
-              </Space.Compact>
-            </Form.Item>
-          </Col>
         </Row>
 
         <Form.Item name="iconScale" hidden>
diff --git a/components/navigation/LinkGrid.tsx b/components/navigation/LinkGrid.tsx
index 39a69e7..c461297 100644
--- a/components/navigation/LinkGrid.tsx
+++ b/components/navigation/LinkGrid.tsx
@@ -160,7 +160,7 @@ const LinkGridBase: React.FC<LinkGridProps> = ({
         disabled={!isDraggingEnabled}
       >
         <div 
-          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 p-8 max-w-full ${className || ''}`}
+          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-x-8 gap-y-6 p-4 sm:p-8 md:px-10 max-w-full ${className || ''}`}
           style={{ ...style, width: '100%', boxSizing: 'border-box' }}
           role="region"
           aria-label={searchQuery.trim() ? `搜索结果：${displayedLinks.length} 个链接` : `${currentCategory}分类：${displayedLinks.length} 个链接`}