diff --git a/frontend/src/components/admin/SettingsManager.tsx b/frontend/src/components/admin/SettingsManager.tsx
new file mode 100644
index 0000000..835c6ee
--- /dev/null
+++ b/frontend/src/components/admin/SettingsManager.tsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+export default function SettingsManager() {
+    const [activeTab, setActiveTab] = useState('general');
+    const [health, setHealth] = useState<any>(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        checkHealth();
+    }, []);
+
+    const checkHealth = async () => {
+        setLoading(true);
+        try {
+            const start = Date.now();
+            const res = await fetch('/api/seo/stats');
+            const latency = Date.now() - start;
+            const data = await res.json();
+            setHealth({
+                api: res.ok,
+                latency,
+                version: '1.0.0',
+                directus: data.success ? 'Connected' : 'Error',
+                env: process.env.NODE_ENV || 'production'
+            });
+        } catch (e: any) {
+            setHealth({ api: false, error: e.message });
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div className="space-y-6">
+            <h1 className="text-3xl font-bold text-white">System Settings</h1>
+
+            {/* Tabs */}
+            <div className="flex border-b border-slate-700 space-x-6">
+                <button
+                    onClick={() => setActiveTab('general')}
+                    className={`pb-3 px-1 text-sm font-medium transition-colors ${activeTab === 'general' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
+                >
+                    General
+                </button>
+                <button
+                    onClick={() => setActiveTab('health')}
+                    className={`pb-3 px-1 text-sm font-medium transition-colors ${activeTab === 'health' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
+                >
+                    System Health
+                </button>
+            </div>
+
+            {/* General Tab */}
+            {activeTab === 'general' && (
+                <div className="grid gap-6">
+                    <Card className="bg-slate-900 border-slate-800">
+                        <CardHeader>
+                            <CardTitle className="text-white">Admin Profile</CardTitle>
+                            <CardDescription>Current session information</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-slate-400">Role</label>
+                                    <div className="p-2 bg-slate-950 border border-slate-800 rounded text-white">Administrator</div>
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-slate-400">Access Level</label>
+                                    <div className="p-2 bg-slate-950 border border-slate-800 rounded text-white">Full System Access</div>
+                                </div>
+                            </div>
+                            <div className="pt-4">
+                                <Button variant="outline" className="border-slate-700 text-slate-300 hover:bg-slate-800" onClick={() => window.open('https://spark.jumpstartscaling.com/admin/users', '_blank')}>
+                                    Manage Users in Directus ↗
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="bg-slate-900 border-slate-800">
+                        <CardHeader>
+                            <CardTitle className="text-white">Configuration</CardTitle>
+                            <CardDescription>Global system defaults</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-sm text-slate-400 mb-4">
+                                Configuration for API limits, default SEO constraints, and other system-wide constants are managed via Environment Variables or the Directus Settings collection.
+                            </div>
+                            <Button className="bg-slate-800 hover:bg-slate-700 mx-2" onClick={() => window.open('https://spark.jumpstartscaling.com/admin/settings', '_blank')}>
+                                Open Directus Settings ↗
+                            </Button>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+
+            {/* Health Tab */}
+            {activeTab === 'health' && (
+                <div className="grid gap-6">
+                    <Card className="bg-slate-900 border-slate-800">
+                        <CardHeader>
+                            <CardTitle className="text-white">System Diagnostics</CardTitle>
+                            <div className="flex justify-between items-center">
+                                <CardDescription>Real-time system status check</CardDescription>
+                                <Button size="sm" onClick={checkHealth} disabled={loading}>
+                                    {loading ? 'Checking...' : 'Refresh Status'}
+                                </Button>
+                            </div>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
+                                    <span className="text-slate-300">API Connectivity</span>
+                                    {health?.api ? (
+                                        <Badge className="bg-green-600">Online ({health.latency}ms)</Badge>
+                                    ) : (
+                                        <Badge variant="destructive">Offline</Badge>
+                                    )}
+                                </div>
+                                <div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
+                                    <span className="text-slate-300">Directus Backend</span>
+                                    <Badge className={health?.directus === 'Connected' ? 'bg-green-600' : 'bg-red-600'}>
+                                        {health?.directus || 'Checking...'}
+                                    </Badge>
+                                </div>
+                                <div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
+                                    <span className="text-slate-300">Frontend Version</span>
+                                    <span className="text-white font-mono">{health?.version || '1.0.0'}</span>
+                                </div>
+                                <div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
+                                    <span className="text-slate-300">Environment</span>
+                                    <span className="text-white font-mono uppercase">{health?.env || 'PRODUCTION'}</span>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/pages/admin/settings.astro b/frontend/src/pages/admin/settings.astro
index f3cf16b..5cde7fd 100644
--- a/frontend/src/pages/admin/settings.astro
+++ b/frontend/src/pages/admin/settings.astro
@@ -1,19 +1,9 @@
 ---
 import Layout from '@/layouts/AdminLayout.astro';
+import SettingsManager from '@/components/admin/SettingsManager';
 ---
-
 <Layout title="System Settings">
-  <div class="p-6">
-    <h1 class="text-3xl font-bold text-slate-100 mb-6">System Settings</h1>
-    
-    <div class="bg-slate-800 rounded-lg border border-slate-700 p-8 text-center">
-        <div class="w-16 h-16 bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
-        </div>
-        <h2 class="text-xl font-bold text-white mb-2">Global Configuration</h2>
-        <p class="text-slate-400 max-w-md mx-auto">
-            System-wide settings for API keys, user management, and global defaults will go here.
-        </p>
-    </div>
+  <div class="p-8">
+     <SettingsManager client:load />
   </div>
 </Layout>