diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx
index 9344ef7..4477d05 100644
--- a/apps/blogai/components/header.tsx
+++ b/apps/blogai/components/header.tsx
@@ -39,6 +39,13 @@ import { LogoAI } from '@/components/chat'
 
 import { useState } from "react";
 
+import {
+  BadgeInfo,
+  Tags,
+  CalendarClock,
+  Building2
+} from "lucide-react";
+
 
 export function Header() {
   
@@ -116,14 +123,11 @@ export function DetailPageHeader({ data }: { data: any }) {
     try {
       await fetch("/api/stub", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ source })
       });
 
       await new Promise((resolve) => setTimeout(resolve, 1000));
-
       setStatusText(`操作成功：来自${source === "icon" ? "图标" : "信息区域"}`);
     } catch (err) {
       setStatusText("操作失败");
@@ -134,31 +138,39 @@ export function DetailPageHeader({ data }: { data: any }) {
 
   return (
     <div className="sticky top-0 z-30 bg-white">
-      <div className=" mt-4 mb-1 px-6 lg:px-8 w-11/12 lg:w-2/3 xl:w-3/5  mx-auto">
+      <div className="mt-4 mb-1 px-6 lg:px-8 w-11/12 lg:w-2/3 xl:w-3/5 mx-auto">
         <div className="flex items-start space-x-6">
           {/* 左图标（可点） */}
           <button
-            className="flex items-center justify-center w-24 h-24 md:w-32 md:h-32 border text-xl font-bold hover:bg-gray-100 transition"
+            className="flex items-center justify-center w-24 h-24 md:w-32 md:h-32 border text-xl font-bold hover:bg-gray-100 transition rounded-none"
             onClick={() => handleClick("icon")}
             disabled={loading}
           >
             {data?.icon || "Deploy"}
           </button>
 
-          {/* 右信息区域（可点） */}
+          {/* 右信息区域（带图标） */}
           <div
-            className="text-sm leading-7 space-y-1 cursor-pointer hover:bg-gray-50 p-2 rounded transition"
+            className="text-sm leading-7 space-y-2 cursor-pointer hover:bg-gray-50 p-2 transition"
             onClick={() => handleClick("info")}
           >
-            <p><strong>名称：</strong>{data?.name || "未命名组件"}</p>
-            <p><strong>类别：</strong>{data?.category || "未知"}</p>
-            <p><strong>更新时间：</strong>{data?.updated_at || "未提供"}</p>
-            <p><strong>公司：</strong>{data?.company || "未知公司"}</p>
+            <div className="flex items-center gap-2">
+              <BadgeInfo size={16} /> {data?.name || "未命名组件"}
+            </div>
+            <div className="flex items-center gap-2">
+              <Tags size={16} /> {data?.category || "未知"}
+            </div>
+            <div className="flex items-center gap-2">
+              <CalendarClock size={16} /> {data?.updated_at || "未提供"}
+            </div>
+            <div className="flex items-center gap-2">
+              <Building2 size={16} /> {data?.company || "未知公司"}
+            </div>
           </div>
         </div>
 
         {/* 状态条 */}
-        <div className="w-full mt-4 bg-gray-200 h-6 overflow-hidden">
+        <div className="w-full mt-4 bg-gray-200 h-6">
           <div
             className="bg-blue-500 h-full text-white text-center text-sm flex items-center justify-center transition-all duration-300"
             style={{ width: data?.progress || "60%" }}
@@ -173,7 +185,6 @@ export function DetailPageHeader({ data }: { data: any }) {
 
 
 
-
 // export function Header() {
   
 //   const router = useRouter();