diff --git a/public/css/app.css b/public/css/app.css
index 224df4d..cf75cd7 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -92,6 +92,47 @@
   font-weight: bold;
 }
 
+.success {
+  background: #2cdc00;
+  text-align: center;
+  color: #fff;
+  width: 100%;
+  max-width: 980px;
+}
+.warning {
+  background: #e23c3c;
+  text-align: center;
+  color: #fff;
+  width: 100%;
+  max-width: 980px;
+}
+.alert-system {
+  position: relative;
+  width: 100%;
+}
+.alert-system .alert {
+  -webkit-transition: all .4s ease;
+  -o-transition: all .4s ease;
+  transition: all .4s ease;
+  position: fixed;
+  top: -30px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  font-size: 16px;
+  padding: 10px;
+  margin: auto;
+  left: 0;
+  right: 0;
+}
+.loggedout .alert-system .alert.visible, .no-navigation .alert-system .alert.visible {
+  top: 0;
+}
+.alert-system .alert.visible {
+  top: 60px;
+}
+
+/*/ Legacy Alert System /*/
+
 .loggedout #alert {
   animation: alertanim_loggedout !important;
   top: 0px !important;
@@ -1135,4 +1176,13 @@ div#testingSitePanelWrapper,
   #footer_signup {
     width: 100%;
   }
+  .alert-system .alert {
+    border-radius: 0;
+  }
+  .success {
+    max-width: 100%;
+  }
+  .warning {
+    max-width: 100%;
+  }
 }
\ No newline at end of file