diff --git a/application/extra/addons.php b/application/extra/addons.php
index 53feb67..d80ba05 100755
--- a/application/extra/addons.php
+++ b/application/extra/addons.php
@@ -3,7 +3,11 @@
 return [
     'autoload' => false,
     'hooks' => [
+        'view_filter' => [
+            'betterform',
+        ],
         'config_init' => [
+            'betterform',
             'nkeditor',
         ],
     ],
diff --git a/public/assets/addons/betterform/css/common.css b/public/assets/addons/betterform/css/common.css
new file mode 100644
index 0000000..b85daae
--- /dev/null
+++ b/public/assets/addons/betterform/css/common.css
@@ -0,0 +1,153 @@
+@-webkit-keyframes fadeIn {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes layer-slide-down {
+    from {
+        transform: translate3d(0, -100%, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0)
+    }
+}
+
+@keyframes layer-slide-down-out {
+    from {
+        transform: translate3d(0, 0, 0)
+    }
+
+    to {
+        transform: translate3d(0, -100%, 0)
+    }
+}
+
+.layer-anim-slide-down {
+    animation-name: layer-slide-down
+}
+
+.layer-anim-slide-down-out {
+    animation-name: layer-slide-down-out
+}
+
+@keyframes layer-slide-left {
+    from {
+        transform: translate3d(100%, 0, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0)
+    }
+}
+
+@keyframes layer-slide-left-out {
+    from {
+        transform: translate3d(0, 0, 0)
+    }
+
+    to {
+        transform: translate3d(100%, 0, 0)
+    }
+}
+
+.layer-anim-slide-left {
+    animation-name: layer-slide-left
+}
+
+.layer-anim-slide-left-out {
+    animation-name: layer-slide-left-out
+}
+
+@keyframes layer-slide-up {
+    from {
+        transform: translate3d(0, 100%, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0)
+    }
+}
+
+@keyframes layer-slide-up-out {
+    from {
+        transform: translate3d(0, 0, 0)
+    }
+
+    to {
+        transform: translate3d(0, 100%, 0)
+    }
+}
+
+.layer-anim-slide-up {
+    animation-name: layer-slide-up
+}
+
+.layer-anim-slide-up-out {
+    animation-name: layer-slide-up-out
+}
+
+@keyframes layer-slide-right {
+    from {
+        transform: translate3d(-100%, 0, 0)
+    }
+
+    to {
+        transform: translate3d(0, 0, 0)
+    }
+}
+
+@keyframes layer-slide-right-out {
+    from {
+        transform: translate3d(0, 0, 0)
+    }
+
+    to {
+        transform: translate3d(-100%, 0, 0)
+    }
+}
+
+.layer-anim-slide-right {
+    animation-name: layer-slide-right
+}
+
+.layer-anim-slide-right-out {
+    animation-name: layer-slide-right-out
+}
+
+.layer-anim-slide-down-custom.layer-anim-close {
+    animation-name: layer-slide-down-out;
+}
+
+.layer-anim-slide-up-custom.layer-anim-close {
+    animation-name: layer-slide-up-out;
+}
+
+.layer-anim-slide-left-custom.layer-anim-close {
+    animation-name: layer-slide-left-out;
+}
+
+.layer-anim-slide-right-custom.layer-anim-close {
+    animation-name: layer-slide-right-out;
+}
+
+.form-group.required-before > .control-label::before,table tr.required-before > td:first-child::before  {
+    color: red;
+    content: '*';
+    margin-right: 4px;
+    margin-left: 4px;
+    vertical-align: middle;
+}
+
+.form-group.required-after > .control-label::after,table tr.required-after > td:first-child::after  {
+    color: red;
+    content: '*';
+    margin-right: 4px;
+    margin-left: 4px;
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/public/assets/js/addons.js b/public/assets/js/addons.js
index bed6a78..5135107 100755
--- a/public/assets/js/addons.js
+++ b/public/assets/js/addons.js
@@ -1,5 +1,32 @@
 define([], function () {
-    require.config({
+    require(['fast', 'layer'], function (Fast, Layer) {
+    var _fastOpen = Fast.api.open;
+    Fast.api.open = function (url, title, options) {
+        options = options || {};
+        options.area = Config.betterform.area;
+        options.offset = Config.betterform.offset;
+        options.anim = Config.betterform.anim;
+        options.shadeClose = Config.betterform.shadeClose;
+        options.shade = Config.betterform.shade;
+        return _fastOpen(url, title, options);
+    };
+    if (isNaN(Config.betterform.anim)) {
+        var _layerOpen = Layer.open;
+        Layer.open = function (options) {
+            var classNameArr = {slideDown: "layer-anim-slide-down", slideLeft: "layer-anim-slide-left", slideUp: "layer-anim-slide-up", slideRight: "layer-anim-slide-right"};
+            var animClass = "layer-anim " + classNameArr[options.anim] || "layer-anim-fadein";
+            var index = _layerOpen(options);
+            var layero = $('#layui-layer' + index);
+
+            layero.addClass(classNameArr[options.anim] + "-custom");
+            layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+                $(this).removeClass(animClass);
+            });
+            return index;
+        }
+    }
+});
+require.config({
     paths: {
         'nkeditor': '../addons/nkeditor/js/customplugin',
         'nkeditor-core': '../addons/nkeditor/nkeditor',