diff --git a/resources/js/Pages/System/Manual/Index.tsx b/resources/js/Pages/System/Manual/Index.tsx
index 62a5da6..b2b335c 100644
--- a/resources/js/Pages/System/Manual/Index.tsx
+++ b/resources/js/Pages/System/Manual/Index.tsx
@@ -117,26 +117,29 @@ export default function ManualIndex({ toc, currentSlug, content }: Props) {
                         </div>
                     </div>
 
-                    <div className="flex-1 overflow-y-auto bg-white" id="manual-content-scroll">
-                        <div className="max-w-5xl mx-auto p-4 md:p-8 lg:p-12">
-                            <article className="prose prose-slate max-w-none 
-                                prose-headings:text-slate-900 prose-headings:tracking-tight prose-headings:mt-4 prose-headings:mb-1.5
-                                prose-h1:text-2xl prose-h1:pb-2 prose-h1:border-b prose-h1:border-slate-100 prose-h1:mt-0
-                                prose-h2:text-xl prose-h2:mt-5
-                                prose-p:text-slate-600 prose-p:leading-6 prose-p:my-1.5 prose-p:text-[15px]
-                                prose-li:text-slate-600 prose-li:leading-6 prose-li:my-0.5 prose-li:text-[15px]
-                                prose-ul:my-1.5 prose-ol:my-1.5
-                                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:my-2 prose-blockquote:py-0.5 prose-blockquote:px-4
-                                prose-img:rounded-lg prose-img:shadow-md prose-img:my-4
-                                prose-code:text-primary-main prose-code:bg-primary-lightest prose-code:px-1 prose-code:rounded prose-code:text-[13px]
-                                prose-pre:my-3 prose-pre:p-3 prose-pre:rounded-lg">
+                    <div className="flex-1 overflow-y-auto bg-white scroll-smooth" id="manual-content-scroll">
+                        <style dangerouslySetInnerHTML={{
+                            __html: `
+                            #manual-article { font-size: 15px; line-height: 1.6; color: #475569; }
+                            #manual-article h1 { font-size: 1.75rem; margin-top: 0 !important; margin-bottom: 0.75rem !important; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9; font-weight: 800; color: #0f172a; }
+                            #manual-article h2 { font-size: 1.25rem; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; font-weight: 700; color: #1e293b; }
+                            #manual-article h3 { font-size: 1.1rem; margin-top: 1rem !important; margin-bottom: 0.4rem !important; font-weight: 600; color: #334155; }
+                            #manual-article p { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
+                            #manual-article ul, #manual-article ol { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; padding-left: 1.25rem; }
+                            #manual-article li { margin-top: 0.2rem !important; margin-bottom: 0.2rem !important; }
+                            #manual-article blockquote { margin: 0.75rem 0 !important; padding: 0.25rem 1rem !important; border-left: 4px solid var(--primary-main); background: #f8fafc; border-radius: 0 4px 4px 0; }
+                            #manual-article img { margin: 1rem 0 !important; border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
+                            #manual-article code { padding: 0.1rem 0.3rem; background: #e6f7f3; color: #018a6a; border-radius: 4px; font-size: 0.85em; font-family: ui-monospace, monospace; }
+                            #manual-article pre { margin: 0.75rem 0 !important; padding: 0.75rem !important; background: #1e293b; color: #f8fafc; border-radius: 8px; overflow-x: auto; }
+                        `}} />
+                        <div className="max-w-4xl mx-auto p-4 md:p-10 lg:p-12">
+                            <article id="manual-article" className="prose prose-slate max-w-none">
                                 <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                     {content}
                                 </ReactMarkdown>
                             </article>
 
-                            <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="mt-16 pt-8 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>