diff --git a/src/components/CategorySection.astro b/src/components/CategorySection.astro
new file mode 100644
index 0000000..eb089ab
--- /dev/null
+++ b/src/components/CategorySection.astro
@@ -0,0 +1,39 @@
+---
+import ToolSection from './ToolSection.astro'
+
+interface Props {
+  title: string
+  categories: {
+    title: string
+    sections: {
+      [key: string]: {
+        title: string
+        tools: {
+          name: string
+          description: string
+          href?: string
+          iconPath?: string
+        }[]
+      }
+    }
+  }[]
+}
+
+const { title, categories } = Astro.props
+---
+
+<div>
+  <h2 class='mb-6 text-xl font-bold'>{title}</h2>
+  {
+    categories.map((category) => (
+      <div class='mb-8'>
+        <h3 class='mb-4 text-lg font-semibold'>{category.title}</h3>
+        {Object.values(category.sections).map((section) => (
+          <div class='mb-6'>
+            <ToolSection title={section.title} tools={section.tools} />
+          </div>
+        ))}
+      </div>
+    ))
+  }
+</div>
diff --git a/src/components/ToolSection.astro b/src/components/ToolSection.astro
index c287a2a..0a41a7f 100644
--- a/src/components/ToolSection.astro
+++ b/src/components/ToolSection.astro
@@ -10,10 +10,31 @@ interface Props {
 		description: string
 		href?: string
 		iconPath?: string
-		iconBgColour: string
+		iconBgColour?: string
+		customIcon?: string
 	}[]
 }
+
 const { class: className, title, tools, ...props } = Astro.props
+
+const DefaultIcon = `<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-muted">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24">
+		<path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8s8 3.589 8 8s-3.589 8-8 8" />
+	</svg>
+</div>`
+
+const IconComponent = (iconPath: string) => {
+  // If it's a local SVG icon (doesn't start with a namespace like 'ph:')
+  if (!iconPath.includes(':')) {
+    return `<div class="z-20 h-10 w-10 rounded-lg bg-muted p-2">
+      <img src="/src/icons/${iconPath}.svg" class="h-full w-full" alt="" />
+    </div>`
+  }
+  // For icon component icons (like Phosphor icons)
+  return `<div class="z-20 h-10 w-10 rounded-lg bg-muted p-2">
+    <Icon name="${iconPath}" class="h-full w-full" />
+  </div>`
+}
 ---
 
 <div
@@ -27,21 +48,49 @@ const { class: className, title, tools, ...props } = Astro.props
 	<div class='grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-2 sm:gap-y-4'>
 		{
 			tools.map((tool) => (
-				<a
-					class='group relative hover:bg-transparent '
-					href={tool.href}
-					id={tool.name}
-					target='_blank'
-				>
-					<div class='relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all'>
-						<div class='absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50' />
-						<Icon name={tool.iconPath ?? 'tool'} class='z-20 h-10 w-10 rounded-lg bg-muted p-2' />
-						<div class='z-20 flex flex-col'>
-							<h3 class='font-medium'>{tool.name}</h3>
-							<p class='text-muted-foreground'>{tool.description}</p>
+				<div class={cn(
+					'group relative hover:bg-transparent',
+					tool.href ? 'cursor-pointer' : 'cursor-default'
+				)}>
+					{tool.href ? (
+						<a
+							href={tool.href}
+							target='_blank'
+							rel="noopener noreferrer"
+							class="block"
+						>
+							<div class='relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all'>
+								<div class='absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50' />
+								{tool.customIcon ? (
+									<div class="z-20 h-10 w-10 rounded-lg bg-muted p-2" set:html={tool.customIcon} />
+								) : tool.iconPath ? (
+									<div class="z-20" set:html={IconComponent(tool.iconPath)} />
+								) : (
+									<div class="z-20" set:html={DefaultIcon} />
+								)}
+								<div class='z-20 flex flex-col'>
+									<h3 class='font-medium'>{tool.name}</h3>
+									<p class='text-muted-foreground'>{tool.description}</p>
+								</div>
+							</div>
+						</a>
+					) : (
+						<div class='relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all'>
+							<div class='absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50' />
+							{tool.customIcon ? (
+								<div class="z-20 h-10 w-10 rounded-lg bg-muted p-2" set:html={tool.customIcon} />
+							) : tool.iconPath ? (
+								<div class="z-20" set:html={IconComponent(tool.iconPath)} />
+							) : (
+								<div class="z-20" set:html={DefaultIcon} />
+							)}
+							<div class='z-20 flex flex-col'>
+								<h3 class='font-medium'>{tool.name}</h3>
+								<p class='text-muted-foreground'>{tool.description}</p>
+							</div>
 						</div>
-					</div>
-				</a>
+					)}
+				</div>
 			))
 		}
 	</div>
diff --git a/src/content/post/软件/个人工具与设备清单.md b/src/content/post/软件/个人工具与设备清单.md
index 5142209..536c1d2 100644
--- a/src/content/post/软件/个人工具与设备清单.md
+++ b/src/content/post/软件/个人工具与设备清单.md
@@ -23,6 +23,7 @@ category: 软件
 #### 1.1.1 IDE 与编辑器
 
 - WindSurf
+- Cursor
 - VSCode
 - JetBrains 全家桶
 
diff --git a/src/pages/tools/index.astro b/src/pages/tools/index.astro
index 1a36784..b5fcd2e 100644
--- a/src/pages/tools/index.astro
+++ b/src/pages/tools/index.astro
@@ -1,130 +1,418 @@
 ---
 import PageLayout from '@/layouts/BaseLayout.astro'
-import ToolSection from '@/components/ToolSection.astro'
+import CategorySection from '@/components/CategorySection.astro'
 import Button from '@/components/Button.astro'
 import GiscusComment from '@/components/GiscusComment'
 
-const DESIGN = [
-	{
-		name: 'Figma',
-		description: 'Design Tool',
-		href: 'https://www.figma.com/',
-		iconPath: 'figma',
-		iconBgColour: '#000001'
-	},
-	{
-		name: 'Canva',
-		description: 'Design Tool',
-		href: 'https://www.canva.com/',
-		iconPath: 'canva',
-		iconBgColour: '#000001'
-	},
-	{
-		name: '剪映',
-		description: '视频剪辑',
-		href: 'https://www.capcut.cn/',
-		iconPath: 'tiktok',
-		iconBgColour: '#000001'
-	}
-]
+const SOFTWARE_TOOLS = {
+  development: {
+    title: 'Development',
+    sections: {
+      ide: {
+        title: 'IDE & Editors',
+        tools: [
+          {
+            name: 'WindSurf',
+            description: 'AI-Powered IDE',
+            href: 'https://cursor.sh/',
+          },
+          {
+            name: 'Cursor',
+            description: 'AI-Powered Code Editor',
+            href: 'https://cursor.sh/',
+            iconPath: 'cursor'
+          },
+          {
+            name: 'VS Code',
+            description: 'Code Editor',
+            href: 'https://code.visualstudio.com/',
+            iconPath: 'vscode'
+          },
+          {
+            name: 'JetBrains Suite',
+            description: 'Professional IDEs',
+            href: 'https://www.jetbrains.com/'
+          }
+        ]
+      }
+    }
+  },
+  design: {
+    title: 'Design & Creative',
+    sections: {
+      design: {
+        title: 'Design Software',
+        tools: [
+          {
+            name: 'Figma',
+            description: 'Design Tool',
+            href: 'https://www.figma.com/',
+            iconPath: 'figma'
+          },
+          {
+            name: 'Canva',
+            description: 'Design Tool',
+            href: 'https://www.canva.com/',
+            iconPath: 'canva'
+          }
+        ]
+      },
+      recording: {
+        title: 'Screen Recording & Screenshots',
+        tools: [
+          {
+            name: 'CleanShot X',
+            description: 'Screenshot & Recording',
+            href: 'https://cleanshot.com/'
+          },
+          {
+            name: 'OBS Studio',
+            description: 'Streaming & Recording',
+            href: 'https://obsproject.com/'
+          },
+          {
+            name: 'Picsew',
+            description: 'Screenshot Tool',
+            href: 'https://apps.apple.com/app/picsew-screenshot-stitching/id1208145167'
+          },
+          {
+            name: 'Shotr',
+            description: 'Screenshot Tool',
+            href: 'https://shotr.app/'
+          },
+          {
+            name: 'QuickRecorder',
+            description: 'Screen Recording',
+            href: '#'
+          }
+        ]
+      }
+    }
+  },
+  productivity: {
+    title: 'Productivity',
+    sections: {
+      browser: {
+        title: 'Browsers',
+        tools: [
+          {
+            name: 'Arc Browser',
+            description: 'Modern Browser',
+            href: 'https://arc.net/',
+            iconPath: 'arc'
+          },
+          {
+            name: 'Google Chrome',
+            description: 'Web Browser',
+            href: 'https://www.google.com/chrome/'
+          },
+          {
+            name: 'Microsoft Edge',
+            description: 'Web Browser',
+            href: 'https://www.microsoft.com/edge'
+          }
+        ]
+      },
+      notes: {
+        title: 'Note Taking',
+        tools: [
+          {
+            name: 'Obsidian',
+            description: 'Note Taking',
+            href: 'https://obsidian.md/',
+            iconPath: 'obsidian'
+          },
+          {
+            name: 'Notion',
+            description: 'Note Taking',
+            href: 'https://notion.so/',
+            iconPath: 'notion'
+          },
+          {
+            name: 'Flomo',
+            description: 'Quick Notes',
+            href: 'https://flomoapp.com/'
+          }
+        ]
+      },
+      tools: {
+        title: 'Productivity Tools',
+        tools: [
+          {
+            name: '1Password',
+            description: 'Password Manager',
+            href: 'https://1password.com/'
+          },
+          {
+            name: 'Raindrop.io',
+            description: 'Bookmark Manager',
+            href: 'https://raindrop.io/'
+          },
+          {
+            name: 'n8n',
+            description: 'Workflow Automation',
+            href: 'https://n8n.io/'
+          },
+          {
+            name: 'Follow',
+            description: 'RSS Reader',
+            href: '#'
+          },
+          {
+            name: '滴答清单',
+            description: 'Task Management',
+            href: 'https://dida365.com/'
+          }
+        ]
+      }
+    }
+  },
+  ai: {
+    title: 'AI Tools',
+    sections: {
+      assistants: {
+        title: 'AI Assistants',
+        tools: [
+          {
+            name: 'ChatGPT',
+            description: 'AI Assistant',
+            href: 'https://chat.openai.com/',
+            iconPath: 'chatgpt'
+          },
+          {
+            name: 'Claude',
+            description: 'AI Assistant',
+            href: 'https://claude.ai/'
+          },
+          {
+            name: 'Poe',
+            description: 'AI Platform',
+            href: 'https://poe.com/'
+          },
+          {
+            name: 'Google Notebook LLM',
+            description: 'AI Assistant',
+            href: 'https://notebooklm.google.com/'
+          }
+        ]
+      }
+    }
+  },
+  media: {
+    title: 'Media & Entertainment',
+    sections: {
+      music: {
+        title: 'Music',
+        tools: [
+          {
+            name: 'Apple Music',
+            description: 'Music Streaming',
+            href: 'https://music.apple.com/'
+          },
+          {
+            name: '网易云音乐',
+            description: 'Music Platform',
+            href: 'https://music.163.com/'
+          }
+        ]
+      },
+      reading: {
+        title: 'Reading & Writing',
+        tools: [
+          {
+            name: '微信读书',
+            description: 'Reading Platform',
+            href: 'https://weread.qq.com/'
+          },
+          {
+            name: 'Personal Blog',
+            description: 'Built with Astro',
+            href: '/'
+          },
+          {
+            name: 'Hashnode',
+            description: 'Blog Platform',
+            href: 'https://hashnode.com/'
+          }
+        ]
+      }
+    }
+  },
+  health: {
+    title: 'Health & Fitness',
+    sections: {
+      tracking: {
+        title: 'Health Tracking',
+        tools: [
+          {
+            name: 'AutoSleep',
+            description: 'Sleep Tracking',
+            href: 'https://autosleep.app/'
+          },
+          {
+            name: 'Grow',
+            description: 'Health Tracking',
+            href: '#'
+          },
+          {
+            name: 'Keep',
+            description: 'Fitness App',
+            href: 'https://www.gotokeep.com/'
+          }
+        ]
+      }
+    }
+  }
+}
 
-const PRODUCTIVITY = [
-	{
-		name: 'Arc',
-		description: 'Browser',
-		href: 'https://arc.net/',
-		iconPath: 'arc',
-		iconBgColour: '#414350'
-	},
-	{
-		name: 'Obsidian',
-		description: 'local-first markdown editor',
-		href: 'https://obsidian.md/',
-		iconPath: 'obsidian',
-		iconBgColour: '#7A3EE8'
-	}
-]
-
-const DEVELOPMENT = [
-	{
-		name: 'Cursor',
-		description: 'IDE',
-		href: 'https://www.cursor.com/',
-		iconPath: 'cursor',
-		iconBgColour: '#2C2C32'
-	},
-	{
-		name: 'VS Code',
-		description: 'IDE',
-		href: 'https://code.visualstudio.com/',
-		iconPath: 'vscode',
-		iconBgColour: '#2C2C32'
-	},
-	{
-		name: 'ChatGPT',
-		description: 'AI',
-		href: 'https://chat.openai.com/',
-		iconPath: 'chatgpt',
-		iconBgColour: '#06A67F'
-	},
-	{
-		name: 'Claude',
-		description: 'AI',
-		href: 'https://claude.ai/',
-		iconBgColour: '#06A67F'
-	}
-]
-
-const Divices = [
-	{
-		name: 'mac mini m2 pro 32G 512G',
-		description: '主力机',
-		iconPath: 'apple',
-		iconBgColour: '#000001'
-	},
-	{
-		name: 'macbook air m1 16G 256G',
-		description: '移动办公机',
-		iconPath: 'apple',
-		iconBgColour: '#000001'
-	},
-	{
-		name: '机械师整机 i5 32G 512G',
-		description: 'windows 台式机',
-		iconPath: 'windows',
-		iconBgColour: '#000001'
-	}
-]
+const DEVICES = {
+  computing: {
+    title: 'Computing Devices',
+    sections: {
+      devices: {
+        title: 'Devices',
+        tools: [
+          {
+            name: 'Mac Mini M2 Pro',
+            description: '主力机 (32GB, 512GB)',
+            iconPath: 'apple'
+          },
+          {
+            name: 'MacBook Air M1',
+            description: '移动办公 (16GB, 256GB)',
+            iconPath: 'apple'
+          },
+          {
+            name: '机械师整机',
+            description: '台式机 (i5, 32GB, 512GB)',
+            iconPath: 'windows'
+          }
+        ]
+      }
+    }
+  },
+  mobile: {
+    title: 'Mobile Devices',
+    sections: {
+      phone: {
+        title: 'Phone',
+        tools: [
+          {
+            name: 'iPhone 13',
+            description: '手机 (256GB)',
+            iconPath: 'apple'
+          }
+        ]
+      },
+      tablet: {
+        title: 'Tablet',
+        tools: [
+          {
+            name: 'iPad Mini 5',
+            description: '平板',
+            iconPath: 'apple'
+          }
+        ]
+      }
+    }
+  },
+  wearables: {
+    title: 'Smart Wearables',
+    sections: {
+      watch: {
+        title: 'Smart Watch',
+        tools: [
+          {
+            name: 'Apple Watch S9',
+            description: '智能手表',
+            iconPath: 'apple'
+          }
+        ]
+      },
+      audio: {
+        title: 'Audio Devices',
+        tools: [
+          {
+            name: 'AirPods Pro 2',
+            description: '无线耳机',
+            iconPath: 'apple'
+          }
+        ]
+      }
+    }
+  },
+  imaging: {
+    title: 'Imaging Equipment',
+    sections: {
+      cameras: {
+        title: 'Camera System',
+        tools: [
+          {
+            name: '松下 GX9',
+            description: '相机',
+            iconPath: 'round-photo'
+          },
+          {
+            name: 'Panasonic 14-140mm',
+            description: '变焦镜头',
+            iconPath: 'tool'
+          },
+          {
+            name: 'Panasonic 25mm',
+            description: '定焦镜头',
+            iconPath: 'tool'
+          },
+          {
+            name: 'Panasonic 100-300mm',
+            description: '长焦镜头',
+            iconPath: 'tool'
+          },
+          {
+            name: 'DJI Action 5 Pro',
+            description: '运动相机',
+            iconPath: 'round-photo'
+          }
+        ]
+      }
+    }
+  }
+}
 ---
 
-<PageLayout meta={{ title: 'Home' }}>
-	<div class='w-full'>
-		<Button title='Back' href='/' style='button'>
-			<svg
-				xmlns='http://www.w3.org/2000/svg'
-				width='14'
-				height='14'
-				viewBox='0 0 24 24'
-				slot='icon-before'
-			>
-				<path
-					fill='currentColor'
-					d='m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z'
-				>
-				</path>
-			</svg>
-		</Button>
+<PageLayout meta={{ title: 'Tools & Devices' }}>
+  <div class='w-full'>
+    <Button title='Back' href='/' style='button'>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='14'
+        height='14'
+        viewBox='0 0 24 24'
+        slot='icon-before'
+      >
+        <path
+          fill='currentColor'
+          d='m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z'
+        >
+        </path>
+      </svg>
+    </Button>
 
-		<div class='mt-5 flex w-full flex-col gap-y-10'>
-			<div>
-				<h1 class='mb-1 text-2xl font-bold'>Tools</h1>
-				<p>Tools and software I use daily</p>
-			</div>
-			<ToolSection title='Development' tools={DEVELOPMENT} />
-			<ToolSection title='Productivity' tools={PRODUCTIVITY} />
-			<ToolSection title='Design' tools={DESIGN} />
-			<ToolSection title='Devices' tools={Divices} />
-		</div>
-	</div>
-	<GiscusComment client:only='react' />
+    <div class='mt-5 flex w-full flex-col gap-y-10'>
+      <div>
+        <h1 class='mb-1 text-2xl font-bold'>Tools & Devices</h1>
+        <p>Tools, software, and devices I use daily</p>
+      </div>
+
+      <CategorySection 
+        title="Software Tools" 
+        categories={Object.values(SOFTWARE_TOOLS)} 
+      />
+
+      <CategorySection 
+        title="Hardware Devices" 
+        categories={Object.values(DEVICES)} 
+      />
+    </div>
+  </div>
+  <GiscusComment client:only='react' />
 </PageLayout>