diff --git a/src/pages/agent-office/components/AgentGrid.jsx b/src/pages/agent-office/components/AgentGrid.jsx
new file mode 100644
index 0000000..6497802
--- /dev/null
+++ b/src/pages/agent-office/components/AgentGrid.jsx
@@ -0,0 +1,33 @@
+// src/pages/agent-office/components/AgentGrid.jsx
+import { GRID_SLOTS } from '../constants.js';
+import AgentCard from './AgentCard.jsx';
+import PlaceholderCard from './PlaceholderCard.jsx';
+
+export default function AgentGrid({ agents, notifications, selectedAgent, onSelectAgent, onSelectPlaceholder }) {
+  return (
+    <div className="ao-grid">
+      {GRID_SLOTS.map((slot, idx) => {
+        if (slot.agentId === null) {
+          const placeholderKey = `placeholder-${idx}`;
+          return (
+            <PlaceholderCard
+              key={placeholderKey}
+              active={selectedAgent === placeholderKey}
+              onClick={() => onSelectPlaceholder(placeholderKey)}
+            />
+          );
+        }
+        return (
+          <AgentCard
+            key={slot.agentId}
+            agentId={slot.agentId}
+            agentState={agents[slot.agentId]}
+            notificationCount={notifications[slot.agentId] || 0}
+            active={selectedAgent === slot.agentId}
+            onClick={() => onSelectAgent(slot.agentId)}
+          />
+        );
+      })}
+    </div>
+  );
+}