diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2586f71..e1b2b72 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,10 @@ import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [isChatOpen, setIsChatOpen] = useState(false);
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -37,8 +39,17 @@ export default function LandingPage() {
         { name: "Contact", id: "/contact" },
       ]}
       brandName="gilded nest"
-      button={{ text: "Gilded Nest AI Agent", onClick: () => window.open("https://gilded-nest-ai.support/chat", "_blank"), href: "#" }}
+      button={{ text: "Gilded Nest AI Agent", onClick: () => setIsChatOpen(true) }}
     />
+    {isChatOpen && (
+        <div className="fixed bottom-20 right-8 z-50 w-80 h-96 bg-white border border-gray-200 rounded-2xl shadow-xl flex flex-col p-4">
+            <div className="flex justify-between items-center mb-4">
+                <h3 className="font-bold">AI Assistant</h3>
+                <button onClick={() => setIsChatOpen(false)}>×</button>
+            </div>
+            <div className="flex-1 overflow-y-auto mb-4 border-t pt-2">How can I help you today?</div>
+        </div>
+    )}
   </div>
 
   <div id="hero" data-section="hero">