diff --git a/app/about/book-meeting/page.tsx b/app/about/book-meeting/page.tsx
index 3d1629a88..72c519d3d 100644
--- a/app/about/book-meeting/page.tsx
+++ b/app/about/book-meeting/page.tsx
@@ -1,31 +1,22 @@
-"use client";
+
+import CalendlyWidget from "@/components/Book";
 import { Metadata } from "next";
-import { useEffect } from "react";
+
 export const metadata: Metadata = {
   title: "Book meeting",
   description:
     "Let's make together.",
 };
 
-const CalendlyWidget = () => {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "https://assets.calendly.com/assets/external/widget.js";
-    script.async = true;
-    document.body.appendChild(script);
-
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
+const book = () => {
+ 
+  
   return (
     <div
-      className="calendly-inline-widget"
-      data-url="https://calendly.com/neerajrekwar817/new-meeting"
-      style={{ minWidth: "320px", height: "700px" }}
-    ></div>
+      
+    ><CalendlyWidget/></div>
   );
 };
 
-export default CalendlyWidget;
+
+export default book
\ No newline at end of file
diff --git a/components/Book.tsx b/components/Book.tsx
new file mode 100644
index 000000000..7b4cf5dbb
--- /dev/null
+++ b/components/Book.tsx
@@ -0,0 +1,25 @@
+
+'use client'
+import { useEffect } from "react";
+const CalendlyWidget = () => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://assets.calendly.com/assets/external/widget.js";
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <div
+      className="calendly-inline-widget"
+      data-url="https://calendly.com/neerajrekwar817/new-meeting"
+      style={{ minWidth: "320px", height: "700px" }}
+    ></div>
+  );
+};
+
+export default CalendlyWidget;