diff --git a/service/app/static/css/styles.scss b/service/app/static/css/styles.scss
new file mode 100644
index 0000000..c61aae2
--- /dev/null
+++ b/service/app/static/css/styles.scss
@@ -0,0 +1,217 @@
+/** #C94E4E **/
+$color : #A05684;
+
+$red : #F22424;
+$accent : darken($color,10);
+$first_header : darken($color, 16);
+
+$header_height : 58px;
+$btn_radius : 4px;
+$radius : 15px;
+$sidebar:210px;
+
+
+body {
+    overflow-x: hidden;
+    background-color: $color;
+}
+
+.label-control {
+    padding-top: 5pt;
+}
+
+.form-control {
+    width: 260pt;
+}
+
+.btn {
+    margin: 10pt 0pt;
+}
+
+#heading {
+    padding: 5pt 20pt;
+    width:100%;
+    color: white;
+    height: 80pt;
+
+    img {
+        width: 260px;
+        height: 65px;
+        margin: 10pt 0pt 10pt 10pt;
+        float:left;
+    }
+
+    #loginSpan {
+        float:right;
+
+        color: white;
+
+    }
+    #loginSpan a {
+        font-weight: bold;
+        color: white;
+    }
+}
+
+
+footer {
+    float:right;
+    margin: 20pt;
+
+    .footer {
+        margin: 10pt;
+        color: white;
+    }
+}
+
+.warning {
+    color: $red;
+    font-size: 20px;
+    font-weight:bold;
+    padding-left: 10pt;
+}
+
+a {
+    color: $accent;
+}
+
+.i-layout {
+    border-radius: $radius;
+    background: #E9D5ED;
+    border: 3px solid $color;
+}
+
+.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: $sidebar;
+}
+
+.content {
+    background-color: white;
+    border-radius: $radius;
+    padding: 5pt 15pt 15pt 15pt;
+
+    h1,h2,h3,h4 {
+       color: $first_header;
+    }
+}
+
+.alert {
+    border-radius: $radius;
+}
+
+#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: $color;
+    -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: $sidebar;
+}
+
+#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: $sidebar;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    a {
+        border-radius: $radius;
+        color: white;
+        font-weigth: bold;
+    }
+    a:hover {
+        color: $accent;
+        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;
+    }
+}
+
+