diff --git a/src/pages/agent-office/components/PlaceholderCard.jsx b/src/pages/agent-office/components/PlaceholderCard.jsx
new file mode 100644
index 0000000..7afd731
--- /dev/null
+++ b/src/pages/agent-office/components/PlaceholderCard.jsx
@@ -0,0 +1,17 @@
+// src/pages/agent-office/components/PlaceholderCard.jsx
+import { PLACEHOLDER_IMAGE, PLACEHOLDER_LABEL } from '../constants.js';
+
+export default function PlaceholderCard({ active = false, onClick }) {
+  return (
+    <button
+      type="button"
+      className={`ao-card placeholder${active ? ' active' : ''}`}
+      onClick={onClick}
+    >
+      <div className="ao-card-image">
+        <img src={PLACEHOLDER_IMAGE} alt={PLACEHOLDER_LABEL} />
+      </div>
+      <div className="ao-card-name">{PLACEHOLDER_LABEL}</div>
+    </button>
+  );
+}