diff --git a/src/app/api/preview/route.ts b/src/app/api/preview/route.ts
new file mode 100644
index 0000000..c3eba20
--- /dev/null
+++ b/src/app/api/preview/route.ts
@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  const { content } = body;
+
+  if (typeof content !== 'string') {
+    return NextResponse.json({ error: 'content must be a string' }, { status: 400 });
+  }
+
+  return NextResponse.json({ html: content });
+}
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
index af12022..986a27d 100644
--- a/src/app/editor/page.tsx
+++ b/src/app/editor/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import dynamic from 'next/dynamic';
+import { sanitizeHtml } from '@/utils/sanitize';
 
 const RichContentEditor = dynamic(
   () => import('@/components/editor/RichContentEditor').then((mod) => mod.RichContentEditor),
@@ -15,25 +16,35 @@ const RichContentEditor = dynamic(
 
 export default function EditorPage() {
   const [content, setContent] = useState('<p>Start editing...</p>');
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
 
   return (
     <div className="container mx-auto p-8 max-w-6xl">
-      <h1 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white">
-        Advanced Content Editor Demo
-      </h1>
-
-      <div className="mb-8">
-        <RichContentEditor initialContent={content} onUpdate={setContent} />
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold text-gray-800 dark:text-white">
+          Advanced Content Editor Demo
+        </h1>
+        <button
+          onClick={() => setIsPreviewMode((prev) => !prev)}
+          className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+            isPreviewMode
+              ? 'bg-blue-600 text-white hover:bg-blue-700'
+              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600'
+          }`}
+        >
+          {isPreviewMode ? 'Back to Editor' : 'Preview'}
+        </button>
       </div>
 
-      <div className="mt-8 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
-        <h2 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">
-          Live Preview (HTML Output)
-        </h2>
-        <pre className="bg-white dark:bg-gray-800 p-4 rounded overflow-auto h-48 text-sm text-gray-600 dark:text-gray-400 font-mono border border-gray-200 dark:border-gray-700">
-          {content}
-        </pre>
-      </div>
+      {isPreviewMode ? (
+        <div className="prose dark:prose-invert max-w-none bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-8 min-h-[calc(100vh-200px)]">
+          <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(content) }} />
+        </div>
+      ) : (
+        <div className="mb-8">
+          <RichContentEditor initialContent={content} onUpdate={setContent} />
+        </div>
+      )}
     </div>
   );
 }