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/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/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"],