diff --git a/static/src/css/app.css b/static/src/css/oj.css
similarity index 100%
rename from static/src/css/app.css
rename to static/src/css/oj.css
diff --git a/static/src/js/app/account/login.js b/static/src/js/app/account/login.js
index e6c0cb5b..86a9955e 100644
--- a/static/src/js/app/account/login.js
+++ b/static/src/js/app/account/login.js
@@ -1,4 +1,4 @@
-define("login", ["jquery", "validation"], function($){
+define("login", ["jquery", "bs_alert", "validation"], function($, bs_alert){
     $("#login-form")
             .formValidation({
             framework: "bootstrap",
@@ -33,12 +33,10 @@ define("login", ["jquery", "validation"], function($){
                         window.location.href="/";
                     }
                     else{
-                        alert(data.data);
+                        bs_alert(data.data);
                     }
                 }
 
             })
         });
-
-
 });
\ No newline at end of file
diff --git a/static/src/js/app/oj.js b/static/src/js/app/oj.js
index 96141819..e23fc96f 100644
--- a/static/src/js/app/oj.js
+++ b/static/src/js/app/oj.js
@@ -1,4 +1,4 @@
 
 require(["../config"], function(){
-    require(["login"])
+    require(["bootstrap", "login"])
 });
\ No newline at end of file
diff --git a/static/src/js/config.js b/static/src/js/config.js
index 0d468088..012819f2 100644
--- a/static/src/js/config.js
+++ b/static/src/js/config.js
@@ -13,6 +13,8 @@ require.config({
         code_mirror: "../utils/code_mirror",
         login: "../app/account/login",
         oj: "../app/oj",
+        "bs_alert": "../utils/bs_alert",
+
 
         //formValidation 不要在代码中单独使用，而是使用和修改utils/validation
         base: "formValidation/base",
@@ -33,7 +35,13 @@ require.config({
 
         //code mirroe 代码编辑器
         _code_mirror: "codeMirror/codemirror",
-        code_mirror_clang: "codeMirror/language/clike"
+        code_mirror_clang: "codeMirror/language/clike",
 
+        //bootstrap
+        bootstrap: "bootstrap/bootstrap"
+
+    },
+    shim: {
+        "bootstrap": {"deps": ['jquery']}
     }
 });
\ No newline at end of file
diff --git a/static/src/js/utils/bs_alert.js b/static/src/js/utils/bs_alert.js
new file mode 100644
index 00000000..b35f06de
--- /dev/null
+++ b/static/src/js/utils/bs_alert.js
@@ -0,0 +1,7 @@
+define("bs_alert", ["jquery", "bootstrap"], function($){
+     function bs_alert(content){
+         $("#modal-text").html(content);
+         $("#modal").modal();
+     }
+    return bs_alert;
+});
\ No newline at end of file
diff --git a/template/oj_base.html b/template/oj_base.html
index 0eb30327..49b47266 100644
--- a/template/oj_base.html
+++ b/template/oj_base.html
@@ -18,7 +18,7 @@
     <!-- custom css end -->
 
     <!-- global css begin -->
-    <link href="/static/css/app.css" rel="stylesheet">
+    <link href="/static/css/oj.css" rel="stylesheet">
     <!-- global css end -->
 </head>
 
@@ -75,6 +75,24 @@
 
 <!-- custom body begin -->
 {% block body %}{% endblock %}
+<div class="modal fade" id="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                        aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">提示</h4>
+            </div>
+            <div class="modal-body">
+                <p id="modal-text"></p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- custom body end -->
 <script src="/static/js/require.js" data-main="/static/js/app/oj.js"></script>
 <!-- footer begin -->