diff --git a/public/chat.png b/public/chat.png
new file mode 100644
index 0000000..0901d0c
Binary files /dev/null and b/public/chat.png differ
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 90a67ef..d646ba2 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 import Link from "next/link";
 
 export function HeroSection() {
@@ -10,22 +11,28 @@ export function HeroSection() {
         <div className="absolute inset-0 bg-gradient-to-b from-background via-card/10 to-card/20 opacity-70"></div>
       </div>
       <div className="container relative z-10">
-        <div className="flex flex-col items-center justify-center text-center max-w-4xl mx-auto">
-          <h1 className="text-5xl md:text-6xl font-bold tracking-tight pt-18 mb-8">
-            <span className="text-primary">India&apos;s First</span> AI Travel Agent
-          </h1>
-          <p className="text-lg md:text-2xl text-muted-foreground mb-10 max-w-3xl">
-            YatraGPT plans your end-to-end journeys across multiple transport modes.
-            From autorickshaws to airlines, we stitch India&apos;s chaotic transport mesh into a seamless experience.
-          </p>
-          <Link href="#waitlist">
-            <Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground px-14 py-9 text-xl">
-              Join the Waitlist
-            </Button>
-          </Link>
-          <p className="text-muted-foreground mt-6 text-lg">Currently in beta - 750+ users on waitlist</p>
+        <div className="flex flex-col md:flex-row items-center justify-between gap-12">
+          <div className="w-full md:w-1/2">
+        <Image src="/chat.png" alt="Chat" width={300} height={300} className="h-[70vh] w-auto object-contain pt-10" />
+          </div>
+          <div className="w-full md:w-1/2 text-center md:text-left">
+            <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-8">
+              <span className="text-primary">India&apos;s First</span> AI Travel Agent
+            </h1>
+            <p className="text-lg md:text-2xl text-muted-foreground mb-10">
+              YatraGPT plans your end-to-end journeys across multiple transport modes.
+              From autorickshaws to airlines, we stitch India&apos;s chaotic transport mesh into a seamless experience.
+            </p>
+            <Link href="#waitlist">
+              <Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground px-14 py-9 text-xl">
+                Join the Waitlist
+              </Button>
+            </Link>
+            <p className="text-muted-foreground mt-6 text-lg">Currently in beta - 750+ users on waitlist</p>
+          </div>
         </div>
       </div>
     </section>
   );
 }
+