diff --git a/apps/web/components/agents/agent-profile-client.tsx b/apps/web/components/agents/agent-profile-client.tsx
index 8c26009..00f872b 100644
--- a/apps/web/components/agents/agent-profile-client.tsx
+++ b/apps/web/components/agents/agent-profile-client.tsx
@@ -12,6 +12,8 @@ import {
   MessageSquare,
 } from 'lucide-react';
 import Image from 'next/image';
+import * as React from 'react';
+import { InquiryModal } from '@/components/listings/inquiry-modal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -34,6 +36,17 @@ interface AgentProfileClientProps {
 // ---------------------------------------------------------------------------
 
 export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps) {
+  const [inquiryOpen, setInquiryOpen] = React.useState(false);
+  const firstListing = agent.activeListings[0] ?? null;
+
+  const handleMessageClick = React.useCallback(() => {
+    if (firstListing) {
+      setInquiryOpen(true);
+    } else {
+      window.location.href = `sms:${agent.phone}`;
+    }
+  }, [firstListing, agent.phone]);
+
   return (
     <div className="mx-auto max-w-6xl px-4 py-6">
       {/* Breadcrumb */}
@@ -121,7 +134,7 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
 
         {/* CTA Sidebar (desktop) */}
         <div className="hidden shrink-0 sm:block">
-          <ContactCard agent={agent} />
+          <ContactCard agent={agent} onMessageClick={handleMessageClick} />
         </div>
       </div>
 
@@ -247,17 +260,27 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
         {/* Sidebar (mobile + desktop fallback) */}
         <div className="space-y-6">
           <div className="sm:hidden">
-            <ContactCard agent={agent} />
+            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
           </div>
           <div className="hidden sm:block lg:block">
             <div className="lg:sticky lg:top-20">
               <div className="hidden lg:block">
-                <ContactCard agent={agent} />
+                <ContactCard agent={agent} onMessageClick={handleMessageClick} />
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      {firstListing && (
+        <InquiryModal
+          open={inquiryOpen}
+          onOpenChange={setInquiryOpen}
+          listingId={firstListing.id}
+          listingTitle={firstListing.property.title}
+          sellerName={agent.fullName}
+        />
+      )}
     </div>
   );
 }
@@ -286,7 +309,7 @@ function StatPill({
   );
 }
 
-function ContactCard({ agent }: { agent: AgentPublicProfile }) {
+function ContactCard({ agent, onMessageClick }: { agent: AgentPublicProfile; onMessageClick: () => void }) {
   return (
     <Card>
       <CardHeader>
@@ -299,7 +322,7 @@ function ContactCard({ agent }: { agent: AgentPublicProfile }) {
             Gọi ngay
           </Button>
         </a>
-        <Button variant="outline" className="w-full gap-2">
+        <Button variant="outline" className="w-full gap-2" onClick={onMessageClick}>
           <MessageSquare className="h-4 w-4" />
           Nhắn tin
         </Button>