diff --git a/service/app/static/css/styles.css b/service/app/static/css/styles.css
new file mode 100644
index 0000000..40ee94e
--- /dev/null
+++ b/service/app/static/css/styles.css
@@ -0,0 +1,157 @@
+/** #C94E4E **/
+body {
+  overflow-x: hidden;
+  background-color: #A05684; }
+
+.label-control {
+  padding-top: 5pt; }
+
+.form-control {
+  width: 260pt; }
+
+.btn {
+  margin: 10pt 0pt; }
+
+#heading {
+  padding: 5pt 20pt;
+  width: 100%;
+  color: white;
+  height: 80pt; }
+  #heading img {
+    width: 260px;
+    height: 65px;
+    margin: 10pt 0pt 10pt 10pt;
+    float: left; }
+  #heading #loginSpan {
+    float: right;
+    color: white; }
+  #heading #loginSpan a {
+    font-weight: bold;
+    color: white; }
+
+footer {
+  float: right;
+  margin: 20pt; }
+  footer .footer {
+    margin: 10pt;
+    color: white; }
+
+.warning {
+  color: #F22424;
+  font-size: 20px;
+  font-weight: bold;
+  padding-left: 10pt; }
+
+a {
+  color: #7f4469; }
+
+.i-layout {
+  border-radius: 15px;
+  background: #E9D5ED;
+  border: 3px solid #A05684; }
+
+.btn-default, .btn-primary {
+  width: 100pt; }
+
+.btn-sm {
+  width: 70pt; }
+
+#wrapper {
+  padding-left: 0px;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease; }
+
+#wrapper.toggled {
+  padding-left: 210px; }
+
+.content {
+  background-color: white;
+  border-radius: 15px;
+  padding: 5pt 15pt 15pt 15pt; }
+  .content h1, .content h2, .content h3, .content h4 {
+    color: #6b3958; }
+
+.alert {
+  border-radius: 15px; }
+
+#togglewrap {
+  border-style: solid;
+  border-width: 5px; }
+
+#sidebar-wrapper {
+  z-index: 1000;
+  position: absolute;
+  left: 250px;
+  width: 0;
+  height: 100%;
+  margin-left: -250px;
+  overflow-y: auto;
+  background: #A05684;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease; }
+
+#wrapper.toggled #sidebar-wrapper {
+  width: 210px; }
+
+#page-content-wrapper {
+  width: 100%; }
+
+#wrapper:not(.toggled) #page-content-wrapper {
+  padding: 0pt 10pt; }
+
+#wrapper.toggled #page-content-wrapper {
+  position: relative;
+  width: 100%;
+  padding-right: 10pt; }
+
+.sidebar-nav {
+  top: 0;
+  width: 210px;
+  margin: 0;
+  padding: 0;
+  list-style: none; }
+  .sidebar-nav a {
+    border-radius: 15px;
+    color: white;
+    font-weigth: bold; }
+  .sidebar-nav a:hover {
+    color: #7f4469;
+    font-weigth: bold; }
+
+@media (max-width: 1000px) {
+  #heading h2 {
+    font-size: 19pt; }
+
+  .content {
+    margin: 7pt 5pt; }
+
+  #loginSpan {
+    display: none; } }
+@media (max-width: 767px) {
+  #heading {
+    display: none; }
+
+  #wrapper {
+    padding-left: 250px; }
+
+  #wrapper.toggled {
+    padding-left: 0; }
+
+  #sidebar-wrapper {
+    width: 250px; }
+
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0; }
+
+  #page-content-wrapper {
+    padding: 20px; }
+
+  #wrapper.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0; } }
+
+/*# sourceMappingURL=styles.css.map */