diff --git a/apps/dashboard/src/components/agents/agent-behavior-section.tsx b/apps/dashboard/src/components/agents/agent-behavior-section.tsx
new file mode 100644
index 00000000000..d7da479bf9d
--- /dev/null
+++ b/apps/dashboard/src/components/agents/agent-behavior-section.tsx
@@ -0,0 +1,92 @@
+import { RiExpandUpDownLine } from 'react-icons/ri';
+import { HelpTooltipIndicator } from '@/components/primitives/help-tooltip-indicator';
+import { Switch } from '@/components/primitives/switch';
+
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center px-2 py-1.5">
+      <span className="text-text-soft font-code text-[11px] font-medium uppercase leading-4 tracking-wider">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+function ToggleRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-2 py-1">
+      <div className="flex flex-1 items-center gap-1">
+        <span className="text-text-sub text-label-sm font-medium">{label}</span>
+        <HelpTooltipIndicator text={label} size="5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function EmojiPickerButton({ emoji }: { emoji: string }) {
+  return (
+    <button
+      type="button"
+      className="border-stroke-soft bg-bg-white flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-[3px] shadow-xs"
+    >
+      <span className="text-label-sm leading-5">{emoji}</span>
+      <RiExpandUpDownLine className="text-text-soft size-3" />
+    </button>
+  );
+}
+
+export function AgentBehaviorSection() {
+  return (
+    <div className="bg-bg-weak flex flex-col rounded-[10px] p-1">
+      <SectionHeader>Agent behavior</SectionHeader>
+      <div className="bg-bg-white flex flex-col overflow-hidden rounded-md shadow-[0px_0px_0px_1px_rgba(25,28,33,0.04),0px_1px_2px_0px_rgba(25,28,33,0.06),0px_0px_2px_0px_rgba(0,0,0,0.08)]">
+        {/*
+        Interrupt mode and response timeout are not supported yet.
+
+        <div className="border-stroke-weak flex flex-col gap-3 border-b p-3">
+          <SettingRow
+            label="Interrupt mode"
+            description="What happens when a new message arrives while the agent is still responding."
+          >
+            <Select defaultValue="drop_respond">
+              <SelectTrigger
+                className="border-stroke-soft bg-bg-white text-text-strong text-label-sm h-8 w-full rounded-md shadow-xs"
+                rightIcon={<RiExpandUpDownLine className="text-text-soft size-3" />}
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="drop_respond">Drop and respond new message</SelectItem>
+                <SelectItem value="queue">Queue and respond in order</SelectItem>
+                <SelectItem value="ignore">Ignore new message</SelectItem>
+              </SelectContent>
+            </Select>
+          </SettingRow>
+
+          <SettingRow label="Response timeout">
+            <div className="border-stroke-soft bg-bg-white flex h-8 w-full items-center justify-between overflow-hidden rounded-md border px-2 shadow-xs">
+              <span className="text-text-strong text-label-sm font-medium">30</span>
+              <span className="text-text-soft text-label-sm font-medium">seconds</span>
+            </div>
+          </SettingRow>
+        </div>
+        */}
+
+        <div className="flex flex-col gap-2 p-3">
+          <ToggleRow label={'Show "Typing..." indicator when available'}>
+            <Switch defaultChecked />
+          </ToggleRow>
+
+          <ToggleRow label="React to incoming messages so users know the agent received them">
+            <EmojiPickerButton emoji="👀" />
+          </ToggleRow>
+
+          <ToggleRow label="React to the final message when a conversation is resolved">
+            <EmojiPickerButton emoji="✅" />
+          </ToggleRow>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/agents/agent-connected-overview.tsx b/apps/dashboard/src/components/agents/agent-connected-overview.tsx
new file mode 100644
index 00000000000..e2f2b1b8e84
--- /dev/null
+++ b/apps/dashboard/src/components/agents/agent-connected-overview.tsx
@@ -0,0 +1,18 @@
+import type { AgentResponse } from '@/api/agents';
+import { AgentBehaviorSection } from './agent-behavior-section';
+import { ConnectedProvidersSection } from './connected-providers-section';
+import { RecentConversationsSection } from './recent-conversations-section';
+
+type AgentConnectedOverviewProps = {
+  agent: AgentResponse;
+};
+
+export function AgentConnectedOverview({ agent }: AgentConnectedOverviewProps) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
+      <AgentBehaviorSection />
+      <ConnectedProvidersSection agent={agent} />
+      <RecentConversationsSection agent={agent} />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/agents/agent-overview-tab.tsx b/apps/dashboard/src/components/agents/agent-overview-tab.tsx
index 626bf893105..ef62432661f 100644
--- a/apps/dashboard/src/components/agents/agent-overview-tab.tsx
+++ b/apps/dashboard/src/components/agents/agent-overview-tab.tsx
@@ -1,4 +1,5 @@
 import type { AgentResponse } from '@/api/agents';
+import { AgentConnectedOverview } from '@/components/agents/agent-connected-overview';
 import { AgentSetupGuide } from '@/components/agents/agent-setup-guide';
 import { AgentSidebarWidget } from '@/components/agents/agent-sidebar-widget';
 
@@ -7,10 +8,12 @@ type AgentOverviewTabProps = {
 };
 
 export function AgentOverviewTab({ agent }: AgentOverviewTabProps) {
+  const isBridgeConnected = Boolean(agent.bridgeUrl || (agent.devBridgeActive && agent.devBridgeUrl));
+
   return (
     <div className="flex gap-6 px-6 pt-4">
       <AgentSidebarWidget agent={agent} />
-      <AgentSetupGuide agent={agent} />
+      {isBridgeConnected ? <AgentConnectedOverview agent={agent} /> : <AgentSetupGuide agent={agent} />}
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/agents/agent-setup-guide.tsx b/apps/dashboard/src/components/agents/agent-setup-guide.tsx
index fd1ab8e5234..870dd61c386 100644
--- a/apps/dashboard/src/components/agents/agent-setup-guide.tsx
+++ b/apps/dashboard/src/components/agents/agent-setup-guide.tsx
@@ -1,7 +1,9 @@
 import { ChatProviderIdEnum } from '@novu/shared';
+import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { RiExpandUpDownLine } from 'react-icons/ri';
-import { type AgentResponse } from '@/api/agents';
+import { type AgentResponse, getAgentIntegrationsQueryKey, listAgentIntegrations } from '@/api/agents';
+import { requireEnvironment, useEnvironment } from '@/context/environment/hooks';
 import { useFetchIntegrations } from '@/hooks/use-fetch-integrations';
 import { cn } from '@/utils/ui';
 import { AgentCodeSetupSection } from './agent-code-setup-section';
@@ -23,12 +25,45 @@ function resolveProviderSetupGuide(providerId: string) {
   }
 }
 
+function AgentSetupGuideComingSoon() {
+
+  return (
+    <div className="border-stroke-soft bg-bg-weak/30 flex flex-col items-center justify-center rounded-md border border-dashed px-6 py-12 text-center">
+      <p className="text-text-strong text-label-sm font-medium">Coming soon</p>
+      <p className="text-text-soft text-label-xs mt-2 max-w-sm leading-5">
+        In-dashboard setup steps will return here as we expand agent tooling.
+      </p>
+    </div>
+  );
+}
+
 export function AgentSetupGuide({ agent }: AgentSetupGuideProps) {
   const [isExpanded, setIsExpanded] = useState(true);
   const [selectedIntegrationId, setSelectedIntegrationId] = useState<string | undefined>(undefined);
   const [isProviderComplete, setIsProviderComplete] = useState(false);
+  const { currentEnvironment } = useEnvironment();
   const { integrations } = useFetchIntegrations();
 
+  const agentIntegrationsQuery = useQuery({
+    queryKey: getAgentIntegrationsQueryKey(currentEnvironment?._id, agent.identifier),
+    queryFn: () =>
+      listAgentIntegrations({
+        environment: requireEnvironment(currentEnvironment, 'No environment selected'),
+        agentIdentifier: agent.identifier,
+        limit: 100,
+      }),
+    enabled: Boolean(currentEnvironment && agent.identifier),
+  });
+
+  const hasConnectedIntegration = useMemo(() => {
+    if (isProviderComplete) return true;
+
+    const links = agentIntegrationsQuery.data?.data;
+    if (!links?.length) return false;
+
+    return links.some((link) => Boolean(link.connectedAt));
+  }, [isProviderComplete, agentIntegrationsQuery.data?.data]);
+
   const slackFromAgent = agent.integrations?.find((i) => i.providerId === ChatProviderIdEnum.Slack);
 
   const effectiveIntegrationId = selectedIntegrationId ?? slackFromAgent?.integrationId;
@@ -56,6 +91,8 @@ export function AgentSetupGuide({ agent }: AgentSetupGuideProps) {
     setIsProviderComplete(true);
   }, []);
 
+  const isBridgeConnected = Boolean(agent.bridgeUrl || (agent.devBridgeActive && agent.devBridgeUrl));
+
   return (
     <div className="bg-bg-weak flex min-w-0 flex-1 flex-col rounded-[10px] p-1">
       <button
@@ -69,46 +106,52 @@ export function AgentSetupGuide({ agent }: AgentSetupGuideProps) {
 
       {isExpanded && (
         <div className="bg-bg-white flex flex-col gap-0 overflow-hidden rounded-md p-3 shadow-[0px_0px_0px_1px_rgba(25,28,33,0.04),0px_1px_2px_0px_rgba(25,28,33,0.06),0px_0px_2px_0px_rgba(0,0,0,0.08)]">
-          <div className="relative flex flex-col gap-10 py-6 pb-3 pl-8 pr-6">
-            <div
-              className="absolute bottom-0 left-[22px] top-0 w-px"
-              style={{
-                background: 'linear-gradient(to bottom, transparent 0%, #E1E4EA 10%, #E1E4EA 90%, transparent 100%)',
-              }}
-            />
-
-            <SetupStep
-              index={1}
-              status={deriveStepStatus(1, firstIncompleteStepForProviderRow)}
-              sectionLabel="1/2 SETUP PROVIDER"
-              title="Choose where your agent listens and communicates"
-              description="Start with one provider your agent can receive and respond on and you can always add more providers as you need."
-              rightContent={
-                <ProviderDropdown
-                  agentIdentifier={agent.identifier}
-                  selectedIntegrationId={selectedIntegrationId ?? slackFromAgent?.integrationId}
-                  linkedIntegrationIds={linkedIntegrationIds}
-                  onSelect={(_providerId, integration) => {
-                    if (integration?._id) {
-                      setSelectedIntegrationId(integration._id);
-                    }
-                  }}
-                />
-              }
-            />
-
-            {ProviderGuide && effectiveIntegrationId ? (
-              <ProviderGuide
-                agent={agent}
-                integrationId={effectiveIntegrationId}
-                stepOffset={2}
-                embedded={false}
-                onStepsCompleted={handleProviderStepsCompleted}
+          {isBridgeConnected ? (
+            <AgentSetupGuideComingSoon />
+          ) : (
+            <div className="relative flex flex-col gap-10 py-6 pb-3 pl-8 pr-6">
+              <div
+                className="absolute bottom-0 left-[22px] top-0 w-px"
+                style={{
+                  background: 'linear-gradient(to bottom, transparent 0%, #E1E4EA 10%, #E1E4EA 90%, transparent 100%)',
+                }}
               />
-            ) : null}
 
-            <AgentCodeSetupSection agent={agent} stepOffset={5} isProviderComplete={isProviderComplete} />
-          </div>
+              <SetupStep
+                index={1}
+                status={deriveStepStatus(1, firstIncompleteStepForProviderRow)}
+                sectionLabel="1/2 SETUP PROVIDER"
+                title="Choose where your agent listens and communicates"
+                description="Start with one provider your agent can receive and respond on and you can always add more providers as you need."
+                rightContent={
+                  <ProviderDropdown
+                    agentIdentifier={agent.identifier}
+                    selectedIntegrationId={selectedIntegrationId ?? slackFromAgent?.integrationId}
+                    linkedIntegrationIds={linkedIntegrationIds}
+                    onSelect={(_providerId, integration) => {
+                      if (integration?._id) {
+                        setSelectedIntegrationId(integration._id);
+                      }
+                    }}
+                  />
+                }
+              />
+
+              {ProviderGuide && effectiveIntegrationId ? (
+                <ProviderGuide
+                  agent={agent}
+                  integrationId={effectiveIntegrationId}
+                  stepOffset={2}
+                  embedded={false}
+                  onStepsCompleted={handleProviderStepsCompleted}
+                />
+              ) : null}
+
+              {hasConnectedIntegration && (
+                <AgentCodeSetupSection agent={agent} stepOffset={5} isProviderComplete={hasConnectedIntegration} />
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/apps/dashboard/src/components/agents/connected-providers-section.tsx b/apps/dashboard/src/components/agents/connected-providers-section.tsx
new file mode 100644
index 00000000000..b8f63d44494
--- /dev/null
+++ b/apps/dashboard/src/components/agents/connected-providers-section.tsx
@@ -0,0 +1,135 @@
+import { providers as novuProviders } from '@novu/shared';
+import { useQuery } from '@tanstack/react-query';
+import { RiAddLine, RiArrowRightLine, RiArrowRightSLine } from 'react-icons/ri';
+import { Link, useLocation } from 'react-router-dom';
+import {
+  type AgentResponse,
+  type AgentIntegrationLink,
+  getAgentIntegrationsQueryKey,
+  listAgentIntegrations,
+} from '@/api/agents';
+import { ProviderIcon } from '@/components/integrations/components/provider-icon';
+import { Skeleton } from '@/components/primitives/skeleton';
+import { requireEnvironment, useEnvironment } from '@/context/environment/hooks';
+import { buildRoute, ROUTES } from '@/utils/routes';
+
+type ConnectedProvidersSectionProps = {
+  agent: AgentResponse;
+};
+
+function ProviderCard({ link }: { link: AgentIntegrationLink }) {
+  const providerMeta = novuProviders.find((p) => p.id === link.integration.providerId);
+  const displayName = providerMeta?.displayName ?? link.integration.name;
+
+  return (
+    <div className="flex min-w-[150px] max-w-[160px] flex-1 flex-col gap-1.5">
+      <div
+        className="border-stroke-soft/50 flex min-h-[80px] items-center justify-center rounded-lg border-[0.5px] px-6 py-4"
+        style={{
+          backgroundImage:
+            'linear-gradient(22deg, rgba(200,200,200,0) 51%, rgba(200,200,200,0.1) 88%), linear-gradient(90deg, rgba(251,251,251,0.1) 0%, rgba(251,251,251,0.1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)',
+        }}
+      >
+        <div className="flex size-10 items-center justify-center overflow-hidden rounded-full bg-white p-2 shadow-[0px_0.75px_1px_0.5px_rgba(41,41,41,0.04),0px_1.5px_1.5px_-0.75px_rgba(41,41,41,0.02),0px_3px_3px_-1.5px_rgba(41,41,41,0.04),0px_6px_6px_-3px_rgba(41,41,41,0.04),0px_12px_12px_-6px_rgba(41,41,41,0.04),0px_24px_24px_-12px_rgba(41,41,41,0.04),0px_0px_0px_8px_rgba(41,41,41,0.04)]">
+          <ProviderIcon
+            providerId={link.integration.providerId}
+            providerDisplayName={displayName}
+            className="size-5"
+          />
+        </div>
+      </div>
+      <span className="text-text-strong text-label-xs font-medium leading-4">{displayName}</span>
+    </div>
+  );
+}
+
+function AddProviderCard({ to }: { to: string }) {
+  return (
+    <Link to={to} className="flex min-w-[150px] max-w-[160px] flex-1 flex-col gap-1.5">
+      <div
+        className="border-stroke-soft/50 flex min-h-[80px] items-center justify-center rounded-lg border-[0.5px] px-6 py-4"
+        style={{
+          backgroundImage:
+            'linear-gradient(22deg, rgba(200,200,200,0) 51%, rgba(200,200,200,0.1) 88%), linear-gradient(90deg, rgba(251,251,251,0.1) 0%, rgba(251,251,251,0.1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)',
+        }}
+      >
+        <div className="flex size-10 items-center justify-center rounded-full bg-white">
+          <RiAddLine className="text-text-sub size-4" />
+        </div>
+      </div>
+      <div className="flex items-center gap-1">
+        <span className="text-text-sub text-label-xs flex-1 font-medium leading-4">Add new provider</span>
+        <RiArrowRightSLine className="text-text-sub size-4 shrink-0" />
+      </div>
+    </Link>
+  );
+}
+
+function ProviderCardSkeleton() {
+  return (
+    <div className="flex min-w-[150px] max-w-[160px] flex-1 flex-col gap-1.5">
+      <Skeleton className="h-[80px] w-full rounded-lg" />
+      <Skeleton className="h-4 w-16 rounded" />
+    </div>
+  );
+}
+
+export function ConnectedProvidersSection({ agent }: ConnectedProvidersSectionProps) {
+  const { currentEnvironment } = useEnvironment();
+  const location = useLocation();
+
+  const integrationsQuery = useQuery({
+    queryKey: getAgentIntegrationsQueryKey(currentEnvironment?._id, agent.identifier),
+    queryFn: () =>
+      listAgentIntegrations({
+        environment: requireEnvironment(currentEnvironment, 'No environment selected'),
+        agentIdentifier: agent.identifier,
+        limit: 100,
+      }),
+    enabled: Boolean(currentEnvironment && agent.identifier),
+  });
+
+  const integrationsTabPath = `${buildRoute(ROUTES.AGENT_DETAILS_TAB, {
+    environmentSlug: currentEnvironment?.slug ?? '',
+    agentIdentifier: encodeURIComponent(agent.identifier),
+    agentTab: 'integrations',
+  })}${location.search}`;
+
+  const links = integrationsQuery.data?.data ?? [];
+  const isLoading = integrationsQuery.isLoading;
+
+  return (
+    <div className="bg-bg-weak flex flex-col rounded-[10px] p-1">
+      <div className="flex items-center justify-between px-2 py-1.5">
+        <span className="text-text-soft font-code text-[11px] font-medium uppercase leading-4 tracking-wider">
+          Connected providers
+        </span>
+        <Link
+          to={integrationsTabPath}
+          className="text-text-sub hover:text-text-strong flex items-center gap-0.5 rounded-lg p-1.5 text-label-xs font-medium transition-colors"
+        >
+          Manage integrations
+          <RiArrowRightLine className="size-4" />
+        </Link>
+      </div>
+
+      <div className="bg-bg-white overflow-hidden rounded-md shadow-[0px_0px_0px_1px_rgba(25,28,33,0.04),0px_1px_2px_0px_rgba(25,28,33,0.06),0px_0px_2px_0px_rgba(0,0,0,0.08)]">
+        <div className="flex flex-wrap gap-4 p-3">
+          {isLoading ? (
+            <>
+              <ProviderCardSkeleton />
+              <ProviderCardSkeleton />
+            </>
+          ) : (
+            <>
+              {links.map((link) => (
+                <ProviderCard key={link._id} link={link} />
+              ))}
+              <AddProviderCard to={integrationsTabPath} />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/agents/recent-conversations-section.tsx b/apps/dashboard/src/components/agents/recent-conversations-section.tsx
new file mode 100644
index 00000000000..3e90d97e7ae
--- /dev/null
+++ b/apps/dashboard/src/components/agents/recent-conversations-section.tsx
@@ -0,0 +1,113 @@
+import { RiArrowRightLine, RiRobot2Line } from 'react-icons/ri';
+import { Link, useLocation } from 'react-router-dom';
+import type { AgentResponse } from '@/api/agents';
+import { useEnvironment } from '@/context/environment/hooks';
+import { buildRoute, ROUTES } from '@/utils/routes';
+
+type RecentConversationsSectionProps = {
+  agent: AgentResponse;
+};
+
+function SkeletonBar({ className }: { className?: string }) {
+  return (
+    <div
+      className={className}
+      style={{
+        background: 'linear-gradient(90deg, #f1efef 24%, #f9f8f8 43%, rgba(249,248,248,0.75) 115%)',
+      }}
+    />
+  );
+}
+
+function SkeletonMessageCard({ className }: { className?: string }) {
+  return (
+    <div className={`border-stroke-soft rounded border bg-white p-2 ${className ?? ''}`}>
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <div className="bg-bg-weak size-3 rounded-full" />
+          <SkeletonBar className="h-2 w-11 rounded-sm" />
+        </div>
+        <div className="flex flex-wrap gap-x-0.5 gap-y-[3px]">
+          <SkeletonBar className="h-1.5 w-[77px] rounded-full" />
+          <SkeletonBar className="h-1.5 min-w-0 flex-1 rounded-full" />
+          <SkeletonBar className="h-1.5 min-w-[50px] flex-1 rounded-full" />
+          <SkeletonBar className="h-1.5 w-[91px] rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NovuIcon() {
+  return (
+    <svg className="size-3" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8Zm3.53 11.53L8 8.06l-3.53 3.47L3.06 10.12 6.53 6.65 3.06 3.18l1.41-1.41L8 5.24l3.53-3.47 1.41 1.41L9.47 6.65l3.47 3.47-1.41 1.41Z"
+        fill="currentColor"
+        className="text-text-soft"
+      />
+    </svg>
+  );
+}
+
+function EmptyStateIllustration() {
+  return (
+    <div className="flex flex-col items-center gap-12">
+      <div className="flex flex-col items-center">
+        <div className="border-stroke-weak rounded-lg border p-1">
+          <SkeletonMessageCard className="w-[197px]" />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-[50px]">
+        <div className="border-stroke-weak w-[136px] rounded-lg border border-dashed p-0.5">
+          <div className="border-stroke-soft bg-bg-white flex h-[47px] items-center justify-center gap-6 rounded-md border p-3">
+            <RiRobot2Line className="text-text-soft size-4" />
+            <NovuIcon />
+          </div>
+        </div>
+
+        <div className="border-stroke-weak rounded-lg border p-1">
+          <SkeletonMessageCard className="w-[197px]" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RecentConversationsSection({ agent }: RecentConversationsSectionProps) {
+  const { currentEnvironment } = useEnvironment();
+  const location = useLocation();
+
+  const activityTabPath = `${buildRoute(ROUTES.AGENT_DETAILS_TAB, {
+    environmentSlug: currentEnvironment?.slug ?? '',
+    agentIdentifier: encodeURIComponent(agent.identifier),
+    agentTab: 'activity',
+  })}${location.search}`;
+
+  return (
+    <div className="bg-bg-weak flex flex-col rounded-[10px] p-1">
+      <div className="flex items-center justify-between px-2 py-1.5">
+        <span className="text-text-soft font-code text-[11px] font-medium uppercase leading-4 tracking-wider">
+          Recent conversations
+        </span>
+        <Link
+          to={activityTabPath}
+          className="text-text-sub hover:text-text-strong flex items-center gap-0.5 rounded-lg p-1.5 text-label-xs font-medium transition-colors"
+        >
+          View all activity
+          <RiArrowRightLine className="size-4" />
+        </Link>
+      </div>
+
+      <div className="bg-bg-white flex h-[300px] flex-col items-center justify-center overflow-hidden rounded-md shadow-[0px_0px_0px_1px_rgba(25,28,33,0.04),0px_1px_2px_0px_rgba(25,28,33,0.06),0px_0px_2px_0px_rgba(0,0,0,0.08)]">
+        <div className="flex flex-1 flex-col items-center justify-center gap-6 p-4">
+          <EmptyStateIllustration />
+          <p className="text-text-soft text-label-xs max-w-[400px] text-center font-medium leading-4">
+            No conversations, agent conversations will appear here once the agent starts responding to messages.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}