diff --git a/src/main/resources/i18n/messages.properties b/src/main/resources/i18n/messages.properties
index 9c7b3b33..2624aa2e 100644
--- a/src/main/resources/i18n/messages.properties
+++ b/src/main/resources/i18n/messages.properties
@@ -149,6 +149,14 @@ admin.modules.core.menus.fieldVisible=This menu is visible.
 admin.modules.core.menus.fieldTemplate=Menu Template
 admin.modules.core.menus.msgSelectTemplate=Select a menu template for name and link...
 
-
+admin.modules.core.roles.title=Role List
+admin.modules.core.roles.subtitle=All system roles
+admin.modules.core.roles.addRole=Add Role
+admin.modules.core.roles.fieldRoleName=Role Name
+admin.modules.core.roles.fieldDescription=Role Description
+admin.modules.core.roles.fieldUsers=Users
+admin.modules.core.roles.fieldCreatedAt=Created At
+admin.modules.core.roles.fieldLastUpdate=Last Update
+common.operation=Operation
 
 
diff --git a/src/main/resources/i18n/messages_zh_CN.properties b/src/main/resources/i18n/messages_zh_CN.properties
index 8055b9d7..585f0bea 100644
--- a/src/main/resources/i18n/messages_zh_CN.properties
+++ b/src/main/resources/i18n/messages_zh_CN.properties
@@ -148,3 +148,14 @@ admin.modules.core.menus.fieldLinkParams=\u94FE\u63A5\u53C2\u6570
 admin.modules.core.menus.fieldVisible=\u6B64\u83DC\u5355\u53EF\u89C1
 admin.modules.core.menus.fieldTemplate=\u83DC\u5355\u6A21\u677F
 admin.modules.core.menus.msgSelectTemplate=\u60A8\u53EF\u4EE5\u4ECE\u7CFB\u7EDF\u83DC\u5355\u6A21\u677F\u4E2D\u9009\u62E9\u9700\u8981\u521B\u5EFA\u7684\u83DC\u5355\u3002
+
+
+admin.modules.core.roles.title=\u89D2\u8272\u5217\u8868
+admin.modules.core.roles.subtitle=\u6240\u6709\u7CFB\u7EDF\u89D2\u8272
+admin.modules.core.roles.addRole=\u6DFB\u52A0\u89D2\u8272
+admin.modules.core.roles.fieldRoleName=\u89D2\u8272\u540D\u79F0
+admin.modules.core.roles.fieldDescription=\u89D2\u8272\u63CF\u8FF0
+admin.modules.core.roles.fieldUsers=\u7528\u6237
+admin.modules.core.roles.fieldCreatedAt=\u521B\u5EFA\u65F6\u95F4
+admin.modules.core.roles.fieldLastUpdate=\u6700\u540E\u66F4\u65B0
+common.operation=\u64CD\u4F5C
diff --git a/src/main/resources/static/apps/admin/modules/core/roles.html b/src/main/resources/static/apps/admin/modules/core/roles.html
new file mode 100644
index 00000000..c20c28d3
--- /dev/null
+++ b/src/main/resources/static/apps/admin/modules/core/roles.html
@@ -0,0 +1,99 @@
+<div ng-controller="RolesCtrl">
+    <ui-page-header title="'admin.modules.core.roles.title'"
+                    subtitle="'admin.modules.core.roles.subtitle'"
+                    breadcrumbs="[{'text': 'admin.modules.core.roles.title'}]"></ui-page-header>
+    <section class="content">
+        <div class="box box-default with-header with-footer">
+            <div class="box-header with-border">
+                <div class="pull-left">&nbsp;&nbsp;
+                </div>
+
+                <div class="box-tools pull-right">
+                    <button type="button" class="btn btn-sm btn-primary" ng-click="add()" ng-bind="'admin.modules.core.roles.addRole'|translate"></button>
+                </div>
+            </div>
+            <div class="box-body">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th ng-bind="'admin.modules.core.roles.fieldRoleName'|translate"></th>
+                        <th ng-bind="'admin.modules.core.roles.fieldDescription'|translate"></th>
+                        <th ng-bind="'admin.modules.core.roles.fieldCreatedAt'|translate"></th>
+                        <th ng-bind="'admin.modules.core.roles.fieldLastUpdate'|translate"></th>
+                        <th class="text-center" ng-bind="'common.operation'|translate"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="item in data">
+                        <td ng-bind="item.name"></td>
+                        <td><span ng-bind="item.description"></span></td>
+                        <td ng-bind="item.createDate | date: 'yyyy-MM-dd HH:mm'"></td>
+                        <td ng-bind="item.lastUpdate | date: 'yyyy-MM-dd HH:mm'"></td>
+
+                        <td class="text-center">
+                            <a ng-click="edit(item)">
+                                <i class="glyphicon glyphicon-edit text-primary"></i>
+                            </a>
+                            <a ng-click="remove(item)">
+                                <i class="glyphicon glyphicon-trash text-danger"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+                <ui-no-data ng-if="data.length==0"></ui-no-data>
+            </div>
+        </div>
+    </section>
+
+    <div id="dialogForm" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" ng-click="closeDialog()" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title">
+                        <span ng-if="formModel.id" ng-bind="'admin.modules.core.roles.editRole'|translate"></span>
+                        <span ng-if="!formModel.id" ng-bind="'admin.modules.core.roles.addRole'|translate"></span>
+                    </h4>
+                </div>
+                <div class="modal-body">
+                    <form name="form">
+                        <div layout="row">
+                            <md-input-container flex="50">
+                                <label>
+                                    <span ng-bind="'admin.modules.core.roles.fieldRoleName'|translate"></span>
+                                    <span ng-show="formModel.name">({{formModel.name|translate}})</span>
+                                </label>
+                                <input name="name" required ng-model="formModel.name"/>
+                                <div ng-messages="form.name.$error">
+                                    <div ng-message="required" ng-bind="'common.msgRequired'|translate"></div>
+                                </div>
+                            </md-input-container>
+                            <md-input-container flex="50">
+                                <label>
+                                    <span ng-bind="'admin.modules.core.roles.fieldDescription'|translate"></span>
+                                </label>
+                                <input name="description" ng-model="formModel.description"/>
+                            </md-input-container>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <div class="pull-left">
+                    </div>
+                    <div class="pull-right">
+                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeDialog()"
+                                ng-bind="'common.close'|translate"></button>
+                        <button type="button" class="btn btn-primary"
+                                ng-disabled="form.$invalid"
+                                ng-bind="'common.saveChanges'|translate"
+                                ng-click="save()">
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/static/apps/admin/modules/core/roles.js b/src/main/resources/static/apps/admin/modules/core/roles.js
new file mode 100644
index 00000000..d7067b03
--- /dev/null
+++ b/src/main/resources/static/apps/admin/modules/core/roles.js
@@ -0,0 +1,54 @@
+app.controller('RolesCtrl',
+    [ '$scope', 'appDialog', '$http', '$timeout',
+    function($scope, appDialog, $http, $timeout) {
+        $scope.data = [];
+        $scope.roles = null;
+        $scope.init = function() {
+            $http.get('/api/core/roles').then(function(res) {
+                $scope.data = res.data;
+            });
+        };
+
+        $scope.add = function(parent) {
+            angular.resetForm($scope.form);
+            if (parent) {
+                $scope.formModel = { parentId: parent.id, visible: true };
+            } else {
+                $scope.formModel = { visible: true };
+            }
+            $('#dialogForm').modal('show');
+        };
+
+        $scope.edit = function(role) {
+            angular.resetForm($scope.form);
+            $scope.formModel = angular.copy(role);
+            $('#dialogForm').modal('show');
+        };
+
+        $scope.save = function() {
+            if ($scope.formModel.id) {
+                $http.put('/api/core/roles/' + $scope.formModel.id, $scope.formModel).then(function() {
+                    $('#dialogForm').modal('hide');
+                    appDialog.success();
+                    $scope.init();
+                });
+            } else {
+                $http.post('/api/core/roles', $scope.formModel).then(function() {
+                    $('#dialogForm').modal('hide');
+                    appDialog.success();
+                    $scope.init();
+                });
+            }
+        };
+
+        $scope.remove = function(item) {
+            appDialog.confirmDeletion(function(){
+                $http.delete('/api/core/roles/' + item.id).then(function(res) {
+                    $scope.data.splice($scope.data.indexOf(item), 1)
+                    appDialog.success();
+                });
+            });
+        };
+
+        $scope.init();
+    }]);