diff --git a/app/components/DocumentPreview.tsx b/app/components/DocumentPreview.tsx
new file mode 100644
index 0000000..310f07d
--- /dev/null
+++ b/app/components/DocumentPreview.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from "@/components/ui/button"
+import { Textarea } from './ui/textarea';
+
+
+type Props = {
+  content: string;
+};
+const DocumentPreview: React.FC<Props> = ({ content }) => {
+  const handleCopyContent = () => {
+    navigator.clipboard.writeText(content);
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'generated_document.txt';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div>
+      <Textarea  className="min-h-64" readOnly value={content}  />
+      <div className='flex justify-between mt-4'>
+        <Button onClick={handleCopyContent}>Copy to Clipboard</Button>
+        <Button onClick={handleDownload}>Download Document</Button>
+      </div>
+    </div>
+  );
+};
+
+export default DocumentPreview;
diff --git a/app/page.tsx b/app/page.tsx
index df70d7b..6f19943 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,10 +17,6 @@ export default function Home() {
           property="og:title"
           content="TonyChat - Your Personal and Business Chatbot"
         />
-        <meta
-          property="og:description"
-          content="TonyChat is an open-source, multifunctional Chatbot suitable for both personal and business purposes. It allows for customized chatbot deployment, easy model fine-tuning, and ensures safety and privacy."
-        />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="/T_icon.png" />
         <meta property="og:url" content="https://www.tonychat.com" />