diff --git a/components/Booking.js b/components/Booking.js
new file mode 100644
index 0000000..b261e43
--- /dev/null
+++ b/components/Booking.js
@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import styles from './Booking.module.css';
+
+const CalendlyForm = ({ url }) => {
+    const [isClient, setIsClient] = React.useState(false);
+
+    useEffect(() => {
+      const head = document.querySelector("head");
+      const script = document.createElement("script");
+      script.setAttribute(
+        "src",
+        "https://assets.calendly.com/assets/external/widget.js"
+      );
+      head.appendChild(script);
+      setIsClient(true);
+    }, []);
+  
+    return isClient ? (
+        <div>
+            <h1 className="font-light text-3xl text-black my-0 bg-white pt-8 text-center">Book a Demo</h1>
+            <div className={`calendly-inline-widget ${styles.calendly}`} data-url={url}></div>
+            <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
+        </div>
+    ) : <></>
+  };
+
+export default CalendlyForm
diff --git a/components/Booking.module.css b/components/Booking.module.css
new file mode 100644
index 0000000..cab39a7
--- /dev/null
+++ b/components/Booking.module.css
@@ -0,0 +1,5 @@
+/*calendly-inline-widget w-screen h-screen*/
+.calendly {
+    min-width:320px;
+    height:700px;
+}
\ No newline at end of file
diff --git a/components/Footer.js b/components/Footer.js
index c713caa..e930622 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -34,7 +34,7 @@ export default function Footer() {
                 </div>
                 <div className={styles.footerContent}>
                     <div className={`${styles.footerLinks} pt-20`}>
-                        <a href="https://github.com/OpenAdaptAI/OpenAdapt?tab=readme-ov-file#-open-contract-positions-at-openadaptai" className={styles.link}>Careers</a>
+                        <a href={`https://www.careers-page.com/${process.env.NEXT_PUBLIC_CAREER_LINK}`} className={styles.link}>Careers</a>
                         <a onClick={revealEmail} className={styles.link}>Contact</a>
                     </div>
                     <div className={styles.footerLinks}>
diff --git a/pages/index.js b/pages/index.js
index ed38f2b..3c6b578 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,6 +5,7 @@ import FeedbackForm from '@components/FeedbackForm';
 import Footer from "@components/Footer";
 import IndustriesGrid from '@components/IndustriesGrid';
 import MastHead from '@components/MastHead';
+import CalendlyForm from '@components/Booking';
 
 export default function Home() {
   const [feedbackData, setFeedbackData] = useState({
@@ -22,6 +23,7 @@ export default function Home() {
       <div ref={sectionRef}>
         <FeedbackForm feedbackData={feedbackData} setFeedbackData={setFeedbackData} />
       </div>
+      <CalendlyForm url={process.env.NEXT_PUBLIC_CALENDLY_LINK}/>
       <Footer />
     </div>
   )