diff --git a/frontend/src/components/admin/content/AvatarManager.tsx b/frontend/src/components/admin/content/AvatarManager.tsx
new file mode 100644
index 0000000..bba91f0
--- /dev/null
+++ b/frontend/src/components/admin/content/AvatarManager.tsx
@@ -0,0 +1,165 @@
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { getDirectusClient } from '@/lib/directus/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+export default function AvatarManager() {
+    const [avatars, setAvatars] = useState([]);
+    const [variants, setVariants] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [selectedAvatar, setSelectedAvatar] = useState(null);
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        try {
+            const directus = await getDirectusClient();
+
+            // Load avatars
+            const avatarData = await directus.request({
+                method: 'GET',
+                path: '/items/avatar_intelligence'
+            });
+            setAvatars(avatarData.data || []);
+
+            // Load variants
+            const variantData = await directus.request({
+                method: 'GET',
+                path: '/items/avatar_variants'
+            });
+            setVariants(variantData.data || []);
+
+            setLoading(false);
+        } catch (error) {
+            console.error('Error loading avatars:', error);
+            setLoading(false);
+        }
+    };
+
+    const getVariantsForAvatar = (avatarKey) => {
+        return variants.filter(v => v.avatar_key === avatarKey);
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <div className="text-white">Loading avatars...</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Summary Stats */}
+            <div className="grid grid-cols-3 gap-4">
+                <Card className="bg-slate-800 border-slate-700">
+                    <CardContent className="p-6">
+                        <div className="text-3xl font-bold text-white">{avatars.length}</div>
+                        <div className="text-sm text-slate-400">Base Avatars</div>
+                    </CardContent>
+                </Card>
+                <Card className="bg-slate-800 border-slate-700">
+                    <CardContent className="p-6">
+                        <div className="text-3xl font-bold text-white">{variants.length}</div>
+                        <div className="text-sm text-slate-400">Total Variants</div>
+                    </CardContent>
+                </Card>
+                <Card className="bg-slate-800 border-slate-700">
+                    <CardContent className="p-6">
+                        <div className="text-3xl font-bold text-white">
+                            {avatars.reduce((sum, a) => sum + (a.business_niches?.length || 0), 0)}
+                        </div>
+                        <div className="text-sm text-slate-400">Business Niches</div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            {/* Avatar List */}
+            <div className="grid grid-cols-2 gap-6">
+                {avatars.map((avatar) => {
+                    const avatarVariants = getVariantsForAvatar(avatar.avatar_key);
+
+                    return (
+                        <Card
+                            key={avatar.id}
+                            className="bg-slate-800 border-slate-700 hover:border-blue-500 transition-colors cursor-pointer"
+                            onClick={() => setSelectedAvatar(selectedAvatar === avatar.avatar_key ? null : avatar.avatar_key)}
+                        >
+                            <CardHeader>
+                                <CardTitle className="text-white flex items-center justify-between">
+                                    <span>{avatar.base_name}</span>
+                                    <Badge variant="outline" className="text-blue-400 border-blue-400">
+                                        {avatar.wealth_cluster}
+                                    </Badge>
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                {/* Avatar Key */}
+                                <div>
+                                    <div className="text-xs text-slate-500 mb-1">Avatar Key</div>
+                                    <code className="text-sm text-green-400 bg-slate-900 px-2 py-1 rounded">
+                                        {avatar.avatar_key}
+                                    </code>
+                                </div>
+
+                                {/* Business Niches */}
+                                <div>
+                                    <div className="text-xs text-slate-500 mb-2">
+                                        Business Niches ({avatar.business_niches?.length || 0})
+                                    </div>
+                                    <div className="flex flex-wrap gap-2">
+                                        {(avatar.business_niches || []).slice(0, 5).map((niche, i) => (
+                                            <Badge key={i} variant="secondary" className="bg-slate-700 text-slate-300">
+                                                {niche}
+                                            </Badge>
+                                        ))}
+                                        {(avatar.business_niches?.length || 0) > 5 && (
+                                            <Badge variant="secondary" className="bg-slate-700 text-slate-400">
+                                                +{avatar.business_niches.length - 5} more
+                                            </Badge>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Variants */}
+                                {selectedAvatar === avatar.avatar_key && (
+                                    <div className="mt-4 pt-4 border-t border-slate-700">
+                                        <div className="text-xs text-slate-500 mb-2">
+                                            Variants ({avatarVariants.length})
+                                        </div>
+                                        <div className="space-y-2">
+                                            {avatarVariants.map((variant) => (
+                                                <div
+                                                    key={variant.id}
+                                                    className="bg-slate-900 p-3 rounded border border-slate-700"
+                                                >
+                                                    <div className="flex items-center justify-between mb-2">
+                                                        <Badge className="bg-purple-600">
+                                                            {variant.variant_type}
+                                                        </Badge>
+                                                        <span className="text-xs text-slate-400">
+                                                            {variant.data?.pronoun || 'N/A'}
+                                                        </span>
+                                                    </div>
+                                                    <div className="text-xs text-slate-400 space-y-1">
+                                                        <div>Identity: <span className="text-slate-300">{variant.data?.identity}</span></div>
+                                                        <div>Pronouns: <span className="text-slate-300">
+                                                            {variant.data?.pronoun}/{variant.data?.ppronoun}/{variant.data?.pospronoun}
+                                                        </span></div>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/pages/admin/content/avatars.astro b/frontend/src/pages/admin/content/avatars.astro
index fd5f7e3..12122fe 100644
--- a/frontend/src/pages/admin/content/avatars.astro
+++ b/frontend/src/pages/admin/content/avatars.astro
@@ -1,13 +1,14 @@
 
 ---
 import Layout from '@/layouts/AdminLayout.astro';
+import AvatarManager from '@/components/admin/content/AvatarManager';
 ---
 <Layout title="Avatars Intelligence">
   <div class="p-8">
-    <h1 class="text-3xl font-bold text-white mb-4">Avatars</h1>
-    <p class="text-gray-400">Manage your 10 Base Avatars and Intelligence here.</p>
-    <div class="mt-8 p-6 bg-gray-800 rounded-xl border border-gray-700">
-      <p class="text-yellow-400">🚧 Intelligence Station Under Construction</p>
+    <div class="mb-6">
+      <h1 class="text-3xl font-bold text-white mb-2">Avatar Intelligence</h1>
+      <p class="text-gray-400">Manage your 10 base avatars, variants, and business niches.</p>
     </div>
+    <AvatarManager client:load />
   </div>
 </Layout>