diff --git a/frontend/admin/index.html b/frontend/admin/index.html
index 2a4e8bc..d339127 100644
--- a/frontend/admin/index.html
+++ b/frontend/admin/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <title>Online Judge Admin</title>
-  </head>
-  <body>
-  <div id="app">
-  </div>
-  </body>
+</head>
+<body>
+<div class="cssload-battery">
+    <div class="cssload-liquid"></div>
+</div>
+<div id="app">
+</div>
+</body>
 </html>
diff --git a/frontend/admin/package.json b/frontend/admin/package.json
index 0270e4e..684d788 100644
--- a/frontend/admin/package.json
+++ b/frontend/admin/package.json
@@ -20,6 +20,7 @@
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
     "babel-register": "^6.0.0",
+    "codemirror": "^5.17.0",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.23.0",
     "eventsource-polyfill": "^0.9.6",
@@ -42,6 +43,7 @@
     "vue-resource": "^0.9.3",
     "vue-router": "^0.7.13",
     "vue-style-loader": "^1.0.0",
+    "vue-tagsinput": "^0.3.1",
     "webpack": "^1.12.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
diff --git a/frontend/admin/src/App.vue b/frontend/admin/src/App.vue
index 6b5b518..67fbb92 100644
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -22,8 +22,10 @@
 </template>
 
 <style>
+    @import "../../static/css/loading.css";
     @import "../../static/css/bootstrap.css";
     @import "../../static/css/todc-bootstrap.css";
+
 </style>
 
 <script>
diff --git a/frontend/admin/src/main.js b/frontend/admin/src/main.js
index b1556a4..76632dc 100644
--- a/frontend/admin/src/main.js
+++ b/frontend/admin/src/main.js
@@ -92,5 +92,8 @@ router.map({
     }
 });
 
+document.getElementsByClassName("cssload-battery")[0].style.display = "none";
+
 router.redirect({"/user": "/user/1"});
-router.start(App, '#app');
\ No newline at end of file
+router.start(App, '#app');
+
diff --git a/frontend/static/css/loading.css b/frontend/static/css/loading.css
new file mode 100644
index 0000000..0ec5fdf
--- /dev/null
+++ b/frontend/static/css/loading.css
@@ -0,0 +1,564 @@
+
+.cssload-battery {
+    display: block;
+    margin: 175px auto;
+    position: relative;
+    width: 4.25rem;
+    height: 7.5rem;
+    box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
+    -o-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
+    -ms-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
+    -webkit-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
+    -moz-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
+    border-radius: 0.09rem;
+    -o-border-radius: 0.09rem;
+    -ms-border-radius: 0.09rem;
+    -webkit-border-radius: 0.09rem;
+    -moz-border-radius: 0.09rem;
+    background: white;
+}
+
+.cssload-battery:before {
+    content: '';
+    position: absolute;
+    left: 0.8625rem;
+    right: 0.5625rem;
+    top: -0.8375rem;
+    height: 0.7375rem;
+    width: 2.125rem;
+    background: rgb(66, 92, 119);
+    border-radius: 0.18rem;
+    -o-border-radius: 0.18rem;
+    -ms-border-radius: 0.18rem;
+    -webkit-border-radius: 0.18rem;
+    -moz-border-radius: 0.18rem;
+}
+
+.cssload-battery:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-right: 4.25rem solid transparent;
+    border-bottom: 7.05rem solid rgba(255, 255, 255, 0.325);
+}
+
+.cssload-liquid {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 4.25rem;
+    background: rgb(113, 251, 133);
+    animation: load 5.96s infinite;
+    -o-animation: load 5.96s infinite;
+    -ms-animation: load 5.96s infinite;
+    -webkit-animation: load 5.96s infinite;
+    -moz-animation: load 5.96s infinite;
+}
+
+.cssload-liquid:after, .cssload-liquid:before {
+    content: '';
+    position: absolute;
+    top: -0.5rem;
+    height: 2.125rem;
+    width: 2.4625rem;
+    background: rgb(113, 251, 133);
+    opacity: 0;
+    border-radius: 50%;
+    -o-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+}
+
+.cssload-liquid:after {
+    right: 0;
+    animation: cssload-liquid-1 5.96s infinite;
+    -o-animation: cssload-liquid-1 5.96s infinite;
+    -ms-animation: cssload-liquid-1 5.96s infinite;
+    -webkit-animation: cssload-liquid-1 5.96s infinite;
+    -moz-animation: cssload-liquid-1 5.96s infinite;
+}
+
+.cssload-liquid:before {
+    left: 0;
+    animation: cssload-liquid-2 5.96s infinite;
+    -o-animation: cssload-liquid-2 5.96s infinite;
+    -ms-animation: cssload-liquid-2 5.96s infinite;
+    -webkit-animation: cssload-liquid-2 5.96s infinite;
+    -moz-animation: cssload-liquid-2 5.96s infinite;
+}
+
+@keyframes load {
+    0% {
+        top: 7.5rem;
+    }
+    70% {
+        top: 2.125rem;
+    }
+    90% {
+        top: 0;
+    }
+    95% {
+        top: 0;
+    }
+    100% {
+        top: 7.5rem;
+    }
+}
+
+@-o-keyframes load {
+    0% {
+        top: 7.5rem;
+    }
+    70% {
+        top: 2.125rem;
+    }
+    90% {
+        top: 0;
+    }
+    95% {
+        top: 0;
+    }
+    100% {
+        top: 7.5rem;
+    }
+}
+
+@-ms-keyframes load {
+    0% {
+        top: 7.5rem;
+    }
+    70% {
+        top: 2.125rem;
+    }
+    90% {
+        top: 0;
+    }
+    95% {
+        top: 0;
+    }
+    100% {
+        top: 7.5rem;
+    }
+}
+
+@-webkit-keyframes load {
+    0% {
+        top: 7.5rem;
+    }
+    70% {
+        top: 2.125rem;
+    }
+    90% {
+        top: 0;
+    }
+    95% {
+        top: 0;
+    }
+    100% {
+        top: 7.5rem;
+    }
+}
+
+@-moz-keyframes load {
+    0% {
+        top: 7.5rem;
+    }
+    70% {
+        top: 2.125rem;
+    }
+    90% {
+        top: 0;
+    }
+    95% {
+        top: 0;
+    }
+    100% {
+        top: 7.5rem;
+    }
+}
+
+@keyframes cssload-liquid-1 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    22% {
+        height: 0.28125rem;
+        top: 0.375rem;
+        opacity: 1;
+    }
+    25% {
+        top: -0.25rem;
+    }
+    35% {
+        height: 2.125rem;
+        top: -0.5rem;
+    }
+    55% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 0.61875rem;
+        opacity: 1;
+        top: -0.275rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-o-keyframes cssload-liquid-1 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    22% {
+        height: 0.28125rem;
+        top: 0.375rem;
+        opacity: 1;
+    }
+    25% {
+        top: -0.25rem;
+    }
+    35% {
+        height: 2.125rem;
+        top: -0.5rem;
+    }
+    55% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 0.61875rem;
+        opacity: 1;
+        top: -0.275rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-ms-keyframes cssload-liquid-1 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    22% {
+        height: 0.28125rem;
+        top: 0.375rem;
+        opacity: 1;
+    }
+    25% {
+        top: -0.25rem;
+    }
+    35% {
+        height: 2.125rem;
+        top: -0.5rem;
+    }
+    55% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 0.61875rem;
+        opacity: 1;
+        top: -0.275rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes cssload-liquid-1 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    22% {
+        height: 0.28125rem;
+        top: 0.375rem;
+        opacity: 1;
+    }
+    25% {
+        top: -0.25rem;
+    }
+    35% {
+        height: 2.125rem;
+        top: -0.5rem;
+    }
+    55% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 0.61875rem;
+        opacity: 1;
+        top: -0.275rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes cssload-liquid-1 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    22% {
+        height: 0.28125rem;
+        top: 0.375rem;
+        opacity: 1;
+    }
+    25% {
+        top: -0.25rem;
+    }
+    35% {
+        height: 2.125rem;
+        top: -0.5rem;
+    }
+    55% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 0.61875rem;
+        opacity: 1;
+        top: -0.275rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes cssload-liquid-2 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    17.5% {
+        height: 0.28125rem;
+        top: 0.2rem;
+        opacity: 1;
+    }
+    20% {
+        top: -0.25rem;
+    }
+    25% {
+        height: 2.40625rem;
+        top: -0.625rem;
+    }
+    45% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 2.40625rem;
+        opacity: 1;
+        top: -0.5rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-o-keyframes cssload-liquid-2 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    17.5% {
+        height: 0.28125rem;
+        top: 0.2rem;
+        opacity: 1;
+    }
+    20% {
+        top: -0.25rem;
+    }
+    25% {
+        height: 2.40625rem;
+        top: -0.625rem;
+    }
+    45% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 2.40625rem;
+        opacity: 1;
+        top: -0.5rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-ms-keyframes cssload-liquid-2 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    17.5% {
+        height: 0.28125rem;
+        top: 0.2rem;
+        opacity: 1;
+    }
+    20% {
+        top: -0.25rem;
+    }
+    25% {
+        height: 2.40625rem;
+        top: -0.625rem;
+    }
+    45% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 2.40625rem;
+        opacity: 1;
+        top: -0.5rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes cssload-liquid-2 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    17.5% {
+        height: 0.28125rem;
+        top: 0.2rem;
+        opacity: 1;
+    }
+    20% {
+        top: -0.25rem;
+    }
+    25% {
+        height: 2.40625rem;
+        top: -0.625rem;
+    }
+    45% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 2.40625rem;
+        opacity: 1;
+        top: -0.5rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes cssload-liquid-2 {
+    0% {
+        height: 0;
+        opacity: 0;
+        top: -0.5rem;
+    }
+    17.5% {
+        height: 0.28125rem;
+        top: 0.2rem;
+        opacity: 1;
+    }
+    20% {
+        top: -0.25rem;
+    }
+    25% {
+        height: 2.40625rem;
+        top: -0.625rem;
+    }
+    45% {
+        height: 0.28125rem;
+        top: -0.125rem;
+    }
+    60% {
+        height: 2.40625rem;
+        opacity: 1;
+        top: -0.5rem;
+    }
+    96% {
+        height: 1.84375rem;
+        opacity: 0;
+        top: 0.5rem;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+    }
+}
\ No newline at end of file
diff --git a/frontend/static/css/webuploader.css b/frontend/static/css/webuploader.css
index 12f451f..658555f 100644
--- a/frontend/static/css/webuploader.css
+++ b/frontend/static/css/webuploader.css
@@ -10,7 +10,7 @@
 	position: relative;
 	display: inline-block;
 	cursor: pointer;
-	background: #00b7ee;
+	background: #4d90fe;
 	padding: 10px 15px;
 	color: #fff;
 	text-align: center;
@@ -18,7 +18,7 @@
 	overflow: hidden;
 }
 .webuploader-pick-hover {
-	background: #00a2d4;
+	background: #4d90fe;
 }
 
 .webuploader-pick-disable {
