diff --git a/ui/src/pages/Admin/AdminLayout.tsx b/ui/src/pages/Admin/AdminLayout.tsx
new file mode 100644
index 00000000..07bce973
--- /dev/null
+++ b/ui/src/pages/Admin/AdminLayout.tsx
@@ -0,0 +1,26 @@
+import { Outlet, useNavigate, useLocation } from 'react-router';
+import { Tabs } from '@cameleer/design-system';
+
+const ADMIN_TABS = [
+ { label: 'User Management', value: '/admin/rbac' },
+ { label: 'Audit Log', value: '/admin/audit' },
+ { label: 'OIDC', value: '/admin/oidc' },
+ { label: 'Database', value: '/admin/database' },
+ { label: 'OpenSearch', value: '/admin/opensearch' },
+];
+
+export default function AdminLayout() {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ return (
+
+ navigate(path)}
+ />
+
+
+ );
+}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index c63299d3..e8ae3d41 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -12,6 +12,7 @@ const RoutesMetrics = lazy(() => import('./pages/Routes/RoutesMetrics'));
const RouteDetail = lazy(() => import('./pages/Routes/RouteDetail'));
const AgentHealth = lazy(() => import('./pages/AgentHealth/AgentHealth'));
const AgentInstance = lazy(() => import('./pages/AgentInstance/AgentInstance'));
+const AdminLayout = lazy(() => import('./pages/Admin/AdminLayout'));
const RbacPage = lazy(() => import('./pages/Admin/RbacPage'));
const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage'));
const OidcConfigPage = lazy(() => import('./pages/Admin/OidcConfigPage'));
@@ -47,12 +48,18 @@ export const router = createBrowserRouter([
{ path: 'agents', element: },
{ path: 'agents/:appId', element: },
{ path: 'agents/:appId/:instanceId', element: },
- { path: 'admin', element: },
- { path: 'admin/rbac', element: },
- { path: 'admin/audit', element: },
- { path: 'admin/oidc', element: },
- { path: 'admin/database', element: },
- { path: 'admin/opensearch', element: },
+ {
+ path: 'admin',
+ element: ,
+ children: [
+ { index: true, element: },
+ { path: 'rbac', element: },
+ { path: 'audit', element: },
+ { path: 'oidc', element: },
+ { path: 'database', element: },
+ { path: 'opensearch', element: },
+ ],
+ },
{ path: 'api-docs', element: },
],
},