diff --git a/index.html b/index.html
index e7d200f..da9b620 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>E-Mandi</title>
+    <link rel="shortcut icon" href="src/assets/logo.png" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/heroSection/HeroSection.jsx b/src/components/heroSection/HeroSection.jsx
index 4a38ed2..249c533 100644
--- a/src/components/heroSection/HeroSection.jsx
+++ b/src/components/heroSection/HeroSection.jsx
@@ -16,8 +16,15 @@ import { motion } from "framer-motion";
 
 import { styles } from "../styles";
 import { farmer } from "../../assets";
+import { useState } from "react";
 
 const Hero = () => {
+  const [bot, setBot] = useState(true);
+
+  const handleBot = () => {
+    if(bot == true) setBot(false);
+    else setBot(true);
+  };
   return (
     <section
     className='relative w-full h-screen mx-auto'
@@ -35,10 +42,11 @@ const Hero = () => {
         <h1 className={`${styles.heroHeadText} text-[#FDE5D4]`}>
             Welcome to <span className='text-[#445D48]'>E-Mandi</span>
           </h1>
-          <p className={`${styles.heroSubText} mt-2 text-[#FDE5D4]`}>One Stop Solution for your fresh vegetables,fruits and grains directy from Framers.<br className="sm:block hidden"/>Get Everything Fresh</p>
+          <br />
+          <p className={`${styles.heroSubText} mt-2 text-[#FDE5D4]`}>One Stop Solution for your fresh vegetables,fruits and grains directy from Framers.<br className="sm:block hidden"/>Get Everything Fresh.</p>
         </div>
         <div>
-          <img src={farmer} alt="" className=" w-[30rem] sm:h-96 h-28"/>
+          <img src={farmer} alt="" className={`w-auto min-w-full sm:h-96 h-28`}/>
         </div>
       </div>
       <div
@@ -60,6 +68,17 @@ const Hero = () => {
 </div>
           </a>    
           </div> 
+          <div
+      className="absolute xs:bottom-10 bottom-32 flex-col right-0 w-96 p-7"
+      >
+      <iframe src="https://chatbot.hellotars.com/conv/c4uWJl/" className={bot ? "" : "hidden"}>
+        </iframe>
+        <div className="flex-col">
+      <div className="sm:w-10 h-10 bg-[#445D48] rounded-full hover:bg-white" title="Try Me!" onClick={handleBot}>
+      </div> 
+      TRY ME!
+      </div>
+      </div>
     </section>
   )
 }
diff --git a/src/index.css b/src/index.css
index 1fbb9a8..5c431b7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,4 +15,11 @@
 }
 .hoverOutline :hover {
     outline: 2px solid white;
-}
\ No newline at end of file
+}
+ iframe {
+     border: 1px solid #ccc;
+     border-radius: 5px;
+     width: 100%;
+     max-width: 700px;
+     height: 500px;
+ }
\ No newline at end of file
