diff --git a/resources/css/app.css b/resources/css/app.css
index 51160bb..b53a858 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   --font-sans: 'Noto Sans TC', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
diff --git a/resources/js/Pages/System/Manual/Index.tsx b/resources/js/Pages/System/Manual/Index.tsx
index 84d1916..3a20b16 100644
--- a/resources/js/Pages/System/Manual/Index.tsx
+++ b/resources/js/Pages/System/Manual/Index.tsx
@@ -50,19 +50,19 @@ export default function ManualIndex({ toc, currentSlug, content }: Props) {
         ]}>
             <Head title="操作手冊" />
 
-            <div className="flex h-[calc(100vh-140px)] bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden m-2 md:m-6">
+            <div className="flex h-[calc(100vh-140px)] bg-slate-50/50 rounded-xl border border-slate-200 shadow-sm overflow-hidden m-2 md:m-6">
 
                 {/* Sidebar */}
                 <aside className={cn(
-                    "w-64 border-r border-gray-200 bg-gray-50/50 flex flex-col transition-all duration-300",
+                    "w-72 border-r border-slate-200 bg-white flex flex-col transition-all duration-300",
                     !isSidebarOpen && "w-0 opacity-0 overflow-hidden"
                 )}>
-                    <div className="p-4 border-b border-gray-200 bg-white">
+                    <div className="p-5 border-b border-slate-100 bg-slate-50/30">
                         <div className="relative">
-                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                             <Input
-                                placeholder="搜尋手冊..."
-                                className="pl-9 h-9 bg-gray-50 border-gray-200 focus:bg-white transition-colors"
+                                placeholder="搜尋功能手冊..."
+                                className="pl-10 h-10 bg-white border-slate-200 focus:ring-2 focus:ring-primary-lighter transition-all placeholder:text-slate-400"
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
                             />
@@ -70,26 +70,26 @@ export default function ManualIndex({ toc, currentSlug, content }: Props) {
                     </div>
 
                     <ScrollArea className="flex-1">
-                        <div className="p-3 space-y-6">
+                        <div className="p-4 space-y-8">
                             {filteredToc.map((section, idx) => (
-                                <div key={idx} className="space-y-1">
-                                    <h3 className="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                                <div key={idx} className="space-y-2">
+                                    <h3 className="px-3 text-[11px] font-bold text-slate-400 uppercase tracking-[0.1em]">
                                         {section.title}
                                     </h3>
-                                    <div className="space-y-0.5">
+                                    <div className="space-y-1">
                                         {section.pages.map((page) => (
                                             <Link
                                                 key={page.slug}
                                                 href={route('system.manual.index', { slug: page.slug })}
                                                 className={cn(
-                                                    "flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors",
+                                                    "flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-all",
                                                     currentSlug === page.slug
-                                                        ? "bg-primary-50 text-primary-700 shadow-sm border border-primary-100"
-                                                        : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                                                        ? "bg-primary-main text-white shadow-md shadow-primary-main/20"
+                                                        : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                                                 )}
                                             >
-                                                <FileText className={cn("h-4 w-4", currentSlug === page.slug ? "text-primary-600" : "text-gray-400")} />
-                                                {page.title}
+                                                <FileText className={cn("h-4 w-4 shrink-0", currentSlug === page.slug ? "text-white" : "text-slate-400")} />
+                                                <span className="truncate">{page.title}</span>
                                             </Link>
                                         ))}
                                     </div>
@@ -102,40 +102,52 @@ export default function ManualIndex({ toc, currentSlug, content }: Props) {
                 {/* Main Content */}
                 <main className="flex-1 flex flex-col min-w-0 bg-white">
                     {/* Content Header mobile toggle */}
-                    <div className="h-12 border-b border-gray-100 flex items-center px-4 gap-2">
+                    <div className="h-14 border-b border-slate-100 flex items-center px-6 gap-3 bg-white/80 backdrop-blur-md sticky top-0 z-10">
                         <button
                             onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                            className="p-1.5 hover:bg-gray-100 rounded-md text-gray-500 transition-colors"
+                            className="p-2 hover:bg-slate-100 rounded-lg text-slate-500 transition-colors border border-transparent hover:border-slate-200"
+                            title={isSidebarOpen ? "收起選單" : "展開選單"}
                         >
                             <Menu className="h-5 w-5" />
                         </button>
-                        <div className="h-4 w-px bg-gray-200 mx-1" />
-                        <BookOpen className="h-4 w-4 text-primary-main" />
-                        <span className="text-sm font-medium text-gray-700">操作手冊文件</span>
+                        <div className="h-5 w-px bg-slate-200 mx-1" />
+                        <div className="flex items-center gap-2 text-slate-800">
+                            <BookOpen className="h-5 w-5 text-primary-main" />
+                            <span className="text-sm font-bold tracking-tight">星系統操作指南</span>
+                        </div>
                     </div>
 
-                    <ScrollArea className="flex-1">
-                        <div className="max-w-4xl mx-auto p-6 md:p-12">
-                            <article className="prose prose-slate prose-blue max-w-none 
-                                prose-headings:font-bold prose-headings:text-gray-900
-                                prose-p:text-gray-600 prose-p:leading-relaxed
-                                prose-li:text-gray-600
-                                prose-pre:bg-gray-900 prose-pre:rounded-xl
-                                prose-img:rounded-xl prose-img:shadow-lg
-                                prose-td:py-3 prose-td:px-4
-                                prose-th:bg-gray-50 prose-th:text-gray-900 prose-th:font-semibold
-                                prose-table:border prose-table:border-gray-200 prose-table:rounded-lg prose-table:overflow-hidden">
+                    <ScrollArea className="flex-1 bg-white">
+                        <div className="max-w-4xl mx-auto p-8 md:p-16 lg:p-20">
+                            <article className="prose prose-slate lg:prose-lg max-w-none 
+                                prose-headings:font-bold prose-headings:text-slate-900 prose-headings:tracking-tight
+                                prose-h1:text-4xl prose-h1:mb-8 prose-h1:pb-4 prose-h1:border-b prose-h1:border-slate-100
+                                prose-p:text-slate-600 prose-p:leading-8 prose-p:text-lg
+                                prose-li:text-slate-600 prose-li:leading-8 prose-li:text-lg
+                                prose-strong:text-slate-900 prose-strong:font-bold
+                                prose-a:text-primary-main prose-a:no-underline hover:prose-a:underline
+                                prose-blockquote:border-l-4 prose-blockquote:border-primary-main prose-blockquote:bg-slate-50 prose-blockquote:py-2 prose-blockquote:px-6 prose-blockquote:rounded-r-lg prose-blockquote:not-italic
+                                prose-pre:bg-slate-900 prose-pre:rounded-2xl prose-pre:p-6 prose-pre:shadow-xl
+                                prose-img:rounded-2xl prose-img:shadow-2xl prose-img:border prose-img:border-slate-100
+                                prose-code:text-primary-main prose-code:bg-primary-lightest prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none
+                                prose-table:border prose-table:border-slate-200 prose-table:rounded-xl prose-table:overflow-hidden prose-table:shadow-sm
+                                prose-th:bg-slate-50 prose-th:text-slate-900 prose-th:font-bold prose-th:py-4 prose-th:px-6
+                                prose-td:py-4 prose-td:px-6 prose-td:border-t prose-td:border-slate-100">
                                 <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                     {content}
                                 </ReactMarkdown>
                             </article>
 
-                            <div className="mt-16 pt-8 border-t border-gray-100 flex items-center justify-between text-sm text-gray-400">
-                                <div className="flex items-center gap-2">
-                                    <HelpCircle className="h-4 w-4" />
-                                    <span>需要更多幫助？請聯繫技術中心</span>
+                            <div className="mt-24 pt-10 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6 text-sm">
+                                <div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-full border border-slate-200">
+                                    <HelpCircle className="h-4 w-4 text-primary-main" />
+                                    <span className="text-slate-600 font-medium whitespace-nowrap">需要更多幫助？請聯繫技術中心 (分機: 8888)</span>
+                                </div>
+                                <div className="flex items-center gap-4 text-slate-400">
+                                    <span>最後更新: 2026-02-13</span>
+                                    <span className="h-1 w-1 bg-slate-300 rounded-full" />
+                                    <span className="font-semibold tracking-widest uppercase">Star ERP v1.0</span>
                                 </div>
-                                <span>Star ERP v1.0</span>
                             </div>
                         </div>
                     </ScrollArea>
