diff --git a/public/css/background.css b/public/css/background.css
new file mode 100644
index 0000000..bb6813e
--- /dev/null
+++ b/public/css/background.css
@@ -0,0 +1,149 @@
+/* https://codepen.io/mohaiman/pen/MQqMyo */
+
+*{
+ margin: 0px;
+ padding: 0px;
+}
+
+body{
+ font-family: 'Exo', sans-serif;
+}
+
+
+.context {
+ width: 100%;
+ position: absolute;
+ top:50vh;
+
+}
+
+.context h1{
+ text-align: center;
+ color: #fff;
+ font-size: 50px;
+}
+
+
+.area{
+ background: rgb(59,44,207);
+ background: -webkit-linear-gradient(90deg, rgba(59,44,207,1) 0%, rgba(140,41,151,1) 100%);
+ width: 100%;
+ height:100vh;
+
+
+}
+
+.circles{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.circles li{
+ position: absolute;
+ display: block;
+ list-style: none;
+ width: 20px;
+ height: 20px;
+ background: rgba(255, 255, 255, 0.2);
+ animation: animate 25s linear infinite;
+ bottom: -150px;
+
+}
+
+.circles li:nth-child(1){
+ left: 25%;
+ width: 80px;
+ height: 80px;
+ animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+ left: 10%;
+ width: 20px;
+ height: 20px;
+ animation-delay: 2s;
+ animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+ left: 70%;
+ width: 20px;
+ height: 20px;
+ animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+ left: 40%;
+ width: 60px;
+ height: 60px;
+ animation-delay: 0s;
+ animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+ left: 65%;
+ width: 20px;
+ height: 20px;
+ animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+ left: 75%;
+ width: 110px;
+ height: 110px;
+ animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+ left: 35%;
+ width: 150px;
+ height: 150px;
+ animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+ left: 50%;
+ width: 25px;
+ height: 25px;
+ animation-delay: 15s;
+ animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+ left: 20%;
+ width: 15px;
+ height: 15px;
+ animation-delay: 2s;
+ animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+ left: 85%;
+ width: 150px;
+ height: 150px;
+ animation-delay: 0s;
+ animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+ 0%{
+ transform: translateY(0) rotate(0deg);
+ opacity: 1;
+ border-radius: 0;
+ }
+
+ 100%{
+ transform: translateY(-1000px) rotate(720deg);
+ opacity: 0;
+ border-radius: 50%;
+ }
+
+}
diff --git a/resources/views/index.edge b/resources/views/index.edge
index e235afb..9df2391 100644
--- a/resources/views/index.edge
+++ b/resources/views/index.edge
@@ -13,11 +13,25 @@
+
{{ antl.formatMessage('messages.title') }} v{{ version }}
-
+
+
+