diff --git a/documentation/src/pages/contact/index.tsx b/documentation/src/pages/contact/index.tsx
new file mode 100644
index 00000000..1d1807d6
--- /dev/null
+++ b/documentation/src/pages/contact/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import Head from "@docusaurus/Head";
+import { BlogFooter } from "@site/src/refine-theme/blog-footer";
+import { CommonHeader } from "@site/src/refine-theme/common-header";
+import { CommonLayout } from "@site/src/refine-theme/common-layout";
+import clsx from "clsx";
+
+const Contact: React.FC = () => {
+    const [formData, setFormData] = useState({ name: "", email: "", message: "" });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData((prevData) => ({ ...prevData, [name]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // TODO: Send form data to a server endpoint to handle email sending (not implemented here).
+        // Example: fetch('/api/send-email', { method: 'POST', body: JSON.stringify(formData) });
+        // Note: Ensure proper security measures and use a server for handling email submissions.
+    };
+
+    return (
+        <CommonLayout>
+            <Head title="CONTACT | OpenPanel">
+                <html data-page="contact" data-customized="true" />
+            </Head>
+            <div className="refine-prose">
+                <CommonHeader hasSticky={true} />
+
+                <div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
+                    <h1>Contact Us</h1>
+
+                    <form onSubmit={handleSubmit}>
+                        <div className="mb-4">
+                            <label htmlFor="name">Name:</label>
+                            <input
+                                type="text"
+                                id="name"
+                                name="name"
+                                value={formData.name}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-4">
+                            <label htmlFor="email">Email:</label>
+                            <input
+                                type="email"
+                                id="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+
+                        <div className="mb-4">
+                            <label htmlFor="message">Message:</label>
+                            <textarea
+                                id="message"
+                                name="message"
+                                value={formData.message}
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+
+                        <button type="submit" className="bg-blue-500 text-white px-4 py-2">
+                            Submit
+                        </button>
+                    </form>
+                </div>
+                <BlogFooter />
+            </div>
+        </CommonLayout>
+    );
+};
+
+export default Contact;
+                  
