diff --git a/extend.php b/extend.php
index c8f1edd..bad30c4 100644
--- a/extend.php
+++ b/extend.php
@@ -28,7 +28,7 @@ return [
     (new Extend\Routes('forum'))
         ->post('/oauth/authorize', 'oauth.authorize.post', Controllers\AuthorizeController::class),
     (new Extend\Routes('api'))
-        ->get('/oauth/clients', 'oauth.clients.list', Api\Controller\ListClientController::class),
+        ->get('/oauth-clients', 'oauth.clients.list', Api\Controller\ListClientController::class),
 
     (new Extend\Middleware('api'))->add(ResourceScopeMiddleware::class),
 ];
diff --git a/js/dist/admin.js b/js/dist/admin.js
index 47a216f..589a21a 100644
Binary files a/js/dist/admin.js and b/js/dist/admin.js differ
diff --git a/js/dist/admin.js.map b/js/dist/admin.js.map
index 5f1a3e8..a4d7b3a 100644
Binary files a/js/dist/admin.js.map and b/js/dist/admin.js.map differ
diff --git a/js/src/admin/pages/ClientsPage.js b/js/src/admin/pages/ClientsPage.js
index fd464c3..594f0a1 100644
--- a/js/src/admin/pages/ClientsPage.js
+++ b/js/src/admin/pages/ClientsPage.js
@@ -1,22 +1,104 @@
 import app from 'flarum/admin/app';
 import Page from 'flarum/common/components/Page';
-
+import AdminPage from 'flarum/admin/components/AdminPage';
+import Button from 'flarum/common/components/Button';
+import Client from "../../common/models/Client";
 export default class ClientsPage extends Page {
   settingName = 'collapsible-posts.reasons';
   translationPrefix = 'foskym-oauth-center.admin.clients.';
+  clients = [];
   oninit(vnode) {
     super.oninit(vnode);
 
-    app.store.find('oauth/clients').then(() => {
+    this.fields = [
+      'client_id',
+      'client_secret',
+      'redirect_uri',
+      'grant_types',
+      'scope',
+      'client_name',
+      'client_desc',
+      'client_icon',
+      'client_home'
+    ];
+
+    app.store.find('oauth-clients').then(r => {
+      this.clients = r;
+      this.fields.map(key => console.log(this.clients[0][key]))
       m.redraw();
     });
   }
 
   view() {
     return (
-      <div>
-        <h2>Clients Page</h2>
+      <div class={"OAuthCenter-clientsPage"}>
+        {
+          m('.Form-group', [
+            m('table', [
+              m('thead', m('tr', [
+                this.fields.map(key => m('th', app.translator.trans(this.translationPrefix + key))),
+                m('th'),
+              ])),
+              m('tbody', [
+                this.clients.map((client, index) => m('tr', [
+                  this.fields.map(key =>
+                    m('td', m('input.FormControl', {
+                      type: 'text',
+                      value: client[key]() || '',
+                      onchange: (event) => {
+                        this.saveClientInfo(client.id(), key, event.target.value);
+                      },
+                    }))
+                  ),
+                  m('td', Button.component({
+                    className: 'Button Button--icon',
+                    icon: 'fas fa-times',
+                    onclick: () => {
+                      this.clients.splice(index, 1);
+
+                     // this.setting(settingName)(JSON.stringify(reasons));
+                    },
+                  })),
+                ])),
+                m('tr', m('td', {
+                  colspan: 9,
+                }, Button.component({
+                  className: 'Button Button--block',
+                  onclick: () => {
+                    const client = app.store.createRecord('oauth-clients');
+                    client.save({
+                      client_id: this.randomString(32),
+                      client_secret: this.randomString(32),
+                    }).then(console.log);
+
+                    // this.clients.push(Client.build({
+                    //
+                    // }));
+
+                    // this.setting(settingName)(JSON.stringify(reasons));
+                  },
+                }, app.translator.trans(this.translationPrefix + 'add_button')))),
+              ]),
+            ]),
+          ])
+        }
       </div>
     );
   }
+
+  randomString(len) {
+    len = len || 32;
+    let $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let maxPos = $chars.length;
+    let pwd = '';
+    for (let i = 0; i < len; i++) {
+      //0~32的整数
+      pwd += $chars.charAt(Math.floor(Math.random() * (maxPos + 1)));
+    }
+    return pwd;
+  }
+
+  saveClientInfo(id, key, value) {
+    console.log(id, key, value);
+  }
 }
diff --git a/less/admin.less b/less/admin.less
index 9795d1f..29341b2 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -24,6 +24,35 @@
       }
     }
   }
+
+  .OAuthCenterPage-container {
+    max-width: 100% !important;
+  }
+
+  .OAuthCenter-clientsPage {
+    table {
+      width: 100%;
+
+      td, th {
+        padding: 3px 5px;
+      }
+
+      th {
+        text-align: left;
+      }
+    }
+
+    .FormControl {
+      background: @body-bg;
+      border-color: @control-bg;
+
+      // We set the same as Flarum default, but with more specificity
+      &:focus,
+      &.focus {
+        border-color: @primary-color;
+      }
+    }
+  }
 }
 @media (min-width: 992px) {
   .OAuthCenter {
diff --git a/locale/zh-Hans.yml b/locale/zh-Hans.yml
index 7bcb0f0..8c7e4f2 100644
--- a/locale/zh-Hans.yml
+++ b/locale/zh-Hans.yml
@@ -15,10 +15,11 @@ foskym-oauth-center:
       redirect_uri: 回调地址（多地址请用空格分割）
       grant_types: 授权类型（可空）
       scope: 权限（可空）
-      name: 应用名称（可空）
-      description: 应用描述（可空）
-      icon: 应用图标地址（可空 可使用fontawesome图标）
-      home: 主页地址（可空）
+      client_name: 应用名称（可空）
+      client_desc: 应用描述（可空）
+      client_icon: 应用图标地址（可空 可使用fontawesome图标）
+      client_home: 主页地址（可空）
+      add_button: 添加应用
 
   forum:
     page: