diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx
index f6d4362cb1..6091ee7f22 100644
--- a/docs/getting-started.mdx
+++ b/docs/getting-started.mdx
@@ -11,9 +11,6 @@ import Version from "../src/components/Version"
 import InstallCommand from "../src/components/install"
 import Tabs from "@theme/Tabs"
 import TabItem from "@theme/TabItem"
-import Video from "../src/components/video"
-
-<Video />
 
 ## Installing the Tailcall CLI
 
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 003a912197..3f92f35573 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -11,6 +11,15 @@ export default {
   trailingSlash: true,
   tagline: "GraphQL platform engineered for scale",
   headTags: [
+    {
+      tagName: "script",
+      attributes: {
+        id: "chatbotscript",
+        "data-accountid": "CZPG9aVdtk59Tjz4SMTu8w==",
+        "data-websiteid": "75VGI0NlBqessD4BQn2pFg==",
+        src: "https://app.robofy.ai/bot/js/common.js?v=" + new Date().getTime(),
+      },
+    },
     {
       tagName: "script",
       attributes: {
diff --git a/src/components/home/IntroductionVideo/index.tsx b/src/components/home/IntroductionVideo/index.tsx
new file mode 100644
index 0000000000..b0977a826b
--- /dev/null
+++ b/src/components/home/IntroductionVideo/index.tsx
@@ -0,0 +1,24 @@
+import React, {useRef} from "react"
+import "./style.css"
+
+const IntroductionVideo: React.FC = () => {
+  const videoId = "1011521201"
+  const videoRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className="video-wrapper" ref={videoRef}>
+      <div className="video-container">
+        <iframe
+          src={`https://player.vimeo.com/video/${videoId}?autoplay=0&badge=0&autopause=0&player_id=0&app_id=58479`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="absolute top-0 left-0 w-full h-full"
+          title="Tailcall Introduction Video"
+          loading="lazy"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default IntroductionVideo
diff --git a/src/components/home/IntroductionVideo/style.css b/src/components/home/IntroductionVideo/style.css
new file mode 100644
index 0000000000..2160fa2a28
--- /dev/null
+++ b/src/components/home/IntroductionVideo/style.css
@@ -0,0 +1,72 @@
+.video-wrapper {
+  padding: 1.75rem;
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.video-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(90deg, #c5c5c5 1px, transparent 1px), linear-gradient(#c5c5c5 1px, transparent 1px);
+  background-size: 100px 50px;
+  background-position: -1px -1px;
+  opacity: 0.5;
+  max-width: 1595px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  border-radius: 0.375rem;
+  z-index: 10;
+  box-shadow: 0px 4px 32px 0px #ffe933;
+  background-image: url("/static/images/video-thumbnail.webp");
+  background-size: 100%;
+}
+
+.video-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+@media (min-width: 768px) {
+  .video-wrapper {
+    padding: 7rem /* 112px */;
+  }
+  .video-container {
+    border-radius: 1.5rem /* 24px */;
+  }
+}
+
+@media (min-width: 1536px) {
+  .video-container {
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
+    aspect-ratio: 16/9;
+    padding-bottom: 0;
+  }
+  .video-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(ellipse at center, transparent 50%, white 85%);
+  }
+}
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index ce43320330..0a8a67dbcd 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -7,11 +7,13 @@ import Discover from "../shared/Discover"
 import Configuration from "./Configuration"
 import Testimonials from "./Testimonials"
 import Announcement from "../shared/Announcement"
+import IntroductionVideo from "./IntroductionVideo"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Banner />
       <Configuration />
+      <IntroductionVideo />
       <Testimonials />
       <Benefits />
       <Graph />
diff --git a/src/components/video.tsx b/src/components/video.tsx
deleted file mode 100644
index 6ff43a4035..0000000000
--- a/src/components/video.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react"
-
-export default function Video() {
-  return (
-    <div className="responsive-iframe-container">
-      <iframe
-        src="https://www.youtube.com/embed/-hgzB5JhWJQ?si=xhDxmw5--9Qu11IL&rel=0"
-        title="YouTube video player"
-        frameBorder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerPolicy="strict-origin-when-cross-origin"
-        allowFullScreen
-      ></iframe>
-    </div>
-  )
-}
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
index 35177010cb..834c1d9f10 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -178,7 +178,11 @@ const NavbarContent = (): JSX.Element => {
 
   const items = useNavbarItems()
   const [leftItems, rightItems] = splitNavbarItems(items)
-
+  const pageHasSearch = () => {
+    let location = window.location.pathname.split("/")[1]
+    let allowedPaths = ["docs", "graphql"]
+    return allowedPaths.includes(location)
+  }
   const searchBarItem = items.find((item) => item.type === "search")
 
   return (
@@ -187,7 +191,7 @@ const NavbarContent = (): JSX.Element => {
         // TODO stop hardcoding items? (added by docusaurus)
         // Render left navbar items
         <>
-          {mobileSidebar.shouldRender && <Search />}
+          {mobileSidebar.shouldRender && pageHasSearch() && <Search />}
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
           <NavbarItems items={leftItems} />
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
index c3f46ca2c8..726518c02a 100644
--- a/src/theme/SearchBar/styles.css
+++ b/src/theme/SearchBar/styles.css
@@ -116,17 +116,17 @@
     display: none;
   }
 
+  .DocSearch-Container > div {
+    width: 100vw;
+    border-radius: 0;
+    height: 100vh;
+  }
+
   .DocSearch-Dropdown {
     max-height: unset;
     height: 80vh;
   }
 
-  .DocSearch-Modal {
-    width: 100vw;
-    height: 100vh;
-    border-radius: 0px;
-  }
-
   .DocSearch-Container {
     z-index: 201;
     position: fixed;
@@ -140,6 +140,31 @@
     border-radius: 10px;
     border: 1px solid var(--ifm-color-brand-light-600);
   }
+
+  .DocSearch-Button-Keys,
+  .DocSearch-Button-Placeholder {
+    display: none;
+  }
+
+  .DocSearch-Cancel {
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--docsearch-highlight-color);
+    cursor: pointer;
+    display: inline-block;
+    flex: none;
+    font: inherit;
+    font-size: 1em;
+    font-weight: 500;
+    margin-left: var(--docsearch-spacing);
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+  }
 }
 
 .DocSearch-Button-Key {
diff --git a/static/images/video-thumbnail.webp b/static/images/video-thumbnail.webp
new file mode 100644
index 0000000000..14926c1051
Binary files /dev/null and b/static/images/video-thumbnail.webp differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2dcb708658..1e54b007c5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -66,6 +66,9 @@ module.exports = {
         SPACE_20: "80px",
         SPACE_21: "160px",
       },
+      screens: {
+        "3xl": "2200px",
+      },
     },
     fontFamily: {
       "space-grotesk": ["Space Grotesk", "sans-serif"],