diff --git a/elastic-recorder-dashboard.html b/elastic-recorder-dashboard.html
new file mode 100644
index 0000000..bc96c9b
--- /dev/null
+++ b/elastic-recorder-dashboard.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elastic Recorder Control Dashboard</title>
+    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/react.production.min.js"></script>
+    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/react-dom.production.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        // Icon components
+        const Icons = {
+            RefreshCw: () => `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>`,
+            Settings: () => `<svg class="w-4 h-4" 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>`,
+            Save: () => `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>`,
+            AlertCircle: () => `<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
+            CheckCircle: () => `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`
+        };
+    </script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: system-ui, -apple-system, sans-serif; }
+        .spinner { animation: spin 1s linear infinite; }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+<div id="root"></div>
+
+<script type="module">
+    const { useState, useCallback } = React;
+
+    function ElasticRecorderDashboard() {
+        const [apiKey, setApiKey] = useState('');
+        const [baseUrl, setBaseUrl] = useState('https://us-east-1.gvampp.com');
+        const [channels, setChannels] = useState([]);
+        const [loading, setLoading] = useState(false);
+        const [authenticated, setAuthenticated] = useState(false);
+        const [error, setError] = useState('');
+        const [success, setSuccess] = useState('');
+        const [editingId, setEditingId] = useState(null);
+        const [editForm, setEditForm] = useState({});
+
+        const getToken = useCallback(async () => {
+            try {
+                const response = await fetch(`${baseUrl}/identity/connect/token`, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Basic ${apiKey}`,
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: new URLSearchParams({
+                        grant_type: 'client_credentials',
+                        scope: 'platform'
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Authentication failed: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                return data.access_token;
+            } catch (err) {
+                throw new Error(`Token error: ${err.message}`);
+            }
+        }, [apiKey, baseUrl]);
+
+        const fetchChannels = useCallback(async () => {
+            setLoading(true);
+            setError('');
+            try {
+                const token = await getToken();
+
+                const response = await fetch(`${baseUrl}/api/store/channel/v1/channels`, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch channels: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                setChannels(data);
+                setAuthenticated(true);
+                setSuccess(`Loaded ${data.length} channels`);
+                setTimeout(() => setSuccess(''), 3000);
+            } catch (err) {
+                setError(err.message);
+                setAuthenticated(false);
+            } finally {
+                setLoading(false);
+            }
+        }, [getToken, baseUrl]);
+
+        const handleLogin = (e) => {
+            e.preventDefault();
+            if (apiKey && baseUrl) {
+                fetchChannels();
+            }
+        };
+
+        const startEdit = (channel) => {
+            setEditingId(channel['channel:id']);
+            setEditForm({
+                'source:text': channel['source:text'] || '',
+                'destinationId:int': channel['destinationId:int'] || '',
+                'name:text': channel['name:text'] || ''
+            });
+        };
+
+        const cancelEdit = () => {
+            setEditingId(null);
+            setEditForm({});
+        };
+
+        const saveChanges = async () => {
+            setLoading(true);
+            setError('');
+            try {
+                const token = await getToken();
+
+                const updateData = {
+                    'source:text': editForm['source:text'],
+                    'destinationId:int': editForm['destinationId:int'] ? parseInt(editForm['destinationId:int']) : null
+                };
+
+                const response = await fetch(`${baseUrl}/api/store/channel/v1/channels/${editingId}`, {
+                    method: 'PATCH',
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(updateData)
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to update channel: ${response.statusText}`);
+                }
+
+                setSuccess('Channel updated successfully');
+                setEditingId(null);
+                setTimeout(() => fetchChannels(), 500);
+            } catch (err) {
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        // Login form
+        if (!authenticated) {
+            return React.createElement('div', { className: 'min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4' },
+                React.createElement('div', { className: 'bg-slate-800 rounded-lg shadow-xl p-8 w-full max-w-md border border-slate-700' },
+                    React.createElement('div', { className: 'mb-6' },
+                        React.createElement('h1', { className: 'text-2xl font-bold text-white mb-2' }, 'Elastic Recorder Control'),
+                        React.createElement('p', { className: 'text-slate-400' }, 'Manage recording settings and folder assignments')
+                    ),
+                    React.createElement('form', { onSubmit: handleLogin, className: 'space-y-4' },
+                        React.createElement('div', null,
+                            React.createElement('label', { className: 'block text-sm font-medium text-slate-300 mb-2' }, 'API Key'),
+                            React.createElement('textarea', {
+                                value: apiKey,
+                                onChange: (e) => setApiKey(e.target.value),
+                                placeholder: 'Paste your base64-encoded API key',
+                                className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm font-mono h-24'
+                            })
+                        ),
+                        React.createElement('div', null,
+                            React.createElement('label', { className: 'block text-sm font-medium text-slate-300 mb-2' }, 'Platform URL'),
+                            React.createElement('input', {
+                                type: 'text',
+                                value: baseUrl,
+                                onChange: (e) => setBaseUrl(e.target.value),
+                                className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400'
+                            })
+                        ),
+                        error && React.createElement('div', { className: 'flex gap-2 p-3 bg-red-900/20 border border-red-600 rounded text-red-400 text-sm' },
+                            React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.AlertCircle() }, style: { flexShrink: 0, marginTop: '2px' } }),
+                            React.createElement('span', null, error)
+                        ),
+                        React.createElement('button', {
+                            type: 'submit',
+                            disabled: loading || !apiKey,
+                            className: 'w-full py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 text-white font-medium rounded transition',
+                            style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }
+                        },
+                            loading && React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.RefreshCw() }, className: 'spinner' }),
+                            loading ? 'Connecting...' : 'Connect'
+                        )
+                    )
+                )
+            );
+        }
+
+        // Main dashboard
+        return React.createElement('div', { className: 'min-h-screen bg-slate-900 text-white p-6' },
+            React.createElement('div', { className: 'max-w-6xl mx-auto' },
+                React.createElement('div', { className: 'flex items-center justify-between mb-8' },
+                    React.createElement('div', null,
+                        React.createElement('h1', { className: 'text-3xl font-bold mb-2' }, 'Elastic Recorder Control'),
+                        React.createElement('p', { className: 'text-slate-400' }, `Manage ${channels.length} recorders`)
+                    ),
+                    React.createElement('button', {
+                        onClick: fetchChannels,
+                        disabled: loading,
+                        className: 'flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded transition'
+                    },
+                        React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.RefreshCw() }, className: loading ? 'spinner' : '' }),
+                        'Refresh'
+                    )
+                ),
+                error && React.createElement('div', { className: 'mb-4 p-4 bg-red-900/20 border border-red-600 rounded flex gap-3' },
+                    React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.AlertCircle() }, style: { flexShrink: 0 } }),
+                    React.createElement('div', { className: 'text-red-400' }, error)
+                ),
+                success && React.createElement('div', { className: 'mb-4 p-4 bg-green-900/20 border border-green-600 rounded flex gap-3' },
+                    React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.CheckCircle() }, style: { flexShrink: 0 } }),
+                    React.createElement('div', { className: 'text-green-400' }, success)
+                ),
+                React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-4' },
+                    channels.map((channel) => {
+                        const isEditing = editingId === channel['channel:id'];
+                        return React.createElement('div', {
+                            key: channel['channel:id'],
+                            className: 'bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-slate-600 transition'
+                        },
+                            React.createElement('div', { className: 'flex items-start justify-between mb-4' },
+                                React.createElement('div', null,
+                                    React.createElement('h2', { className: 'text-lg font-semibold mb-1' }, channel['name:text']),
+                                    React.createElement('p', { className: 'text-slate-400 text-sm font-mono' }, channel['channel:id'].substring(0, 20) + '...')
+                                ),
+                                channel['elasticRecorder'] && React.createElement('div', { className: 'px-3 py-1 bg-blue-900/30 border border-blue-700 rounded text-xs text-blue-300 font-medium' }, 'Elastic Recorder')
+                            ),
+                            !isEditing ? React.createElement(React.Fragment, null,
+                                React.createElement('div', { className: 'space-y-3 mb-4' },
+                                    React.createElement('div', null,
+                                        React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Recording Store'),
+                                        React.createElement('p', { className: 'text-white mt-1' }, channel['source:text'] || '—')
+                                    ),
+                                    React.createElement('div', null,
+                                        React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Framelight Folder'),
+                                        React.createElement('p', { className: 'text-white mt-1' }, channel['destinationId:int'] || '—')
+                                    ),
+                                    channel['elasticRecorder'] && React.createElement('div', null,
+                                        React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase' }, 'Workload ID'),
+                                        React.createElement('p', { className: 'text-white mt-1 font-mono text-sm' }, channel['elasticRecorder']['workloadId:text'].substring(0, 16) + '...')
+                                    )
+                                ),
+                                React.createElement('button', {
+                                    onClick: () => startEdit(channel),
+                                    className: 'w-full flex items-center justify-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded transition'
+                                },
+                                    React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.Settings() } }),
+                                    'Edit Settings'
+                                )
+                            ) : React.createElement(React.Fragment, null,
+                                React.createElement('div', { className: 'space-y-3 mb-4' },
+                                    React.createElement('div', null,
+                                        React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase mb-1 block' }, 'Recording Store'),
+                                        React.createElement('input', {
+                                            type: 'text',
+                                            value: editForm['source:text'],
+                                            onChange: (e) => setEditForm({...editForm, 'source:text': e.target.value}),
+                                            placeholder: 'e.g., /archive/store1',
+                                            className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm'
+                                        })
+                                    ),
+                                    React.createElement('div', null,
+                                        React.createElement('label', { className: 'text-xs font-medium text-slate-400 uppercase mb-1 block' }, 'Framelight Folder ID'),
+                                        React.createElement('input', {
+                                            type: 'text',
+                                            value: editForm['destinationId:int'],
+                                            onChange: (e) => setEditForm({...editForm, 'destinationId:int': e.target.value}),
+                                            placeholder: 'Folder ID or path',
+                                            className: 'w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white placeholder-slate-400 text-sm'
+                                        })
+                                    )
+                                ),
+                                React.createElement('div', { className: 'flex gap-2' },
+                                    React.createElement('button', {
+                                        onClick: saveChanges,
+                                        disabled: loading,
+                                        className: 'flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-slate-600 text-white rounded transition'
+                                    },
+                                        React.createElement('div', { dangerouslySetInnerHTML: { __html: Icons.Save() } }),
+                                        'Save'
+                                    ),
+                                    React.createElement('button', {
+                                        onClick: cancelEdit,
+                                        disabled: loading,
+                                        className: 'flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 disabled:bg-slate-600 text-white rounded transition'
+                                    }, 'Cancel')
+                                )
+                            )
+                        );
+                    })
+                ),
+                channels.length === 0 && React.createElement('div', { className: 'text-center py-12 text-slate-400' },
+                    React.createElement('p', null, 'No channels found. Try refreshing or check your connection.')
+                )
+            )
+        );
+    }
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(React.createElement(ElasticRecorderDashboard));
+</script>
+</body>
+</html>
