diff --git a/packages/client/src/route-switch/antd/admin-layout/index.tsx b/packages/client/src/route-switch/antd/admin-layout/index.tsx
index 4f25c67ab..f9a6f258d 100644
--- a/packages/client/src/route-switch/antd/admin-layout/index.tsx
+++ b/packages/client/src/route-switch/antd/admin-layout/index.tsx
@@ -1,13 +1,31 @@
-import { Table } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
+import { Layout, Spin } from 'antd';
+import { useRoute } from '../..';
+import { RemoteSchemaComponent } from '../../../schema-component';
+import { useHistory, useRouteMatch } from 'react-router-dom';
 
 export function AdminLayout(props: any) {
-
+  const route = useRoute();
+  const history = useHistory();
+  const match = useRouteMatch<any>();
+  const defaultSelectedUid = match.params.name;
+  const [schema, setSchema] = useState({});
+  const onSelect = ({ item }) => {
+    const schema = item.props.schema;
+    setSchema(schema);
+    history.push(`/admin/${schema['x-uid']}`);
+  };
   return (
-    <div>
-      <Table/>
-      AdminLayout
-    </div>
+    <Layout>
+      <Layout.Header>
+        <RemoteSchemaComponent scope={{ onSelect, defaultSelectedUid }} uid={route.uiSchemaUid} />
+      </Layout.Header>
+      <Layout>
+        <Layout.Content>
+          <RemoteSchemaComponent uid={match.params.name} />
+        </Layout.Content>
+      </Layout>
+    </Layout>
   );
 }