diff --git a/app/(presentation)/presentation/[...slug]/page.jsx b/app/(presentation)/presentation/[...slug]/page.jsx
index bd0db00..ce5e88a 100644
--- a/app/(presentation)/presentation/[...slug]/page.jsx
+++ b/app/(presentation)/presentation/[...slug]/page.jsx
@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation';
-import { getPageData, getAllSlugs } from "@/utils/data";
+import { getPageData } from "@/utils/data";
+import Presentation from "@/components/presentation/Presentation";
 
 export default async function PresentationPage({ params }) {
   const resolvedParams = await params;
@@ -14,21 +15,5 @@ export default async function PresentationPage({ params }) {
     notFound();
   }
 
-  // PPT展示页面 - 全屏展示
-  return (
-    <div className="min-h-screen bg-black">
-      <div className="w-full h-screen flex items-center justify-center">
-        <div className="w-full h-full relative">
-          <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
-            <div className="text-center text-white max-w-4xl mx-auto px-8">
-              {data.content && (
-                <div className="text-lg md:text-xl mb-8 leading-relaxed" 
-                     dangerouslySetInnerHTML={{ __html: data.content }} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  return <Presentation data={data} />;
 }
diff --git a/components/presentation/Reveal/UI.jsx b/components/presentation/Presentation.jsx
similarity index 86%
rename from components/presentation/Reveal/UI.jsx
rename to components/presentation/Presentation.jsx
index c355a51..e320fa2 100644
--- a/components/presentation/Reveal/UI.jsx
+++ b/components/presentation/Presentation.jsx
@@ -1,11 +1,12 @@
-"use client";
-import { useEffect, useRef } from "react";
+'use client';
+
+import { useEffect, useRef } from 'react';
 import Reveal from 'reveal.js';
 import 'reveal.js/dist/reveal.css';
-import 'reveal.js/dist/theme/white.css';
+import 'reveal.js/dist/theme/black.css';
 import { marked } from 'marked';
 
-export default function UI({ data, showNavButtons = false }) {
+export default function Presentation({ data }) {
   const deckRef = useRef(null);
   const revealRef = useRef(null);
 
@@ -20,14 +21,6 @@ export default function UI({ data, showNavButtons = false }) {
       mangle: false,
     });
 
-    // 将 markdown 内容转换为幻灯片
-    const slides = parseMarkdownToSlides(data);
-    
-    // 更新 deck 内容
-    if (deckRef.current) {
-      deckRef.current.innerHTML = slides;
-    }
-
     // 初始化 Reveal.js
     if (revealRef.current) {
       revealRef.current.destroy();
@@ -73,6 +66,17 @@ export default function UI({ data, showNavButtons = false }) {
 
     revealRef.current.initialize();
 
+    // 在Reveal.js初始化后，更新slides内容
+    setTimeout(() => {
+      if (deckRef.current) {
+        const slides = parseMarkdownToSlides(data);
+        const slidesContainer = deckRef.current.querySelector('.slides');
+        if (slidesContainer) {
+          slidesContainer.innerHTML = slides;
+        }
+      }
+    }, 100);
+
     // 清理函数
     return () => {
       if (revealRef.current) {
@@ -165,7 +169,7 @@ export default function UI({ data, showNavButtons = false }) {
   };
 
   return (
-    <div className="reveal-container" style={{ height: '100vh', width: '100%', position: 'fixed', top: 0, left: 0, zIndex: 1000, background: 'white' }}>
+    <div className="reveal-container" style={{ height: '100vh', width: '100%', position: 'fixed', top: 0, left: 0, zIndex: 1000, background: 'black' }}>
       <style jsx global>{`
         .reveal-container .reveal {
           height: 100% !important;
@@ -184,6 +188,7 @@ export default function UI({ data, showNavButtons = false }) {
           align-items: center !important;
           text-align: center !important;
           padding: 2rem !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section h1,
@@ -193,33 +198,38 @@ export default function UI({ data, showNavButtons = false }) {
         .reveal-container .reveal .slides section h5,
         .reveal-container .reveal .slides section h6 {
           margin-bottom: 1rem !important;
-          color: #333 !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section p {
           margin-bottom: 0.5rem !important;
           line-height: 1.6 !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section ul,
         .reveal-container .reveal .slides section ol {
           text-align: left !important;
           margin: 1rem 0 !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section li {
           margin-bottom: 0.5rem !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section code {
-          background: #f4f4f4 !important;
+          background: #333 !important;
+          color: #fff !important;
           padding: 0.2rem 0.4rem !important;
           border-radius: 3px !important;
           font-family: 'Courier New', monospace !important;
         }
         
         .reveal-container .reveal .slides section pre {
-          background: #f4f4f4 !important;
+          background: #333 !important;
+          color: #fff !important;
           padding: 1rem !important;
           border-radius: 5px !important;
           text-align: left !important;
@@ -227,27 +237,30 @@ export default function UI({ data, showNavButtons = false }) {
         }
         
         .reveal-container .reveal .slides section blockquote {
-          border-left: 4px solid #ddd !important;
+          border-left: 4px solid #666 !important;
           padding-left: 1rem !important;
           margin: 1rem 0 !important;
           text-align: left !important;
+          color: #ccc !important;
         }
         
         .reveal-container .reveal .slides section table {
           border-collapse: collapse !important;
           width: 100% !important;
           margin: 1rem 0 !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section th,
         .reveal-container .reveal .slides section td {
-          border: 1px solid #ddd !important;
+          border: 1px solid #666 !important;
           padding: 0.5rem !important;
           text-align: left !important;
+          color: white !important;
         }
         
         .reveal-container .reveal .slides section th {
-          background: #f4f4f4 !important;
+          background: #444 !important;
         }
         
         .reveal-container .reveal .slides section img {
@@ -275,11 +288,12 @@ export default function UI({ data, showNavButtons = false }) {
         className="reveal"
         style={{ height: '100%', width: '100%' }}
       >
-        {/* 初始内容，会被 JavaScript 替换 */}
-        <section>
-          <h1>{data?.title || '演示文稿'}</h1>
-          <p>正在加载内容...</p>
-        </section>
+        <div className="slides">
+          {/* 初始内容，会被 JavaScript 替换 */}
+          <section>
+            <p>正在加载内容...</p>
+          </section>
+        </div>
       </div>
     </div>
   );
diff --git a/components/presentation/Reveal/index.jsx b/components/presentation/Reveal/index.jsx
deleted file mode 100644
index 17d9b90..0000000
--- a/components/presentation/Reveal/index.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { getComponentName } from "@/utils/getComponentName";
-import { fetchComponentData } from "@/utils/data";
-import UI from "./UI";
-
-const componentName = getComponentName(import.meta.url);
-
-export default async function Component() {
-  const result = await fetchComponentData(componentName);
-
-  if (result.error || !result.data) {
-    if (result.error) console.error(`Failed to fetch ${componentName} data:`, result.error);
-    return null;
-  }
-
-  return <UI data={result.data} showNavButtons={true} />;
-}