diff --git a/js/dist/admin.js b/js/dist/admin.js
index 8a2bc57..c6c1a95 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 89380b7..0e1f78d 100644
Binary files a/js/dist/admin.js.map and b/js/dist/admin.js.map differ
diff --git a/js/dist/forum.js b/js/dist/forum.js
index 1ab32a4..32fed37 100644
Binary files a/js/dist/forum.js and b/js/dist/forum.js differ
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
index 8acbfd8..6c6b882 100644
Binary files a/js/dist/forum.js.map and b/js/dist/forum.js.map differ
diff --git a/js/src/admin/pages/ClientsPage.js b/js/src/admin/pages/ClientsPage.js
index 5bf8831..b05e0af 100644
--- a/js/src/admin/pages/ClientsPage.js
+++ b/js/src/admin/pages/ClientsPage.js
@@ -1,10 +1,7 @@
 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) {
diff --git a/js/src/admin/pages/ScopesPage.js b/js/src/admin/pages/ScopesPage.js
index e830f7d..3f807c0 100644
--- a/js/src/admin/pages/ScopesPage.js
+++ b/js/src/admin/pages/ScopesPage.js
@@ -1,11 +1,102 @@
+import app from 'flarum/admin/app';
 import Page from 'flarum/common/components/Page';
+import Button from 'flarum/common/components/Button';
+import Select from 'flarum/common/components/Select';
+import CheckBox from 'flarum/common/components/Checkbox';
 
 export default class ScopesPage extends Page {
-    view() {
-        return (
-            <div>
-                <h2>Scopes Page</h2>
-            </div>
-        );
-    }
+  translationPrefix = 'foskym-oauth-center.admin.scopes.';
+  scopes = [];
+
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.fields = [
+      'scope',
+      'resource_path',
+      'method',
+      'is_default',
+      'scope_name',
+      'scope_icon',
+      'scope_desc'
+    ];
+
+    app.store.find('oauth-scopes').then(r => {
+      this.scopes = r;
+      this.fields.map(key => console.log(this.scopes[0][key]))
+      m.redraw();
+    });
+  }
+
+  view() {
+    return (
+      <div class={"OAuthCenter-scopesPage"}>
+        {
+          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.scopes.map((scope, index) => m('tr', [
+                  this.fields.map(key =>
+                    m('td', key === 'method' ? Select.component({
+                      options: {
+                        'GET': 'GET',
+                        'POST': 'POST',
+                        'PUT': 'PUT',
+                        'DELETE': 'DELETE',
+                        'PATCH': 'PATCH',
+                      },
+                      value: scope[key]() || 'GET',
+                      onchange: (event) => {
+                        this.saveScopeInfo(index, key, event.target.value);
+                      },
+                    }) : key === 'is_default' ? CheckBox.component({
+                      state: scope[key]() || false,
+                      onchange: (event) => {
+                        this.saveScopeInfo(index, key, event.target.checked ? 1 : 0);
+                      },
+                    }) : m('input.FormControl', {
+                      type: 'text',
+                      value: scope[key]() || '',
+                      onchange: (event) => {
+                        this.saveScopeInfo(index, key, event.target.value);
+                      },
+                    }))
+                  ),
+                  m('td', Button.component({
+                    className: 'Button Button--icon',
+                    icon: 'fas fa-times',
+                    onclick: () => {
+                      this.scopes[index].delete();
+                      this.scopes.splice(index, 1);
+
+                    },
+                  })),
+                ])),
+                m('tr', m('td', {
+                  colspan: 7,
+                }, Button.component({
+                  className: 'Button Button--block',
+                  onclick: () => {
+                    const scope = app.store.createRecord('oauth-scopes');
+                    scope.save({}).then(this.scopes.push(scope));
+                  },
+                }, app.translator.trans(this.translationPrefix + 'add_button')))),
+              ]),
+            ]),
+          ])
+        }
+      </div>
+    );
+  }
+
+  saveScopeInfo(index, key, value) {
+    console.log(index, key, value);
+    this.scopes[index].save({
+      [key]: value,
+    });
+  }
 }
diff --git a/less/admin.less b/less/admin.less
index 29341b2..7618a0e 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -29,7 +29,7 @@
     max-width: 100% !important;
   }
 
-  .OAuthCenter-clientsPage {
+  .OAuthCenter-clientsPage, .OAuthCenter-scopesPage {
     table {
       width: 100%;
 
diff --git a/locale/zh-Hans.yml b/locale/zh-Hans.yml
index 5f2811c..e9a8d77 100644
--- a/locale/zh-Hans.yml
+++ b/locale/zh-Hans.yml
@@ -20,6 +20,15 @@ foskym-oauth-center:
       client_icon: 图标
       client_home: 主页
       add_button: 添加应用
+    scopes:
+      scope: 权限标识
+      resource_path: 资源路径
+      method: 请求方法
+      is_default: 默认
+      scope_name: 名称
+      scope_icon: 图标
+      scope_desc: 描述
+      add_button: 添加权限
 
   forum:
     page: