diff --git a/assets/css/app.css b/assets/css/app.css
new file mode 100644
index 0000000000..cb33b13159
--- /dev/null
+++ b/assets/css/app.css
@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
index e69ef34af6..d12f9ccffe 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -9,5 +9,5 @@
 @import "~bootstrap-select/dist/css/bootstrap-select.css";
 
 @import '~jquery-ui/themes/base/all.css';
-
+@import "scss/index";
 @import 'base.css';
diff --git a/assets/css/base.css b/assets/css/base.css
index 96594bdefb..872115b4fc 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -9,50 +9,6 @@
         yannick.warnier@beeznest.com
     Version: 1.0
 */
-/* Sticky footer styles
--------------------------------------------------- */
-html {
-    position: relative;
-    min-height: 100%;
-}
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 85px !important;
-}
-#footer-section.page-footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    /* Set the fixed height of the footer here */
-    height: 60px;
-    background-color: #f5f5f5;
-}
-/* Custom page CSS
--------------------------------------------------- */
-/* Not required for template or sticky footer method. */
-
-#cm-content > .container {
-    padding-bottom: 60px;
-    margin-bottom: 10px;
-}
-
-/*!
- * IE10 viewport hack for Surface/desktop Windows 8 bug
- * Copyright 2014-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-/*
- * See the Getting Started docs for more information:
- * http://getbootstrap.com/getting-started/#support-ie10-width
- */
-@-ms-viewport     { width: device-width; }
-@-o-viewport      { width: device-width; }
-@viewport         { width: device-width; }
-
-select {
-    width: auto;
-}
 
 /*------------------------------*/
 .admin-block-version {
@@ -90,7 +46,6 @@ select {
     display: block;
     padding-bottom: 100%;
     overflow: hidden;
-
 }
 
 .gallery .frame {
@@ -124,10 +79,6 @@ select {
     cursor: pointer;
 }
 
-.logo {
-    margin: 10px 0;
-}
-
 #form-login .input-group {
     margin-top: 10px;
     margin-bottom: 10px;
diff --git a/assets/css/scss/components/footer.scss b/assets/css/scss/components/footer.scss
new file mode 100644
index 0000000000..e3bc289c8e
--- /dev/null
+++ b/assets/css/scss/components/footer.scss
@@ -0,0 +1,4 @@
+footer {
+  z-index: 1;
+  position: relative;
+}
diff --git a/assets/css/scss/components/index.scss b/assets/css/scss/components/index.scss
new file mode 100644
index 0000000000..c3af14d65d
--- /dev/null
+++ b/assets/css/scss/components/index.scss
@@ -0,0 +1,4 @@
+@import 'footer';
+@import 'topbar';
+@import 'loader';
+@import 'sidebar';
\ No newline at end of file
diff --git a/assets/css/scss/components/loader.scss b/assets/css/scss/components/loader.scss
new file mode 100644
index 0000000000..9258567bf2
--- /dev/null
+++ b/assets/css/scss/components/loader.scss
@@ -0,0 +1,43 @@
+#loader {
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
+  display: default;
+}
+
+#loader.fadeOut {
+  opacity: 0;
+  display: none;
+}
+
+
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: calc(50% - 20px);
+  left: calc(50% - 20px);
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+      opacity: 0;
+    }
+}
diff --git a/assets/css/scss/components/sidebar.scss b/assets/css/scss/components/sidebar.scss
new file mode 100644
index 0000000000..8b592e659c
--- /dev/null
+++ b/assets/css/scss/components/sidebar.scss
@@ -0,0 +1,479 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Sidebar
+// + @Sidebar Inner
+// + @Sidebar Header
+// + @Sidebar Menu
+// + @Sidebar Collapsed
+
+// ---------------------------------------------------------
+// @Sidebar
+// ---------------------------------------------------------
+
+.sidebar {
+  background-color: $default-white;
+  bottom: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: all 0.2s ease;
+  width: $offscreen-size;
+  z-index: 1000;
+
+  ul {
+    list-style-type: none;
+  }
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    width: $collapsed-size;
+
+    .sidebar-inner {
+      .sidebar-logo {
+        border-bottom: 1px solid transparent;
+        padding: 0;
+
+        a {
+          .logo {
+            background-position: center center;
+            width: $collapsed-size;
+          }
+        }
+      }
+
+      .sidebar-menu {
+        overflow-x: hidden;
+
+        > li {
+          > a {
+            .title {
+              display: none;
+            }
+          }
+        }
+
+        li {
+          &.dropdown {
+            .arrow {
+              opacity: 0;
+            }
+
+            &.open {
+              ul.dropdown-menu {
+                display: none !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include to($breakpoint-md) {
+    left: -$offscreen-size;
+    width: calc(#{$offscreen-size} - 30px);
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Inner
+// ---------------------------------------------------------
+
+.sidebar-inner {
+  position: relative;
+  height: 100%;
+}
+
+// ---------------------------------------------------------
+// @Sidebar Header
+// ---------------------------------------------------------
+
+.sidebar-logo {
+  border-bottom: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+  line-height: 0;
+  padding: 0 20px;
+  transition: all 0.2s ease;
+
+  a {
+    display: inline-block;
+    width: 100%;
+
+    .logo {
+      background-position: center left;
+      background-repeat: no-repeat;
+      display: inline-block;
+      min-height: calc(#{$header-height} - 1px);
+      width: 100%;
+      width: 70px;
+    }
+
+    .logo-text {
+      color: $grey-900;
+    }
+  }
+
+  .mobile-toggle {
+    display: none;
+    float: right;
+    font-size: 18px;
+    line-height: calc(#{$header-height} - 1px);
+
+    a {
+      color: $default-text-color;
+    }
+
+    @include to($breakpoint-md) {
+      display: inline-block;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      display: none;
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Menu
+// ---------------------------------------------------------
+
+.sidebar-menu {
+  @include clearfix;
+  border-right: 1px solid $border-color;
+  height: calc(100vh - #{$header-height});
+  list-style: none;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  position: relative;
+  background: linear-gradient(180deg, #0181bf, #00bcda);
+
+  .nav-header{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 12px;
+    color: $default-white;
+  }
+
+  .sidebar-divider{
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid  #217aa4;
+    border-bottom: 1px solid #16b1fd;
+  }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .sidebar-link {
+    &.active::before {
+      background: $default-warning;
+      content: '';
+      display: block;
+      height: 100%;
+      left: -4px;
+      position: absolute;
+      top: 0;
+      width: 8px;
+    }
+  }
+
+  li {
+    position: relative;
+
+    &.dropdown {
+      .arrow {
+        font-size: 10px;
+        line-height: 40px;
+        position: absolute;
+        right: 30px;
+        transition: all 0.05s ease-in;
+
+        @include to($breakpoint-md) {
+          right: 25px;
+        }
+      }
+
+      &.open {
+        > a {
+          color: $default-white;
+
+          &.dropdown-toggle{
+            background: $default-active;
+          }
+
+          .icon-holder {
+            color: $default-info;
+          }
+
+          > .arrow {
+            transform: rotate(90deg);
+          }
+        }
+
+        > .dropdown-menu {
+          display: block;
+
+          .dropdown-menu {
+            padding-left: 20px;
+          }
+
+          .arrow {
+            line-height: 25px;
+          }
+        }
+      }
+    }
+
+    a {
+      color: $default-white;
+      transition: all 0.3s ease;
+      display: block;
+      font-size: 14px;
+      font-weight: normal;
+      padding: 5px 15px;
+      position: relative;
+      white-space: nowrap;
+
+      i{
+        border-radius: 6px;
+        display: inline-block;
+        font-size: 17px;
+        height: 35px;
+        left: 0;
+        line-height: 35px;
+        margin-right: 14px;
+        position: relative;
+        text-align: center;
+        transition: all 0.3s ease;
+        width: 35px;
+      }
+
+      &.active{
+        background: $default-active;
+      }
+
+      &:hover,
+      &:focus {
+        color: $default-info;
+        text-decoration: none;
+        background: $default-active;
+
+        .icon-holder {
+          color: $default-info;
+        }
+      }
+    }
+  }
+
+  > li {
+    &.dropdown {
+      ul {
+        &.dropdown-menu {
+          background-color: #0099ca;
+          border-radius: 0;
+          border: 0;
+          box-shadow: none;
+          float: none;
+          padding-left: 10px;
+          padding-top: 0;
+          position: relative;
+          width: 100%;
+
+          > li {
+            > a {
+              display: block;
+              padding: 10px 15px;
+
+              &:hover,
+              &:focus {
+                background-color: transparent;
+                color: $default-dark;
+              }
+            }
+
+            &.active {
+              a {
+                color: $default-dark;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Collapsed
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .sidebar {
+    @include from($breakpoint-xl) {
+      width: $collapsed-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid transparent;
+          padding: 0;
+        }
+
+        .sidebar-menu {
+          overflow-x: hidden;
+
+          > li {
+            &.nav-header{
+              display: none;
+            }
+
+            > a {
+              .title {
+                display: none;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 0;
+              }
+
+              &.open {
+                ul.dropdown-menu {
+                  display: none !important;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &:hover {
+        width: $offscreen-size;
+
+
+        .sidebar-inner {
+          .sidebar-logo {
+            border-bottom: 1px solid $border-color;
+            padding: 0 20px;
+          }
+
+          .sidebar-menu {
+            > li {
+              &.nav-header{
+                display: inline-block;
+              }
+              > a {
+                .title {
+                  display: inline-block;
+                }
+              }
+            }
+
+            li {
+              &.dropdown {
+                .arrow {
+                  opacity: 1;
+                }
+              }
+
+              &.open {
+                > ul.dropdown-menu {
+                  display: block !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+
+          > a {
+            .logo {
+              background-position: center left;
+              width: 150px;
+            }
+          }
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include to($breakpoint-md) {
+      left: 0;
+    }
+  }
+}
diff --git a/assets/css/scss/components/topbar.scss b/assets/css/scss/components/topbar.scss
new file mode 100644
index 0000000000..6ba9e09981
--- /dev/null
+++ b/assets/css/scss/components/topbar.scss
@@ -0,0 +1,227 @@
+// ---------------------------------------------------------
+// @TOC
+
+// + @Topbar
+// + @Collapsed State
+
+// ---------------------------------------------------------
+// @Topbar
+// ---------------------------------------------------------
+
+.header {
+  background-color: $default-white;
+  border-bottom: 1px solid $border-color;
+  display: block;
+  margin-bottom: 0;
+  padding: 0;
+  position: fixed;
+  transition: all 0.2s ease;
+  width: calc(100% - #{$offscreen-size});
+  z-index: 800;
+  box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.15);
+
+  @include to($breakpoint-md) {
+    width: 100%;
+  }
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    width: calc(100% - #{$collapsed-size});
+  }
+
+  .header-container {
+    @include clearfix;
+
+    height: $header-height;
+
+    .btn-menu{
+      padding-left: 10px;
+      padding-right: 0;
+    }
+
+    .nav-left,
+    .nav-right {
+      list-style: none;
+      margin-bottom: 0;
+      padding-left: 0;
+      position: relative;
+
+      > li {
+        float: left;
+
+        &.btn-padding{
+          padding-top: 15px;
+          padding-bottom: 15px;
+          margin-left: 5px;
+          margin-right: 5px;
+        }
+
+        > a {
+          color: $default-text-color;
+          display: block;
+          line-height: $header-height;
+          min-height: $header-height;
+          padding: 0 15px;
+          transition: all 0.2s ease-in-out;
+
+          &.btn{
+            min-height: 30px;
+            padding: 0 10px;
+            line-height: 30px;
+          }
+
+          i {
+            font-size: 17px;
+          }
+
+          &:hover,
+          &:focus {
+            color: $default-dark;
+            text-decoration: none;
+          }
+
+          @include to($breakpoint-md) {
+            padding: 0 15px;
+          }
+        }
+      }
+
+      .notifications {
+        position: relative;
+
+        .counter {
+          background-color: $default-danger;
+          border-radius: 50px;
+          color: $default-white;
+          font-size: 10px;
+          line-height: 1;
+          padding: 3px 5.5px;
+          position: absolute;
+          right: 6px;
+          top: 12px;
+        }
+
+        .dropdown-menu {
+          min-width: 350px;
+          padding: 0;
+
+          @include to($breakpoint-sm) {
+            max-width: 300px;
+          }
+        }
+      }
+    }
+
+    .dropdown-menu {
+      display: block;
+      margin: 0;
+      transform-origin: top right;
+      transform: scale(0, 0);
+      transition: transform 0.15s ease-out;
+
+      .divider {
+        border-bottom: 1px solid $border-color;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      > li {
+        > a {
+          transition: all 0.2s ease-out;
+        }
+      }
+    }
+
+    .show {
+      .dropdown-menu {
+        transform: scale(1, 1);
+      }
+    }
+
+    .nav-left {
+      float: left;
+      margin-left: 15px;
+    }
+
+    .nav-right {
+      float: right;
+
+      .dropdown-menu {
+        left: auto;
+        right: 0;
+
+        > li {
+          width: 100%;
+
+          > a {
+            line-height: 1.5;
+            min-height: auto;
+            padding: 10px 15px;
+          }
+        }
+      }
+    }
+  }
+
+  .search-box {
+    .search-icon-close {
+      display: none;
+    }
+
+    &.active {
+      .search-icon {
+        display: none;
+      }
+
+      .search-icon-close {
+        display: inline-block;
+      }
+    }
+  }
+
+  .search-input {
+    display: none;
+
+    &.active {
+      display: inline-block;
+    }
+
+    input {
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+      font-size: 18px;
+      height: 40px;
+      margin-top: 12px;
+      outline: none;
+      padding: 5px;
+
+      @include to($breakpoint-sm) {
+        width: 85px;
+      }
+
+      @include placeholder {
+        color: lighten($default-text-color, 20%);
+        font-style: italic;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Collapsed State
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .header {
+    width: calc(100% - #{$collapsed-size});
+
+    @include to($breakpoint-md) {
+      width: 100%;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      width: calc(100% - #{$offscreen-size});
+    }
+  }
+}
+
diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss
new file mode 100644
index 0000000000..3667d1f0aa
--- /dev/null
+++ b/assets/css/scss/index.scss
@@ -0,0 +1,4 @@
+@import "utils/index";
+@import 'settings/index';
+@import 'screens/index';
+@import 'components/index';
\ No newline at end of file
diff --git a/assets/css/scss/screens/base.scss b/assets/css/scss/screens/base.scss
new file mode 100644
index 0000000000..7f651bd578
--- /dev/null
+++ b/assets/css/scss/screens/base.scss
@@ -0,0 +1,227 @@
+html, html a, body {
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  transition: all 0.3s ease-in-out;
+}
+
+body {
+  font-family: $font-primary;
+  font-size: 14px;
+  color: $default-text-color;
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-secondary;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+
+  a {
+    font-family: $font-secondary;
+  }
+
+  small {
+    font-weight: 300;
+    color: lighten($default-dark, 5%);
+  }
+}
+
+p {
+  font-family: $font-primary;
+  line-height: 1.9;
+}
+
+.lead {
+  font-size: 18px;
+}
+
+ul {
+  margin-bottom: 0;
+}
+
+a {
+  color: $default-info;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: darken($default-info, 10%);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.text-gray {
+    &:hover,
+    &:focus,
+    &.active {
+      color: $default-dark !important;
+    }
+  }
+}
+
+:focus {
+  outline: none;
+}
+
+hr {
+  border-top: 1px solid $border-color;
+}
+
+.btn-create-one{
+  border-color: #b8daff;
+  background-color: #cce5ff;
+  color: #004085 !important;
+}
+.btn-create-two{
+  border-color: #c3e6cb;
+  background-color: #d4edda;
+  color: #155724 !important;
+}
+.btn-create-three{
+  border-color: #cecece;
+  background-color: #ffffff;
+  color: #374548 !important;
+}
+.footer p{
+  margin: 0;
+  padding: 0;
+}
+.footer{
+  padding: 18px;
+}
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Page Container
+// + @Main Content
+// + @Full Container
+// + @Collapsed State
+
+// ---------------------------------------------------------
+// @Page Container
+// ---------------------------------------------------------
+
+.page-container {
+  min-height: 100vh;
+  padding-left: $offscreen-size;
+  transition: all 0.2s ease;
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    padding-left: $collapsed-size;
+  }
+
+  @include to($breakpoint-md) {
+    padding-left: 0;
+  }
+}
+
+// ---------------------------------------------------------
+// @Main Content
+// ---------------------------------------------------------
+
+.main-content {
+  padding: 85px 20px 20px;
+  min-height: calc(100vh - 61px);
+  &.bg-content{
+    background-color: $theme-bg;
+  }
+
+  @include to($breakpoint-md) {
+    padding: 85px 5px 5px;
+  }
+}
+
+.remain-height {
+  height: calc(100vh - 126px);
+}
+
+// ---------------------------------------------------------
+// @Full Container
+// ---------------------------------------------------------
+
+.full-container {
+  left: $offscreen-size;
+  min-height: calc(100vh - #{$header-height});
+  position: absolute;
+  right: 0;
+  top: $header-height;
+  transition: all 0.2s ease;
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    left: 0;
+    padding-left: $collapsed-size;
+  }
+
+  @include to($breakpoint-md) {
+    left: 0;
+  }
+}
+
+// ---------------------------------------------------------
+// @Collapsed State
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .page-container {
+    padding-left: $collapsed-size;
+
+    @include to($breakpoint-md) {
+      padding-left: 0;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      padding-left: $offscreen-size;
+    }
+  }
+
+  .full-container {
+    left: $collapsed-size;
+
+    @include to($breakpoint-md) {
+      left: 0;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      left: $offscreen-size;
+      padding-left: 0;
+    }
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+  .sidebar-menu .nav-header{
+    display: none;
+  }
+}
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) {
+  .sidebar-menu .nav-header{
+    display: none;
+  }
+}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+}
+
diff --git a/assets/css/scss/screens/index.scss b/assets/css/scss/screens/index.scss
new file mode 100644
index 0000000000..d71f710be4
--- /dev/null
+++ b/assets/css/scss/screens/index.scss
@@ -0,0 +1 @@
+@import 'base';
diff --git a/assets/css/scss/settings/breakpoints.scss b/assets/css/scss/settings/breakpoints.scss
new file mode 100644
index 0000000000..96dcfe001b
--- /dev/null
+++ b/assets/css/scss/settings/breakpoints.scss
@@ -0,0 +1,26 @@
+// ---------------------------------------------------------
+// @Breakpoints
+// ---------------------------------------------------------
+
+$breakpoint-xl : 1440px;
+$breakpoint-lg : 1200px;
+$breakpoint-md : 992px;
+$breakpoint-sm : 768px;
+$breakpoint-xs : 0;
+
+$breakpoints: (
+        "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
+        "lg\\+" "screen and (min-width: #{$breakpoint-lg})",
+        "md\\+" "screen and (min-width: #{$breakpoint-md})",
+        "sm\\+" "screen and (min-width: #{$breakpoint-sm})",
+        "xs\\+" "screen and (min-width: #{$breakpoint-xs})",
+
+        "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
+        "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
+        "md-" "screen and (max-width: #{$breakpoint-md - 1px})",
+        "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
+
+        "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
+        "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
+        "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
+);
diff --git a/assets/css/scss/settings/colors.scss b/assets/css/scss/settings/colors.scss
new file mode 100644
index 0000000000..2079fabbc4
--- /dev/null
+++ b/assets/css/scss/settings/colors.scss
@@ -0,0 +1,87 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Greyscale Colors
+// + @Bootstrap Color System
+// + @Default Colors
+// + @Inverted Colors
+// + @Others
+// + @Header Themes
+// + @Social Networks Colors
+
+// ---------------------------------------------------------
+// @Greyscale Colors
+// ---------------------------------------------------------
+
+// Colors below are ordered from lightest to darkest
+
+$grey-100             : #f9fafb;
+$grey-200             : #f2f3f5;
+$grey-300             : #e6eaf0;
+$grey-400             : #d3d9e3;
+$grey-500             : #b9c2d0;
+$grey-600             : #7c8695;
+$grey-700             : #72777a;
+$grey-800             : #565a5c;
+$grey-900             : #313435;
+
+$grey-colors-alt: (
+        grey-100 : #f9fafb,
+        grey-200 : #f2f3f5,
+        grey-300 : #e6eaf0,
+        grey-400 : #d3d9e3,
+        grey-500 : #b9c2d0,
+        grey-600 : #7c8695,
+        grey-700 : #72777a,
+        grey-800 : #565a5c,
+        grey-900 : #313435,
+);
+
+// ---------------------------------------------------------
+// @Default Colors
+// ---------------------------------------------------------
+
+$default-danger       : #ff3c7e;
+$default-dark         : #313435;
+$default-grey         : #565a5c;
+$default-info         : #4abaff;
+$default-primary      : #7774e7;
+$default-success      : #37c936;
+$default-text-color   : #72777a;
+$default-warning      : #fc0;
+$default-white        : #fff;
+$default-active       : #006b9e;
+
+// ---------------------------------------------------------
+// @Inverted Colors
+// ---------------------------------------------------------
+
+$inverse-danger       : lighten($default-danger, 35%);
+$inverse-info         : lighten($default-info, 45%);
+$inverse-primary      : lighten($default-primary, 30%);
+$inverse-success      : lighten($default-success, 45%);
+$inverse-warning      : lighten($default-warning, 45%);
+
+// ---------------------------------------------------------
+// @Others
+// ---------------------------------------------------------
+
+$border-color         : #e6ecf5;
+$collapsed-size       : 70px;
+$header-height        : 65px;
+$offscreen-size       : 280px;
+$side-nav-dark        : #313644;
+$side-nav-dark-border : rgba(120, 130, 140, 0.3);
+$side-nav-dark-font   : #99abb4;
+
+// ---------------------------------------------------------
+// @Header Themes
+// ---------------------------------------------------------
+
+$theme-danger         : #f53f61;
+$theme-dark           : lighten($side-nav-dark, 10%);
+$theme-info           : $default-info;
+$theme-primary        : $default-primary;
+$theme-success        : desaturate($default-success, 5%);
+$theme-bg             : #FFFFFF;
diff --git a/assets/css/scss/settings/fonts.scss b/assets/css/scss/settings/fonts.scss
new file mode 100644
index 0000000000..30ef76aa11
--- /dev/null
+++ b/assets/css/scss/settings/fonts.scss
@@ -0,0 +1,4 @@
+$font-primary:
+        Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$font-secondary: $font-primary;
+$font-size-base:              0.875rem;
\ No newline at end of file
diff --git a/assets/css/scss/settings/index.scss b/assets/css/scss/settings/index.scss
new file mode 100644
index 0000000000..8d24f0e6f9
--- /dev/null
+++ b/assets/css/scss/settings/index.scss
@@ -0,0 +1,3 @@
+@import 'breakpoints';
+@import 'colors';
+@import 'fonts';
diff --git a/assets/css/scss/utils/border.scss b/assets/css/scss/utils/border.scss
new file mode 100644
index 0000000000..c35defbcac
--- /dev/null
+++ b/assets/css/scss/utils/border.scss
@@ -0,0 +1,194 @@
+
+// ---------------------------------------------------------
+// @Fixed Width
+// ---------------------------------------------------------
+
+.w-1\/4r, .sz-1\/4r    { width: 0.25rem; }
+.w-1\/2r, .sz-1\/2r    { width: 0.5rem; }
+.w-3\/4r, .sz-3\/4r    { width: 0.75rem; }
+.w-1r, .sz-1r          { width: 1rem; }
+.w-3\/2r, .sz-3\/2r    { width: 1.5rem; }
+.w-2r, .sz-2r          { width: 2rem; }
+.w-5\/2r, .sz-5\/2r    { width: 2.5rem; }
+.w-3r, .sz-3r          { width: 3rem; }
+.w-7\/2r, .sz-7\/2r    { width: 3.5rem; }
+.w-4r, .sz-4r          { width: 4rem; }
+.w-9\/2r, .sz-9\/2r    { width: 4.5rem; }
+.w-5r, .sz-5r          { width: 5rem; }
+.w-11\/2r, .sz-11\/2r  { width: 5.5rem; }
+.w-6r, .sz-6r          { width: 6rem; }
+
+// ---------------------------------------------------------
+// @Relative Width
+// ---------------------------------------------------------
+
+.w-0     { width: 0px; }
+.w-10p   { width: 10%; }
+.w-20p   { width: 20%; }
+.w-30p   { width: 30%; }
+.w-40p   { width: 40%; }
+.w-50p   { width: 50%; }
+.w-60p   { width: 60%; }
+.w-70p   { width: 70%; }
+.w-80p   { width: 80%; }
+.w-90p   { width: 90%; }
+.w-100p  { width: 100%; }
+.w-1px   { width: 1px; }
+.w-a     { width: auto; }
+
+
+// ---------------------------------------------------------
+// @Fixed Height
+// ---------------------------------------------------------
+
+.h-1\/4r, .sz-1\/4r    { height: 0.25rem; }
+.h-1\/2r, .sz-1\/2r    { height: 0.5rem; }
+.h-3\/4r, .sz-3\/4r    { height: 0.75rem; }
+.h-1r, .sz-1r          { height: 1rem; }
+.h-3\/2r, .sz-3\/2r    { height: 1.5rem; }
+.h-2r, .sz-2r          { height: 2rem; }
+.h-5\/2r, .sz-5\/2r    { height: 2.5rem; }
+.h-3r, .sz-3r          { height: 3rem; }
+.h-7\/2r, .sz-7\/2r    { height: 3.5rem; }
+.h-4r, .sz-4r          { height: 4rem; }
+.h-9\/2r, .sz-9\/2r    { height: 4.5rem; }
+.h-5r, .sz-5r          { height: 5rem; }
+.h-11\/2r, .sz-11\/2r  { height: 5.5rem; }
+.h-6r, .sz-6r          { height: 6rem; }
+
+
+.h-0     { height: 0; }
+.h-auto  { height: auto; }
+.h-100p  { height: 100%; }
+.h-100vh { height: 100vh; }
+
+
+// ---------------------------------------------------------
+// @Max Size
+// ---------------------------------------------------------
+
+.mw-100p { max-width: 100%; }
+.mh-100p { max-height: 100%; }
+
+
+// ---------------------------------------------------------
+// @Quick Border Helpers
+// ---------------------------------------------------------
+
+.bd  { border: #{$border-width} solid #{$border-color} !important; }
+.bdT { border-top: #{$border-width} solid #{$border-color} !important; }
+.bdR { border-right: #{$border-width} solid #{$border-color} !important; }
+.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; }
+.bdL { border-left: #{$border-width} solid #{$border-color} !important; }
+
+// ---------------------------------------------------------
+// @Border Width
+// ---------------------------------------------------------
+
+@for $i from 0 through 5 {
+  .bdw-#{$i}  { border-width: #{$i}px !important; }
+  .bdwT-#{$i} { border-top-width: #{$i}px !important; }
+  .bdwR-#{$i} { border-right-width: #{$i}px !important; }
+  .bdwB-#{$i} { border-bottom-width: #{$i}px !important; }
+  .bdwL-#{$i} { border-left-width: #{$i}px !important; }
+}
+
+// ---------------------------------------------------------
+// @Border Radius
+// ---------------------------------------------------------
+
+@for $i from 0 to 5 {
+  .bdrs-#{$i} { border-radius: #{$i}px !important; }
+
+  .bdrsT-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-top-right-radius: #{$i}px !important;
+  }
+
+  .bdrsR-#{$i} {
+    border-top-right-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsB-#{$i} {
+    border-bottom-left-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsL-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-bottom-left-radius: #{$i}px !important;
+  }
+}
+
+.bdrs-50p  { border-radius: 50% !important; }
+.bdrs-10em { border-radius: 10em !important; }
+
+// ---------------------------------------------------------
+// @Border Style
+// ---------------------------------------------------------
+
+.bds-n  { border-style: none !important; }
+.bds-s  { border-style: solid !important; }
+.bds-dt { border-style: dotted !important; }
+.bds-ds { border-style: dashed !important; }
+.bds-db { border-style: double !important; }
+.bds-g  { border-style: groove !important; }
+.bds-r  { border-style: ridge !important; }
+.bds-i  { border-style: inset !important; }
+.bds-o  { border-style: outset !important; }
+
+
+.peers {
+  box-sizing: border-box;
+  display: flex !important;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-flow: row wrap;
+  height: auto;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.peer {
+  display: block;
+  height: auto;
+  flex: 0 0 auto;
+}
+
+.peer-greed {
+  flex: 1 1 auto;
+  // overflow: hidden;
+}
+
+.peers-greed > .peer,
+.peers-greed > .peers {
+  flex: 1 1 auto;
+}
+
+.peer > img {
+  max-width: none;
+}
+
+.peer-greed > img {
+  max-width: 100%;
+}
+
+// ---------------------------------------------------------
+// @Align Items
+// ---------------------------------------------------------
+
+.ai-fs   { align-items: flex-start; }
+.ai-fe   { align-items: flex-end; }
+.ai-c    { align-items: center; }
+.ai-b    { align-items: baseline; }
+.ai-s    { align-items: stretch; }
+
+
+// ---------------------------------------------------------
+// @Pseudo Elements
+// ---------------------------------------------------------
+
+.no-after::after   { display: none !important; }
+.no-before::before { display: none !important; }
\ No newline at end of file
diff --git a/assets/css/scss/utils/index.scss b/assets/css/scss/utils/index.scss
new file mode 100644
index 0000000000..ec5a8d0450
--- /dev/null
+++ b/assets/css/scss/utils/index.scss
@@ -0,0 +1,3 @@
+@import "mediaqueriesranges";
+@import "border";
+@import "typography";
\ No newline at end of file
diff --git a/assets/css/scss/utils/mediaqueriesranges.scss b/assets/css/scss/utils/mediaqueriesranges.scss
new file mode 100644
index 0000000000..9f1815369e
--- /dev/null
+++ b/assets/css/scss/utils/mediaqueriesranges.scss
@@ -0,0 +1,69 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @General Media Query
+// + @All Above Media Query
+// + @All Under Media Query
+// + @Between Two Devices Media Query
+
+// ---------------------------------------------------------
+// @General Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used for custom rules that don't follow
+// any of the following premade media queries.
+
+@mixin mq($condition) {
+  @media #{$condition} {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @All Above Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match certain breakpoint
+// and all devices above it.
+
+@mixin from($breakpoint) {
+  @media screen and (min-width: $breakpoint){
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @All Under Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match all devices under certain breakpoint.
+
+@mixin to($breakpoint) {
+  @media screen and (max-width: $breakpoint - 1px) {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @Between Two Devices Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match the devices between 2 breakpoints.
+
+@mixin between($start, $end){
+  @media screen and (min-width: $start) and (max-width: $end - 1px) {
+    @content;
+  }
+}
+
+//----------------------------------------------------------
+// @Placeholder
+//----------------------------------------------------------
+
+@mixin placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}
\ No newline at end of file
diff --git a/assets/css/scss/utils/typography.scss b/assets/css/scss/utils/typography.scss
new file mode 100644
index 0000000000..9c68cbb111
--- /dev/null
+++ b/assets/css/scss/utils/typography.scss
@@ -0,0 +1,95 @@
+
+// ---------------------------------------------------------
+// @Text Align
+// ---------------------------------------------------------
+
+.ta-c { text-align: center !important; }
+.ta-l { text-align: left !important; }
+.ta-r { text-align: right !important; }
+
+// ---------------------------------------------------------
+// @Text Transform
+// ---------------------------------------------------------
+
+.tt-n { text-transform: none !important; }
+.tt-u { text-transform: uppercase !important; }
+.tt-l { text-transform: lowercase !important; }
+.tt-c { text-transform: capitalize !important; }
+
+// ---------------------------------------------------------
+// @Font Style
+// ---------------------------------------------------------
+
+.fs-i { font-style: italic !important; }
+.fs-o { font-style: oblique !important; }
+
+// ---------------------------------------------------------
+// @Text Decoration
+// ---------------------------------------------------------
+
+.td-n { text-decoration: none !important; }
+.td-o { text-decoration: overline !important; }
+.td-lt { text-decoration: line-through !important; }
+.td-u { text-decoration: underline !important; }
+
+// ---------------------------------------------------------
+// @White Space
+// ---------------------------------------------------------
+
+.whs-nw { white-space: nowrap !important; }
+.whs-p { white-space: pre !important; }
+.whs-n { white-space: normal !important; }
+
+// ---------------------------------------------------------
+// @Word Break
+// ---------------------------------------------------------
+
+.wob-n { word-break: normal !important; }
+.wob-ba { word-break: break-all !important; }
+.wob-k { word-break: keep-all !important; }
+
+// ---------------------------------------------------------
+// @Word Wrap
+// ---------------------------------------------------------
+
+.wow-bw { word-wrap: break-word !important; }
+.wow-n { word-wrap: normal !important; }
+
+// ---------------------------------------------------------
+// @Text Overflow
+// ---------------------------------------------------------
+
+.tov-e { text-overflow: ellipsis !important; }
+
+// ---------------------------------------------------------
+// @Font Size
+// ---------------------------------------------------------
+
+.fsz-xs   { font-size: 0.75rem !important; }
+.fsz-sm   { font-size: 0.87rem !important; }
+.fsz-def  { font-size: 1rem !important; }
+.fsz-md   { font-size: 1.15rem !important; }
+.fsz-lg   { font-size: 1.4rem !important; }
+.fsz-xl   { font-size: 1.7rem !important; }
+
+// ---------------------------------------------------------
+// @Font Weight
+// ---------------------------------------------------------
+
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+// ---------------------------------------------------------
+// @Line Height
+// ---------------------------------------------------------
+
+.lh-0    { line-height: 0 !important; }
+.lh-1    { line-height: 1 !important; }
+.lh-3\/2 { line-height: 1.5 !important; }
diff --git a/assets/css/themes/chamilo/default.css b/assets/css/themes/chamilo/default.css
index 896d364878..b2e4d8f5ab 100644
--- a/assets/css/themes/chamilo/default.css
+++ b/assets/css/themes/chamilo/default.css
@@ -22,69 +22,6 @@ a:focus {
   outline: none;
 }
 
-.navbar-nav > li{
-}
-.navbar-collapse{
-}
-.navbar-default {
-  background: #337AB7;
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-}
-.navbar-default .navbar-nav > li > a:focus,
-.navbar-default .navbar-nav > li > a:hover {
-  color: #A4DC2D;
-}
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus{
-  color: #fff;
-  background-color:#2C5B8E;
-}
-.navbar-default .navbar-nav > li > a{
-  color: #ffffff;
-}
-.navbar-default .navbar-nav > .open > a,
-.navbar-default .navbar-nav > .open > a:hover,
-.navbar-default .navbar-nav > .open > a:focus{
-  background: #18477A;
-  color: #ffffff;
-}
-.navbar-nav > li > .dropdown-menu{
-  min-width: 100%;
-  margin-top: 2px;
-  border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-}
-.navbar-default .navbar-nav > .open > .dropdown-menu{
-  padding: 3px 4px;
-}
-.navbar-default .navbar-nav > .open > .dropdown-menu > li > a{
-  padding: 6px 9px;
-}
-.nav > li > a:hover, .nav > li > a:focus{
-  background-color: transparent;
-}
-.navbar-form .form-control{
-  height: 25px;
-  padding: 6px;
-}
-.navbar-default .navbar-brand {
-  color:white;
-}
-.navbar-default .navbar-collapse, .navbar-default .navbar-form{
-  border-color: #2C5B8E;
-}
-
-.navbar-default .navbar-toggle{
-  border-color: #00677C;
-}
-.navbar-default .navbar-toggle .icon-bar{
-  background-color: #ffffff;
-}
-.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
-  background-color: #2C5B8E;
-}
 .badge-warning{
   background-color: #FD6600;
 }
diff --git a/assets/css/themes/chamilo/images/logo_chamilo.svg b/assets/css/themes/chamilo/images/logo_chamilo.svg
new file mode 100644
index 0000000000..35418f8c04
--- /dev/null
+++ b/assets/css/themes/chamilo/images/logo_chamilo.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="190"
+   height="64"
+   id="svg3034"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="logo_chamilo.svg">
+  <defs
+     id="defs3036" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.3976798"
+     inkscape:cx="82.614165"
+     inkscape:cy="10.778402"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1319"
+     inkscape:window-height="713"
+     inkscape:window-x="47"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata3039">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-988.3622)">
+    <rect
+       style="opacity:0;fill:#008080;fill-opacity:1;stroke:none;stroke-width:0.18235089;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect937"
+       width="190"
+       height="64"
+       x="4.434662e-09"
+       y="988.36218" />
+    <g
+       id="g916"
+       transform="matrix(0.22497727,0,0,0.22497727,-20.196607,831.88814)">
+      <path
+         style="fill:#2e75a3;fill-opacity:1;stroke-width:2.08000803"
+         id="path3202"
+         inkscape:connector-curvature="0"
+         d="m 343.43553,864.36801 c 0,0 1.66645,-0.82129 2.18012,-3.64489 8.5e-4,-0.16637 0.002,-0.33273 0.003,-0.4991 l 0.003,-0.4991 c -0.15292,-2.65854 -2.79767,-5.83094 -5.77322,-9.00295 -3.47314,-3.50727 -6.45628,-5.18615 -6.45628,-5.18615 0,0 -1.46031,-6.98665 -7.72944,-16.65552 -6.10061,-9.6701 -16.69026,-19.86006 -22.52223,-16.89921 -5.83406,2.96083 -0.7232,11.29701 -0.40302,13.79211 0.48578,2.66023 2.95611,6.99426 2.12603,6.99004 -0.99566,-0.17144 -13.51109,-23.99898 -45.12938,-17.51122 -8.15609,1.78443 -15.15564,5.24053 -20.83087,9.69742 l -0.28228,55.50379 c 2.00523,-1.98416 2.84039,-2.97814 2.84039,-2.97814 0,0 2.11081,9.98255 6.07817,14.49056 3.96737,4.50593 8.77411,7.19022 10.28682,3.87259 1.51186,-3.14918 -3.07268,-16.79821 -3.07268,-16.79821 0,0 8.60177,8.35185 11.08601,10.35885 2.48426,2.00492 7.29184,4.52284 8.64402,0.044 1.18575,-4.47972 -2.27049,-11.31016 -5.08975,-12.48701 -2.65282,-1.17808 -4.31713,-1.18654 -4.31713,-1.18654 0,0 -1.65124,-2.16913 -2.48001,-2.83883 -0.99312,-0.67053 -1.15956,-0.6693 -1.15956,-0.6693 0,0 1.50003,-0.82422 6.15509,-0.63417 4.81942,0.19088 8.64233,0.37669 8.64233,0.37669 0,0 4.29094,6.33557 6.93953,8.3434 2.4834,2.17336 8.9397,7.35744 11.25668,9.52787 2.15053,2.17167 3.47482,3.17663 4.31629,1.35084 0.67502,-1.82456 -0.46549,-6.64886 -3.43935,-10.1536 -3.14113,-3.33921 -6.45629,-5.18407 -7.61286,-6.85157 -0.98636,-1.99938 -1.64448,-3.49798 -1.64448,-3.49798 0,0 6.12889,4.51693 7.61708,6.02183 1.65547,1.3373 12.5928,8.20578 14.41555,9.37756 1.82189,1.34023 2.65828,0.51263 2.65828,0.51263 0,0 1.3243,1.00288 1.82697,0.34203 0.50268,-0.66292 1.85486,-5.1418 -1.62252,-7.81725 -3.64295,-2.84474 -5.79771,-4.18458 -5.46316,-4.51561 0.16811,-0.32981 3.81953,0.85127 4.32182,-0.14439 0.33708,-0.82806 -0.15546,-2.15945 -0.65306,-2.49472 -0.33031,-0.50287 1.0062,-1.49221 1.0062,-1.49221 0,0 1.32937,0.007 6.81282,0.53376 5.48345,0.527 19.30425,-4.05484 22.13658,-5.03865 2.83025,-0.98383 4.32942,-1.63961 4.32942,-1.63961 z m -105.09438,70.92147 c 11.50929,-7.41772 12.10285,-26.3601 5.80538,-30.04811 -1.82275,-1.17178 -3.64719,-2.01083 -5.63974,-2.52215 l -0.0439,8.6427 c 0.49761,0.33319 0.99436,0.83691 1.32092,1.66834 0.98636,1.99938 0.47648,4.48818 0.47648,4.48818 0,0 -0.15038,-3.15764 -1.30487,-4.82513 -0.16558,-0.16722 -0.33117,-0.33443 -0.49675,-0.50164 z m 0.56117,-110.34004 c -2.50161,1.81734 -4.67412,3.96495 -6.6802,6.11548 l -0.27973,55.00262 c 1.66729,-0.98767 3.16817,-1.97825 4.50638,-3.30033 0.83637,-0.82552 1.50425,-1.65397 2.17335,-2.31397 z m -7.22446,113.13029 c 2.49691,-0.48433 4.82787,-1.4707 6.66329,-2.79025 l 0.11747,-23.09781 c -0.98975,-1.33391 -1.81767,-2.16998 -1.81767,-2.16998 0,0 0.83046,0.33697 1.82189,1.34023 l 0.0439,-8.6427 c -2.15815,-0.67438 -4.48441,-1.01895 -6.64639,-0.53084 l -0.0735,14.45719 v 0 c 0.50099,-0.33019 1.33191,-0.49233 0.99312,0.67053 -0.16981,0.66462 -0.6691,0.66 -1.00197,0.66039 v 0 l -0.0431,8.47426 c 0.33286,0.002 0.83008,0.004 1.16379,-0.16045 0,0 -0.33456,0.33103 -1.1684,0.65745 z m 0.54426,-107.01481 c -11.70024,12.23732 -16.92858,27.00104 -18.10842,30.31828 -1.85486,5.1418 -13.75156,23.69187 -14.80593,34.65446 -0.88878,11.1298 -1.19089,38.2154 24.05893,41.9998 2.98906,0.51431 5.81632,0.52661 8.31117,0.0402 l 0.0566,-11.13195 c -2.33133,0.65154 -7.48784,1.2908 -13.27288,-5.38511 -7.76831,-9.0131 -3.87018,-23.61721 2.3069,-28.57274 4.00708,-3.30286 7.84014,-5.11136 11.1739,-6.92239 l 0.27972,-55.00054 z m -0.36171,71.12138 -0.0735,14.45719 c -0.50099,0.3302 -0.83385,0.3285 -1.16209,-0.17228 -0.33794,0.9965 0.32526,1.49691 1.15533,1.50113 l -0.0431,8.47426 c -5.32208,0.46996 -12.61307,-4.21924 -10.74722,-11.52172 2.20376,-8.29482 6.21255,-11.93042 10.87061,-12.73858 z" />
+      <g
+         id="g3217"
+         transform="matrix(0.79577132,0.00404718,-0.00404559,0.79545881,85.069609,540.05837)"
+         inkscape:transform-center-y="-44.562164">
+        <path
+           style="fill:#eddf0e"
+           id="rect3215"
+           sodipodi:nodetypes="sssssssss"
+           inkscape:connector-curvature="0"
+           d="m 227.414,246.939 13.283,-0.497 c 7.13,-0.267 16.92,4.74 16.36,13.874 l -3.482,56.799 c -0.436,7.122 -3.506,10.89 -9.149,10.891 h -17.511 c -7.135,-10e-4 -10.136,-4.519 -10.641,-11.636 l -3.979,-56.054 c -0.503,-7.119 5,-12.998 15.119,-13.377 z" />
+      </g>
+      <g
+         id="g3221"
+         transform="matrix(0.64922418,-0.52595343,0.52616264,0.64897133,-183.42715,803.26876)"
+         inkscape:transform-center-x="29.82031"
+         inkscape:transform-center-y="-36.33424">
+        <path
+           style="fill:#fd6600"
+           id="path3223"
+           sodipodi:nodetypes="sssssssss"
+           inkscape:connector-curvature="0"
+           d="m 364.994,242.27 13.283,-0.498 c 7.129,-0.267 16.919,4.74 16.36,13.874 l -3.481,56.799 c -0.437,7.122 -3.506,10.89 -9.149,10.89 l -17.511,0.001 c -7.135,-0.001 -10.136,-4.519 -10.64,-11.636 l -3.979,-56.054 c -0.506,-7.117 4.998,-12.998 15.117,-13.376 z" />
+      </g>
+      <g
+         id="g3225"
+         transform="matrix(0.16678209,-0.77078871,0.77109218,0.16671967,-177.04978,1171.1564)"
+         inkscape:transform-center-x="43.056986"
+         inkscape:transform-center-y="-9.8080536">
+        <path
+           style="fill:#a4dc2d"
+           id="path3227"
+           sodipodi:nodetypes="sssssssss"
+           inkscape:connector-curvature="0"
+           d="m 485.005,307.459 13.284,-0.497 c 7.129,-0.267 16.92,4.739 16.36,13.874 l -3.481,56.8 c -0.436,7.121 -3.506,10.889 -9.149,10.89 h -17.512 c -7.135,0 -10.134,-4.519 -10.64,-11.636 l -3.978,-56.054 c -0.505,-7.117 4.999,-12.998 15.116,-13.377 z" />
+      </g>
+      <g
+         id="g3229"
+         transform="matrix(-0.28642661,-0.5530073,0.5532234,-0.28631193,68.020971,1374.434)"
+         inkscape:transform-center-x="30.900947"
+         inkscape:transform-center-y="16.468461">
+        <path
+           style="fill:#ef3e3e"
+           id="path3231"
+           sodipodi:nodetypes="sssssssss"
+           inkscape:connector-curvature="0"
+           d="m 584.441,445.677 13.283,-0.497 c 7.131,-0.266 16.921,4.741 16.36,13.874 l -3.48,56.8 c -0.438,7.121 -3.505,10.89 -9.149,10.89 h -17.511 c -7.134,0 -10.135,-4.518 -10.639,-11.635 l -3.98,-56.054 c -0.504,-7.118 4.999,-12.998 15.116,-13.378 z" />
+      </g>
+    </g>
+    <g
+       id="g920"
+       transform="matrix(0.16570371,0,0,0.16570371,5.2710663,882.31968)"
+       style="fill:#2e75a3;fill-opacity:1">
+      <path
+         d="m 1055.4417,888.63524 v -22.046 c 7.283,0 13.418,-2.492 18.402,-7.667 4.793,-5.176 7.285,-11.887 7.285,-19.938 0,-8.053 -2.299,-14.762 -7.285,-19.748 -4.791,-4.984 -10.926,-7.476 -18.402,-7.476 v -22.43 c 8.627,0.191 17.061,2.301 24.73,6.709 7.859,4.41 13.994,10.545 18.404,18.212 4.408,7.479 6.518,15.721 6.518,24.539 0,9.012 -2.109,17.254 -6.518,25.115 -4.602,7.859 -10.545,13.803 -18.213,18.212 -7.476,4.408 -15.911,6.518 -24.921,6.518 z m 0,-99.306 v 22.43 h -0.193 c -7.285,0 -13.42,2.492 -18.404,7.478 -4.791,5.176 -7.283,11.693 -7.283,19.746 0,8.242 2.492,14.953 7.283,19.938 4.793,5.175 10.928,7.667 18.404,7.667 0,0 0,0 0.193,0 v 22.046 c -0.193,0 -0.193,0 -0.385,0 -13.611,0 -25.113,-4.793 -34.699,-14.378 -9.586,-9.777 -14.379,-21.47 -14.379,-35.273 0,-14.762 5.369,-26.84 16.297,-36.81 9.393,-8.435 20.32,-12.844 32.59,-12.844 0.191,0 0.383,0 0.576,0 z m -370.19195,99.114 v -21.472 c 7.476,0 13.61,-2.684 18.403,-7.859 4.984,-5.176 7.477,-11.887 7.477,-20.322 0,-8.242 -2.492,-14.953 -7.477,-19.938 -4.793,-4.984 -10.927,-7.477 -18.403,-7.477 v -21.663 c 3.833,0.384 7.476,1.342 10.927,2.876 4.984,2.108 9.586,5.368 13.803,9.585 v -10.352 h 23.771 v 94.512 h -23.771 v -10.16 c -4.602,4.602 -9.201,7.667 -13.994,9.585 -3.26,1.535 -6.903,2.302 -10.736,2.685 z m 72.274,-96.621 h 23.771 v 10.928 c 4.025,-4.602 8.627,-7.86 13.611,-9.969 4.984,-2.301 10.354,-3.451 16.104,-3.451 5.943,0 11.311,1.533 16.104,4.409 4.793,2.876 8.627,7.093 11.504,12.653 3.643,-5.561 8.434,-9.777 13.803,-12.653 5.559,-2.876 11.502,-4.409 18.02,-4.409 6.711,0 12.654,1.533 17.639,4.793 5.176,3.066 8.818,7.093 11.119,12.27 2.107,4.983 3.258,13.037 3.258,24.347 v 55.595 h -23.771 v -48.118 c 0,-10.736 -1.342,-18.021 -4.025,-21.664 -2.683,-3.643 -6.711,-5.559 -12.078,-5.559 -4.025,0 -7.668,1.15 -10.928,3.452 -3.258,2.107 -5.559,5.367 -7.094,9.393 -1.725,4.219 -2.492,10.736 -2.492,19.746 v 42.751 h -23.771 v -45.817 c 0,-8.627 -0.768,-14.762 -1.916,-18.404 -1.344,-3.834 -3.26,-6.518 -5.752,-8.436 -2.492,-1.725 -5.367,-2.684 -9.01,-2.684 -3.836,0 -7.479,1.15 -10.736,3.452 -3.068,2.107 -5.561,5.559 -7.094,9.777 -1.725,4.217 -2.492,10.926 -2.492,19.938 v 42.175 h -23.771 v -94.515 z m 176.947,-38.91799 c 4.219,0 7.67,1.53399 10.736,4.40999 2.875,3.067 4.40998,6.709 4.40998,10.928 0,4.408 -1.34198,7.859 -4.40998,10.927 -2.875,3.067 -6.518,4.409 -10.543,4.409 -4.219,0 -7.861,-1.533 -10.928,-4.601 -2.877,-2.876 -4.41,-6.71 -4.41,-10.928 0,-4.218 1.533,-7.86 4.41,-10.735 2.876,-3.06799 6.518,-4.40999 10.735,-4.40999 z m -11.885,38.91799 h 23.771 v 94.512 h -23.771 z m 42.74998,-36.618 h 23.773 v 131.129 h -23.773 z m -450.70898,25.881 -17.062,16.296 c -11.694,-12.27 -24.73,-18.404 -39.108,-18.404 -12.27,0 -22.622,4.218 -30.865,12.461 -8.436,8.436 -12.653,18.596 -12.653,30.674 0,8.627 1.917,16.104 5.56,22.812 3.643,6.52 9.011,11.695 15.721,15.529 6.901,3.833 14.378,5.558 22.621,5.558 7.094,0 13.611,-1.148 19.363,-3.833 5.942,-2.684 12.461,-7.477 19.362,-14.377 l 16.487,17.062 c -9.394,9.393 -18.404,15.721 -26.84,19.363 -8.243,3.449 -17.829,5.176 -28.756,5.176 -19.746,0 -36.042,-6.135 -48.887,-18.789 -12.653,-12.652 -18.979,-28.755 -18.979,-48.501 0,-12.653 2.875,-23.964 8.819,-33.933 5.751,-9.777 13.994,-17.829 24.73,-23.771 10.735,-6.135 22.238,-9.203 34.699,-9.203 10.544,0 20.705,2.301 30.482,6.71 9.778,4.601 18.212,10.927 25.306,19.17 z m 170.623,8.627 v 21.663 h -0.191 c -7.477,0 -13.42,2.493 -18.404,7.477 -4.793,5.176 -7.285,11.887 -7.285,19.938 0,8.244 2.492,14.953 7.477,20.322 4.984,5.175 11.119,7.859 18.213,7.859 0.191,0 0.191,0 0.191,0 v 21.472 c -1.342,0.191 -2.875,0.191 -4.408,0.191 -12.27,0 -22.814,-4.602 -31.825,-14.187 -8.818,-9.393 -13.229,-21.279 -13.229,-35.273 0,-14.57 4.217,-26.457 12.844,-35.851 8.627,-9.201 19.172,-13.994 31.442,-13.994 1.915,0 3.45,0.192 5.175,0.383 z m -151.836,-34.508 h 23.581 v 46.203 c 4.602,-4.026 9.395,-7.094 13.994,-9.011 4.793,-2.108 9.395,-3.067 14.188,-3.067 9.201,0 17.254,3.259 23.58,9.777 5.561,5.559 8.244,13.996 8.244,24.73 v 62.497 h -23.389 v -41.601 c 0,-10.928 -0.385,-18.404 -1.535,-22.238 -0.957,-3.834 -2.875,-6.518 -5.176,-8.436 -2.492,-1.917 -5.559,-2.875 -9.201,-2.875 -4.984,0 -9.012,1.534 -12.461,4.793 -3.451,2.875 -5.943,7.285 -7.285,12.844 -0.576,2.877 -0.959,9.203 -0.959,19.363 v 38.149 h -23.581 z"
+         inkscape:connector-curvature="0"
+         id="path2819"
+         style="fill:#2e75a3;fill-opacity:1" />
+      <path
+         d="m 1092.2487,935.98824 v -3.068 0 c 1.918,0 3.451,-0.383 4.984,-1.342 1.535,-0.959 2.686,-2.301 3.451,-4.025 h 3.451 c -0.959,2.684 -2.684,4.793 -4.602,6.326 -2.107,1.342 -4.408,2.109 -7.092,2.109 z m 0,-11.887 v -2.684 h 9.203 c -0.576,-2.684 -1.533,-4.793 -3.26,-6.135 -1.533,-1.342 -3.451,-2.109 -5.943,-2.109 v -3.066 c 0.193,0 0.193,0 0.193,0 3.834,0 6.709,1.342 9.01,3.834 2.301,2.492 3.643,5.941 3.643,9.969 v 0.191 z m 0,-13.994 v 3.066 h -0.191 c -2.301,0 -4.408,0.768 -5.943,2.109 -1.725,1.533 -2.684,3.643 -3.066,6.135 h 9.201 v 2.684 h -9.393 c 0.191,2.684 1.15,4.793 2.875,6.326 1.727,1.725 4.025,2.492 6.518,2.492 v 3.068 c -3.449,0 -6.518,-1.344 -8.818,-3.836 -2.492,-2.492 -3.834,-5.559 -3.834,-9.01 0,-3.834 1.342,-6.9 3.643,-9.393 2.49,-2.299 5.365,-3.449 9.008,-3.641 z m -40.067,25.881 v -2.877 c 0.191,0 0.191,0 0.191,0 2.492,0 4.602,-1.15 6.518,-3.066 1.727,-1.918 2.686,-4.41 2.686,-7.094 0,-2.684 -0.959,-4.984 -2.686,-6.902 -1.916,-1.916 -4.025,-2.875 -6.518,-2.875 0,0 0,0 -0.191,0 v -2.875 c 0.191,0 0.191,0 0.383,0 1.918,0 3.451,0.383 5.176,1.15 1.535,0.766 2.877,1.916 3.834,3.258 v -3.834 h 3.068 v 24.348 h -3.068 v -3.834 c -0.957,1.533 -2.299,2.492 -4.025,3.451 -1.533,0.766 -3.451,1.148 -5.367,1.148 v 0 0.002 z m 20.514,-0.768 h -3.068 v -24.348 h 2.875 v 2.875 c 0.768,-1.148 1.727,-1.916 2.492,-2.492 0.959,-0.574 2.109,-0.766 3.26,-0.766 v 3.451 c -1.916,0.191 -3.451,0.766 -4.217,1.725 -0.768,0.959 -1.342,2.684 -1.342,4.793 z m -20.514,-24.921 v 2.875 c -2.492,0 -4.602,0.959 -6.518,2.875 -1.727,1.918 -2.686,4.41 -2.686,7.285 0,2.684 0.959,4.984 2.686,6.902 1.916,1.916 4.025,2.684 6.518,2.875 v 2.877 0 c -3.451,0 -6.518,-1.344 -8.818,-3.643 -2.492,-2.492 -3.643,-5.561 -3.643,-9.203 0,-3.642 1.15,-6.709 3.643,-9.201 2.301,-2.301 5.367,-3.642 8.818,-3.642 z m -45.435,3.642 v -2.877 l 8.244,24.156 h 1.916 l 5.752,-18.596 5.752,18.596 h 2.107 l 8.244,-24.348 h -3.451 l -5.943,18.213 -5.559,-18.213 h -2.301 l -5.559,18.213 -5.943,-18.213 h -3.26 v 0 3.069 0 0 z m 0,-2.877 v 2.877 h -4.602 v 21.279 h -3.06597 v -21.279 h -4.602 v -3.068 h 4.602 v -7.859 h 3.06597 v 7.859 h 4.602 v 0 z m -38.72497,24.924 v -3.068 c 0,0 0,0 0.191,0 2.492,0 4.793,-0.959 6.518,-2.875 1.725,-1.727 2.684,-4.219 2.684,-7.094 0,-2.875 -0.959,-5.176 -2.684,-7.094 -1.725,-1.725 -4.025,-2.684 -6.709,-2.684 v -3.066 c 3.449,0 6.518,1.342 9.01,3.641 2.492,2.492 3.643,5.561 3.643,9.012 0,3.643 -1.15,6.709 -3.643,9.393 -2.492,2.492 -5.367,3.836 -8.818,3.836 -0.192,-10e-4 -0.192,-10e-4 -0.192,-10e-4 z m 20.703,-0.768 h -3.066 v -21.664 h -3.26 v -2.684 h 3.26 v -0.766 c 0,-2.494 0.574,-4.41 1.916,-5.752 1.344,-1.15 3.26,-1.727 5.943,-1.727 h 0.385 v 2.686 c -1.918,0 -3.26,0.383 -4.027,1.15 -0.766,0.766 -1.15,1.916 -1.15,3.643 v 0.766 h 5.178 v 2.684 h -5.178 v 21.664 z m -20.703,-25.113 v 3.066 h -0.193 c -2.492,0 -4.6,0.959 -6.326,2.684 -1.916,1.918 -2.684,4.41 -2.684,7.094 0,2.875 0.768,5.367 2.684,7.094 1.727,1.916 3.834,2.875 6.52,2.875 v 3.068 c -3.451,0 -6.52,-1.344 -8.82,-3.836 -2.492,-2.492 -3.834,-5.559 -3.834,-9.01 0,-3.643 1.342,-6.709 3.834,-9.201 2.492,-2.686 5.369,-3.834 8.627,-3.834 0.192,0 0.192,0 0.192,0 z m -80.51998,25.881 v -3.068 0 c 2.684,0 4.793,-0.959 6.711,-2.875 1.725,-1.727 2.492,-4.219 2.492,-7.094 0,-2.875 -0.768,-5.176 -2.684,-7.094 -1.727,-1.725 -3.836,-2.684 -6.52,-2.684 v -3.066 c 3.451,0 6.326,1.342 8.818,3.641 2.492,2.492 3.836,5.561 3.836,9.012 0,3.643 -1.344,6.709 -3.643,9.393 -2.49,2.491 -5.558,3.835 -9.01,3.835 z m 16.295,-25.115 h 3.068 v 2.684 c 0.959,-0.957 2.109,-1.916 3.26,-2.492 1.342,-0.383 2.684,-0.766 4.408,-0.766 1.727,0 3.451,0.383 4.793,0.957 1.342,0.768 2.492,1.727 3.26,2.877 0.574,0.959 0.957,1.916 1.342,3.258 0.191,1.15 0.383,2.877 0.383,5.178 v 12.652 h -3.26 v -13.612 c 0,-2.875 -0.574,-4.984 -1.533,-6.326 -1.15,-1.342 -2.875,-1.918 -5.367,-1.918 -1.342,0 -2.684,0.191 -3.643,0.768 -1.15,0.574 -1.918,1.533 -2.684,2.492 -0.385,0.766 -0.576,1.533 -0.768,2.301 -0.191,0.957 -0.191,2.301 -0.191,4.408 v 11.887 h -3.068 z m 30.674,15.144 h 3.068 c 0,2.109 0.574,3.643 1.533,4.793 1.15,1.15 2.492,1.727 4.219,1.727 1.916,0 3.449,-0.576 4.6,-1.727 1.15098,-1.151 1.72698,-2.684 1.72698,-4.793 0,-2.875 -2.30098,-5.176 -6.90198,-6.709 -0.383,0 -0.574,-0.191 -0.768,-0.191 -2.492,-0.768 -4.025,-1.918 -5.176,-3.068 -0.959,-1.342 -1.533,-2.875 -1.533,-4.984 0,-2.492 0.768,-4.6 2.492,-6.326 1.533,-1.533 3.643,-2.492 6.135,-2.492 2.492,0 4.41,0.768 5.75198,2.301 1.533,1.533 2.301,3.643 2.492,6.326 h -3.068 c -0.191,-1.725 -0.76598,-3.066 -1.53298,-4.025 -0.959,-0.959 -2.109,-1.533 -3.643,-1.533 -1.534,0 -2.875,0.574 -3.834,1.533 -1.15,1.15 -1.533,2.492 -1.533,4.025 0,0.959 0,1.533 0.383,2.301 0.383,0.576 0.768,1.15 1.533,1.533 0.576,0.576 1.918,1.15 3.834,1.727 1.15,0.383 1.918,0.766 2.492,0.957 2.10898,0.768 3.64298,1.727 4.60198,3.068 0.959,1.341 1.342,2.875 1.342,4.984 0,3.26 -0.766,5.752 -2.492,7.668 -1.72498,1.918 -4.02498,2.877 -6.89998,2.877 -2.494,0 -4.793,-0.959 -6.328,-2.686 -1.725,-1.916 -2.492,-4.217 -2.492,-7.283 v -0.003 z m -46.969,-15.91 v 3.066 c -0.191,0 -0.191,0 -0.191,0 -2.492,0 -4.793,0.959 -6.518,2.684 -1.727,1.918 -2.684,4.41 -2.684,7.094 0,2.875 0.957,5.367 2.684,7.094 1.916,1.916 4.025,2.875 6.709,2.875 v 3.068 c -3.643,0 -6.518,-1.344 -9.01,-3.836 -2.492,-2.492 -3.643,-5.559 -3.643,-9.01 0,-3.643 1.15,-6.709 3.643,-9.201 2.492,-2.686 5.367,-3.834 8.818,-3.834 10e-4,0 10e-4,0 0.192,0 z m -49.269,25.881 v -2.877 0 c 2.492,0 4.602,-1.15 6.52,-3.066 1.725,-1.918 2.684,-4.41 2.684,-7.094 0,-2.684 -0.959,-4.984 -2.684,-6.902 -1.918,-1.916 -4.027,-2.875 -6.52,-2.875 v 0 -2.875 c 0,0 0,0 0.191,0 1.918,0 3.643,0.383 5.178,1.15 1.533,0.766 2.875,1.916 3.834,3.258 v -3.834 h 3.066 v 24.348 h -3.066 v -3.834 c -0.959,1.533 -2.301,2.492 -3.834,3.451 -1.727,0.766 -3.451,1.148 -5.369,1.148 v 0 z m 19.363,-0.768 v -21.279 h -4.602 v -3.068 h 4.602 v -7.859 h 3.26 v 7.859 h 4.6 v 3.068 h -4.6 v 21.279 z m 13.612,-27.222 h -3.26 v -4.984 h 3.26 z m -3.26,27.222 v -24.348 h 3.26 v 24.348 z m -29.715,-24.921 v 2.875 c -2.684,0 -4.793,0.959 -6.709,2.875 -1.727,1.918 -2.684,4.41 -2.684,7.285 0,2.684 0.957,4.984 2.684,6.902 1.916,1.916 4.025,2.684 6.709,2.875 v 2.877 h -0.191 c -3.451,0 -6.518,-1.344 -8.818,-3.643 -2.492,-2.492 -3.643,-5.561 -3.643,-9.203 0,-3.642 1.15,-6.709 3.643,-9.201 2.3,-2.301 5.366,-3.642 9.009,-3.642 z m -39.109,25.689 v -3.068 0 c 2.686,0 4.793,-0.959 6.711,-2.875 1.725,-1.727 2.684,-4.219 2.684,-7.094 0,-2.875 -0.959,-5.176 -2.684,-7.094 -1.918,-1.725 -4.025,-2.684 -6.711,-2.684 v -3.066 c 3.451,0 6.328,1.342 8.82,3.641 2.492,2.492 3.834,5.561 3.834,9.012 0,3.643 -1.342,6.709 -3.643,9.393 -2.492,2.491 -5.56,3.835 -9.011,3.835 z m 19.363,-0.768 h -3.066 v -24.348 h 2.875 v 2.875 c 0.768,-1.148 1.725,-1.916 2.492,-2.492 0.959,-0.574 2.109,-0.766 3.26,-0.766 v 3.451 c -1.918,0.191 -3.26,0.766 -4.219,1.725 -0.766,0.959 -1.342,2.684 -1.342,4.793 z m -19.362,-25.113 v 3.066 h -0.193 c -2.492,0 -4.6,0.959 -6.518,2.684 -1.725,1.918 -2.684,4.41 -2.684,7.094 0,2.875 0.959,5.367 2.684,7.094 1.918,1.916 4.025,2.875 6.711,2.875 v 3.068 c -3.451,0 -6.52,-1.344 -9.012,-3.836 -2.301,-2.492 -3.643,-5.559 -3.643,-9.01 0,-3.643 1.342,-6.709 3.643,-9.201 2.492,-2.686 5.369,-3.834 8.818,-3.834 z m -27.607,25.881 v -2.877 c 2.492,-0.191 4.602,-1.15 6.518,-3.066 1.727,-1.918 2.686,-4.219 2.686,-7.094 0,-2.684 -0.959,-4.984 -2.686,-6.902 -1.916,-1.916 -4.025,-2.875 -6.518,-2.875 v -2.875 h 0.191 c 3.451,0 6.326,1.15 8.818,3.643 2.301,2.492 3.451,5.559 3.451,9.201 0,3.642 -1.15,6.711 -3.643,9.01 -2.299,2.491 -5.366,3.835 -8.817,3.835 z m 0,-25.689 v 2.875 c 0,0 0,0 -0.191,0 -2.492,0 -4.602,0.959 -6.518,3.068 -1.727,1.916 -2.686,4.217 -2.686,7.092 0,2.684 0.959,4.793 2.877,6.711 1.725,2.107 3.834,3.066 6.326,3.066 0,0 0,0 0.191,0 v 2.877 c -0.191,0 -0.191,0 -0.191,0 -1.918,0 -3.451,-0.385 -4.984,-1.15 -1.533,-0.768 -2.875,-1.727 -4.219,-3.26 v 3.643 h -3.066 v -32.207 h 3.066 v 10.16 1.725 c 1.344,-1.533 2.877,-2.684 4.41,-3.449 1.534,-0.769 3.069,-1.151 4.985,-1.151 z m -29.715,25.689 v -2.877 0 c 2.492,0 4.793,-1.15 6.518,-3.066 1.918,-1.918 2.877,-4.41 2.877,-7.094 0,-2.684 -0.959,-4.984 -2.877,-6.902 -1.725,-1.916 -4.025,-2.875 -6.326,-2.875 h -0.192 v -2.875 h 0.191 c 1.918,0 3.643,0.383 5.176,1.15 1.535,0.766 2.877,1.916 4.027,3.258 v -3.834 h 3.066 v 24.348 h -3.066 v -3.834 c -0.959,1.533 -2.301,2.492 -4.027,3.451 -1.725,0.766 -3.449,1.148 -5.367,1.148 z m 0,-25.689 v 2.875 c -2.492,0 -4.793,0.959 -6.518,2.875 -1.918,1.918 -2.877,4.41 -2.877,7.285 0,2.684 0.959,4.984 2.877,6.902 1.725,1.916 4.025,2.684 6.518,2.875 v 2.877 0 c -3.643,0 -6.518,-1.344 -9.01,-3.643 -2.301,-2.492 -3.643,-5.561 -3.643,-9.203 0,-3.642 1.342,-6.709 3.643,-9.201 2.493,-2.301 5.368,-3.642 9.01,-3.642 z m -44.094,25.689 v -3.068 0 c 2.684,0 4.793,-0.959 6.518,-2.875 1.918,-1.727 2.686,-4.219 2.686,-7.094 0,-2.875 -0.768,-5.176 -2.686,-7.094 -1.725,-1.725 -3.834,-2.684 -6.518,-2.684 v -3.066 c 3.451,0 6.326,1.342 8.818,3.641 2.492,2.492 3.834,5.561 3.834,9.012 0,3.643 -1.342,6.709 -3.834,9.393 -2.3,2.491 -5.366,3.835 -8.818,3.835 z m 16.295,-0.768 v -32.207 h 3.068 v 32.207 z m 8.245,0 v -32.207 h 3.068 v 32.207 z m -24.54,-25.113 v 3.066 c -0.191,0 -0.191,0 -0.191,0 -2.492,0 -4.792,0.959 -6.517,2.684 -1.727,1.918 -2.684,4.41 -2.684,7.094 0,2.875 0.957,5.367 2.684,7.094 1.725,1.916 4.025,2.875 6.708,2.875 v 3.068 c -3.643,0 -6.517,-1.344 -9.009,-3.836 -2.492,-2.492 -3.642,-5.559 -3.642,-9.01 0,-3.643 1.15,-6.709 3.642,-9.201 2.492,-2.686 5.367,-3.834 8.818,-3.834 0,0 0,0 0.191,0 z m -73.231,25.881 v -3.26 c 1.342,-0.191 2.492,-0.576 3.451,-1.342 1.15,-0.959 2.299,-2.301 3.449,-4.41 l -6.9,-6.326 v -5.176 c 1.533,-0.768 2.492,-1.342 3.258,-2.301 0.768,-0.959 1.15,-2.109 1.15,-3.451 0,-1.15 -0.383,-2.301 -1.15,-3.066 -0.957,-0.959 -1.916,-1.342 -3.066,-1.342 0,0 0,0 -0.191,0 v -3.068 c 0.191,0 0.191,0 0.383,0 1.918,0 3.643,0.768 5.176,2.301 1.535,1.533 2.301,3.26 2.301,5.367 0,1.727 -0.574,3.068 -1.725,4.602 -0.959,1.342 -2.492,2.301 -4.602,3.26 l 6.711,6.135 3.641,-10.162 h 3.643 l -4.984,12.27 7.285,6.711 -2.107,2.301 -6.52,-5.943 c -0.957,2.301 -2.301,3.834 -4.025,5.176 -1.533,0.959 -3.26,1.533 -5.176,1.725 v 0 -10e-4 z m 53.869,-24.732 c -1.342,-1.916 -3.066,-3.449 -4.791,-4.408 -1.727,-0.959 -3.836,-1.342 -6.135,-1.342 -3.643,0 -6.711,1.342 -9.203,3.834 -2.684,2.684 -3.834,5.943 -3.834,9.586 0,4.025 1.15,7.285 3.834,9.969 2.492,2.684 5.561,4.025 9.203,4.025 2.299,0 4.217,-0.574 6.135,-1.533 1.725,-0.768 3.258,-2.301 4.6,-4.025 h 3.834 c -1.533,2.684 -3.449,4.791 -5.941,6.326 -2.492,1.533 -5.369,2.301 -8.436,2.301 -4.793,0 -8.627,-1.727 -11.887,-4.986 -3.26,-3.258 -4.793,-7.283 -4.793,-12.076 0,-2.301 0.385,-4.41 1.342,-6.52 0.768,-1.916 2.109,-3.834 3.834,-5.367 1.535,-1.533 3.26,-2.875 5.178,-3.643 1.916,-0.768 4.025,-1.15 6.135,-1.15 3.258,0 6.135,0.768 8.818,2.301 2.492,1.725 4.602,3.834 5.943,6.709 h -3.836 z m -53.869,-9.01 v 3.068 c -1.15,0 -2.301,0.383 -3.068,1.342 -0.766,0.766 -1.15,1.916 -1.15,3.258 0,0.959 0.191,1.918 0.768,2.877 0.574,0.766 1.533,1.725 2.875,2.875 0.191,0 0.385,-0.191 0.576,-0.191 v 5.176 l -1.727,-1.533 c -1.533,0.768 -2.875,1.725 -3.643,2.875 -0.766,1.342 -1.342,2.684 -1.342,4.219 0,1.916 0.576,3.449 1.727,4.793 1.342,1.148 2.684,1.725 4.6,1.725 0.193,0 0.385,0 0.385,0 v 3.26 c -0.191,0 -0.385,0 -0.576,0 -2.684,0 -4.793,-0.959 -6.709,-2.877 -1.727,-1.916 -2.684,-4.217 -2.684,-6.9 0,-1.918 0.574,-3.834 1.533,-5.369 1.15,-1.725 2.684,-3.066 4.602,-3.834 -1.535,-1.342 -2.492,-2.492 -2.877,-3.451 -0.574,-1.15 -0.957,-2.299 -0.957,-3.643 0,-2.107 0.766,-3.834 2.299,-5.367 1.534,-1.344 3.258,-2.112 5.368,-2.303 z m -33.934,42.56 v -3.068 0 c 2.684,0 4.984,-0.766 6.711,-2.684 1.725,-1.918 2.492,-4.41 2.492,-7.477 v -0.576 c -1.15,1.535 -2.492,2.877 -4.027,3.643 -1.533,0.768 -3.258,1.15 -4.984,1.15 -0.191,0 -0.191,0 -0.191,0 v -2.875 0 c 2.301,0 4.602,-0.959 6.326,-2.875 1.918,-1.918 2.877,-4.219 2.877,-6.902 0,-2.683 -0.959,-5.176 -2.877,-7.094 -1.725,-1.916 -3.834,-2.875 -6.326,-2.875 v 0 -2.875 c 1.918,0 3.643,0.383 5.176,1.15 1.535,0.574 2.877,1.916 4.027,3.449 v -4.025 h 3.066 v 20.322 c 0,4.408 -1.15,7.668 -3.258,9.969 -2.109,2.492 -4.986,3.643 -8.82,3.643 z m 0,-34.507 v 2.875 c -2.684,0 -4.602,0.959 -6.326,2.684 -1.916,1.918 -2.875,4.219 -2.875,7.094 0,2.684 0.959,5.176 2.875,7.094 1.727,1.916 3.643,2.875 6.326,2.875 v 2.875 c -3.451,0 -6.518,-1.15 -8.818,-3.643 -2.492,-2.492 -3.643,-5.559 -3.643,-9.201 0,-3.642 1.15,-6.518 3.643,-9.01 2.301,-2.492 5.367,-3.643 8.627,-3.643 0,0 0,0 0.191,0 z m 0,31.439 v 3.068 c -2.684,0 -4.793,-0.768 -6.709,-1.918 -2.109,-1.533 -3.26,-3.26 -3.834,-5.559 h 3.643 c 0.383,1.342 1.342,2.492 2.492,3.258 1.342,0.768 2.492,1.151 4.408,1.151 z m -98.923,-5.75 v -2.877 0 c 2.492,0 4.602,-1.15 6.519,-3.066 1.917,-1.918 2.684,-4.41 2.684,-7.094 0,-2.684 -0.767,-4.984 -2.684,-6.902 -1.917,-1.916 -4.026,-2.875 -6.326,-2.875 -0.192,0 -0.192,0 -0.192,0 v -2.875 h 0.192 c 1.917,0 3.643,0.383 5.176,1.15 1.534,0.766 2.876,1.916 3.834,3.258 v -3.834 h 3.067 v 24.348 h -3.067 v -3.834 c -0.958,1.533 -2.3,2.492 -3.834,3.451 -1.726,0.766 -3.45,1.148 -5.368,1.148 v 0 0.002 z m 20.514,-0.768 h -3.26 v -24.348 h 3.067 v 2.875 c 0.768,-1.148 1.534,-1.916 2.492,-2.492 0.768,-0.574 1.918,-0.766 3.067,-0.766 v 3.451 c -1.917,0.191 -3.259,0.766 -4.217,1.725 -0.768,0.959 -1.15,2.684 -1.15,4.793 v 14.762 z m 8.243,-24.347 h 3.067 v 2.684 c 0.959,-0.957 1.917,-1.916 3.259,-2.492 1.343,-0.383 2.685,-0.766 4.41,-0.766 1.725,0 3.259,0.383 4.792,0.957 1.343,0.768 2.492,1.727 3.26,2.877 0.575,0.959 0.958,1.916 1.149,3.258 0.384,1.15 0.384,2.877 0.384,5.178 v 12.652 h -3.067 v -13.612 c 0,-2.875 -0.575,-4.984 -1.533,-6.326 -1.15,-1.342 -2.876,-1.918 -5.368,-1.918 -1.534,0 -2.684,0.191 -3.834,0.768 -0.959,0.574 -1.917,1.533 -2.492,2.492 -0.384,0.766 -0.575,1.533 -0.768,2.301 -0.191,0.957 -0.191,2.301 -0.191,4.408 v 11.887 h -3.067 v -24.348 z m 28.564,-2.875 h -3.066 v -4.984 h 3.066 z m -3.066,27.222 v -24.348 h 3.066 v 24.348 z m 8.053,-24.347 h 3.066 v 2.684 c 0.959,-0.957 2.109,-1.916 3.451,-2.492 1.15,-0.383 2.684,-0.766 4.217,-0.766 1.918,0 3.451,0.383 4.793,0.957 1.533,0.768 2.492,1.727 3.451,2.877 0.574,0.959 0.959,1.916 1.15,3.258 0.191,1.15 0.383,2.877 0.383,5.178 v 12.652 h -3.066 v -13.612 c 0,-2.875 -0.576,-4.984 -1.727,-6.326 -1.151,-1.342 -2.875,-1.918 -5.367,-1.918 -1.342,0 -2.492,0.191 -3.643,0.768 -1.15,0.574 -1.918,1.533 -2.492,2.492 -0.383,0.766 -0.768,1.533 -0.959,2.301 0,0.957 -0.191,2.301 -0.191,4.408 v 11.887 h -3.066 z m -62.308,-0.574 v 2.875 c -2.684,0 -4.792,0.959 -6.518,2.875 -1.917,1.918 -2.876,4.41 -2.876,7.285 0,2.684 0.959,4.984 2.876,6.902 1.726,1.916 3.834,2.684 6.518,2.875 v 2.877 0 c -3.642,0 -6.709,-1.344 -9.01,-3.643 -2.492,-2.492 -3.643,-5.561 -3.643,-9.203 0,-3.642 1.342,-6.709 3.643,-9.201 2.493,-2.301 5.369,-3.642 9.01,-3.642 z m -27.605,25.689 v -3.068 0 c 1.725,0 3.45,-0.383 4.984,-1.342 1.342,-0.959 2.492,-2.301 3.259,-4.025 h 3.643 c -1.15,2.684 -2.684,4.793 -4.793,6.326 -2.108,1.342 -4.409,2.107 -7.093,2.107 v 0 0 z m 0,-11.887 v -2.684 h 9.202 c -0.575,-2.686 -1.726,-4.793 -3.26,-6.135 -1.533,-1.342 -3.643,-2.109 -5.942,-2.109 v -3.068 c 0,0 0,0 0.191,0 3.643,0 6.71,1.344 9.011,3.836 2.3,2.492 3.45,5.941 3.45,9.969 v 0.191 z m -61.732,-6.711 h 13.612 v 3.26 h -13.612 v 11.502 h 13.612 v 3.068 h -16.871 v -32.207 h 16.871 v 3.066 h -13.612 z m 61.732,-7.283 v 3.066 c -0.192,0 -0.192,0 -0.384,0 -2.301,0 -4.218,0.768 -5.943,2.109 -1.725,1.533 -2.684,3.643 -3.067,6.135 h 9.395 v 2.684 h -9.395 c 0.192,2.684 1.15,4.793 2.876,6.326 1.726,1.725 3.834,2.492 6.519,2.492 v 3.068 c -3.643,0 -6.519,-1.344 -9.011,-3.836 -2.492,-2.492 -3.643,-5.559 -3.643,-9.01 0,-3.834 1.15,-6.9 3.643,-9.395 2.3,-2.297 5.367,-3.447 9.01,-3.639 z m -33.359,11.502 v 2.875 h -10.544 v -2.875 z m 19.747,13.611 h -14.57 v -32.207 h 3.067 v 29.139 h 11.503 z"
+         inkscape:connector-curvature="0"
+         id="path2913"
+         style="fill:#2e75a3;fill-opacity:1" />
+    </g>
+    <rect
+       style="opacity:0;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:0.98795956;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect864"
+       width="69"
+       height="64"
+       x="4.434662e-09"
+       y="988.36218" />
+  </g>
+</svg>
diff --git a/src/CoreBundle/Menu/NavBuilder.php b/src/CoreBundle/Menu/NavBuilder.php
index b5aafc6268..7bea099ff7 100644
--- a/src/CoreBundle/Menu/NavBuilder.php
+++ b/src/CoreBundle/Menu/NavBuilder.php
@@ -72,6 +72,7 @@ class NavBuilder implements ContainerAwareInterface
             $translator->trans('Home'),
             [
                 'route' => 'legacy_index',
+                'icon' => 'home',
             ]
         );
 
@@ -80,6 +81,7 @@ class NavBuilder implements ContainerAwareInterface
                 $translator->trans('MyCourses'),
                 [
                     'route' => 'legacy_main',
+                    'icon' => 'book',
                     'routeParameters' => [
                         'name' => '../user_portal.php',
                     ],
@@ -90,6 +92,7 @@ class NavBuilder implements ContainerAwareInterface
                 $translator->trans('Calendar'),
                 [
                     'route' => 'legacy_main',
+                    'icon' => 'calendar-alt',
                     'routeParameters' => [
                         'name' => 'calendar/agenda_js.php',
                     ],
@@ -100,6 +103,7 @@ class NavBuilder implements ContainerAwareInterface
                 $translator->trans('Reporting'),
                 [
                     'route' => 'legacy_main',
+                    'icon' => 'chart-bar',
                     'routeParameters' => [
                         'name' => 'mySpace/index.php',
                     ],
@@ -111,6 +115,7 @@ class NavBuilder implements ContainerAwareInterface
                     $translator->trans('Social'),
                     [
                         'route' => 'legacy_main',
+                        'icon' => 'heart',
                         'routeParameters' => [
                             'name' => 'social/home.php',
                         ],
@@ -123,6 +128,7 @@ class NavBuilder implements ContainerAwareInterface
                     $translator->trans('Dashboard'),
                     [
                         'route' => 'legacy_main',
+                        'icon' => 'cube',
                         'routeParameters' => [
                             'name' => 'dashboard/index.php',
                         ],
@@ -132,6 +138,7 @@ class NavBuilder implements ContainerAwareInterface
                     $translator->trans('Administration'),
                     [
                         'route' => 'legacy_main',
+                        'icon' => 'cogs',
                         'routeParameters' => [
                             'name' => 'admin/index.php',
                         ],
@@ -232,8 +239,8 @@ class NavBuilder implements ContainerAwareInterface
 
         // Set CSS classes for the items
         foreach ($menu->getChildren() as $child) {
-            $child
-                ->setLinkAttribute('class', 'nav-link')
+                $child
+                ->setLinkAttribute('class', 'sidebar-link')
                 ->setAttribute('class', 'nav-item');
         }
 
diff --git a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
index d67ac1f570..166b40cebb 100644
--- a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
@@ -17,132 +17,134 @@
 {% endblock %}
 
 <body
-    class="{{ section_name }}"
+    class="{{ section_name }} app"
     {{ sonata_seo_html_attributes() }}
     data-in-course="{{ course ? 'true' : 'false' }}"
     data-course-code="{{ course ? course.code : '' }}"
 >
 <noscript>{{ "NoJavascript" | trans }}</noscript>
 
-{% block chamilo_wrap %}
-    {% autoescape false %}
-    <div id="wrap">
-        <div id="navigation" class="notification-panel">
-            {{ help_content }}
-            {{ bug_notification }}
-        </div>
-        {# topbar #}
-        {% block chamilo_topbar %}
-            {# creatable variable is set by the sonata page #}
-            {% if not creatable %}
-            {% include "@ChamiloTheme/Layout/topbar.html.twig" %}
-            {% endif %}
-        {% endblock %}
-        <div class="extra-header">{{ header_extra_content }}</div>
-        {% block chamilo_header %}
-        <header>
-            <div class="extra-header">
-                {{ header_extra_content }}
-            </div>
+<!-- SPINNER LOADER -->
+<div id='loader'>
+    <div class="spinner"></div>
+</div>
+<!-- END SPINNER -->
 
-            <section id="main" class="container">
-                {% if plugin_header_main %}
-                    <div class="row">
-                        <div class="col-lg-12">
-                            {{ plugin_header_main }}
-                        </div>
-                    </div>
-                {% endif %}
-                <div class="row">
-                    <div class="col-lg-3">
-                        <div class="logo">
-                            <a href="{{ url('legacy_index') }}">
-                            <img src="{{ asset('build/css/themes/'~ theme ~'/images/header-logo.png') }}"/>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-9">
-                        <div class="col-sm-4">
-                            {% if plugin_header_left is not null %}
-                                <div id="plugin_header_left">
-                                    {{ plugin_header_left }}
-                                </div>
-                            {% endif %}
-                        </div>
-                        <div class="col-sm-4">
-                            {% if plugin_header_center is not null %}
-                                <div id="plugin_header_center">
-                                    {{ plugin_header_center }}
-                                </div>
-                            {% endif %}
-                        </div>
-                        <div class="col-sm-4">
-                            {% if plugin_header_right is not null %}
-                                <div id="plugin_header_right">
-                                    {{ plugin_header_right }}
-                                </div>
-                            {% endif %}
-                            <div class="section-notifications">
-                                <ul id="notifications" class="nav nav-pills pull-right">
-                                    {{ notification_menu }}
-                                </ul>
-                            </div>
-                            {% if chamilo_settings_get("display.accessibility_font_resize")  == 'true' %}
-                                <div class="resize_font">
-                                    <div class="btn-group">
-                                        <a title= "{{ 'DecreaseFontSize' | trans }}" href="#" class="decrease_font btn btn-default">
-                                            <em class="fa fa-font"></em>
-                                        </a>
-                                        <a title= "{{ 'ResetFontSize' | trans }}" href="#" class="reset_font btn btn-default">
-                                            <em class="fa fa-font"></em>
-                                        </a>
-                                        <a title= "{{ 'IncreaseFontSize' | trans }}" href="#" class="increase_font btn btn-default">
-                                            <em class="fa fa-font"></em>
-                                        </a>
+<script>
+    window.addEventListener('load', () => {
+        const loader = document.getElementById('loader');
+        setTimeout(() => {
+            loader.classList.add('fadeOut');
+        }, 1000);
+    });
+</script>
+
+<!-- APP CONTENT -->
+<div>
+    <!-- APP SIDEBAR -->
+    <div class="sidebar">
+        <div class="sidebar-inner">
+            <!-- SIDEBAR LOGO -->
+            <div class="sidebar-logo">
+                <div class="peers ai-c fxw-nw">
+                    <div class="peer peer-greed">
+                        <a class="sidebar-link td-n" href="{{ url('legacy_index') }}">
+                            <div class="peers ai-c fxw-nw">
+                                <div class="peer">
+                                    <div class="logo">
+                                        <img src="{{ asset('build/css/themes/'~ theme ~'/images/logo_chamilo.svg') }}"/>
                                     </div>
                                 </div>
-                            {% endif %}
+                            </div>
+                        </a>
+                    </div>
+                    <div class="peer">
+                        <div class="mobile-toggle sidebar-toggle">
+                            <a href="" class="td-n">
+                                <i class="ti-arrow-circle-left"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
-            </section>
-
-            {# menu #}
+            </div>
+            <!-- END SIDEBAR LOGO -->
+            <!-- SIDEBAR MENU -->
+            {# SIDEBAR MENU #}
             {% block chamilo_menu %}
                 <div id="menu-bar">
                     {# creatable variable is set by the sonata page #}
                     {% if not creatable %}
                         {# course navigation links/shortcuts need to be activated by the admin #}
-                        {% include "@ChamiloTheme/Layout/menu.html.twig" %}
+                        {% include "@ChamiloTheme/Layout/sidebar.html.twig" %}
                     {% endif %}
                 </div>
             {% endblock %}
-        </header>
+            <!-- END SIDEBAR MENU -->
+        </div>
+    </div>
+    <!-- END APP SIDEBAR -->
+    <!-- PAGE CONTAINER -->
+
+    <div class="page-container">
+        <!-- TOOLBAR USER -->
+        {% block chamilo_header %}
+            {% include '@ChamiloTheme/Layout/topbar.html.twig' %}
         {% endblock %}
+        <!-- END TOOLBAR USER -->
+        {% block chamilo_wrap %}
+        <!-- MAIN CONTENT -->
+        {% autoescape false %}
+        <main class='main-content bg-content'>
+            <div id='mainContent'>
+                <div class="gap-20 masonry pos-r">
+                    {% block page_content %}
 
-        {#<div id="top_main_content" class="container">#}
-        <div id="top_main_content" class="container">
-        {# course navigation links/shortcuts need to be activated by the admin #}
-        {% include "@ChamiloTheme/Layout/course_navigation.html.twig" %}
-            {#<header class="header">#}
-                {#{% block chamilo_logo %}#}
-                {#<a href="#" class="logo">#}
-                    {#Chamilo#}
-                    {#&#123;&#35;{{- chamilo_settings_get('platform.institution') -}}&#35;&#125;#}
-                {#</a>#}
-                {#{% endblock %}#}
-                {#{% block chamilo_main_navbar %}#}
-                {#<!-- Header Navbar: style can be found in header.less -->#}
-                {#{% endblock %}#}
-            {#</header>#}
-        {% block page_content %}
+                    {% endblock %}
+                </div>
+            </div>
+        </main>
+        {% endautoescape %}
+        <!-- END MAIN CONTENT -->
         {% endblock %}
-        </div> {# end top_main_content #}
-    </div> {# End page-wrap div #}
+
+    </div>
+    <!-- END PAGE CONTAINER -->
+    <!-- FOOTER -->
     {% block chamilo_footer %}
         {% include '@ChamiloTheme/Layout/footer.html.twig' %}
     {% endblock %}
-{% endautoescape %}
-{% endblock %} {# End chamilo_wrap block #}
+    <!-- END FOOTER -->
+
+</div>
+<!-- END APP CONTENT -->
+
+<div class="modal fade" id="expand-image-modal" tabindex="-1" role="dialog" aria-labelledby="expand-image-modal-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="expand-image-modal-title">&nbsp;</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+        </div>
+    </div>
+</div>
+{# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #}
+<div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="global-modal-title">&nbsp;</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+        </div>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/src/ThemeBundle/Resources/views/Layout/footer.html.twig b/src/ThemeBundle/Resources/views/Layout/footer.html.twig
index ffb83144b1..e8611df255 100644
--- a/src/ThemeBundle/Resources/views/Layout/footer.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/footer.html.twig
@@ -1,95 +1,21 @@
-{#<footer {% block footer_open_attributes %}{% endblock footer_open_attributes %}>#}
 {% autoescape false %}
-<footer id="footer-section" class="page-footer">
-    <!-- start of #footer section -->
-    <div class="container">
-        <div class="pre-footer">
-            {% if plugin_pre_footer %}
-            <div id="plugin_pre_footer">
-                {{ plugin_pre_footer }}
-            </div>
-            {% endif %}
-        </div>
-        <div class="sub-footer">
-            <div class="row">
-                <div class="col-md-4">
-                    {% if session_teachers is not null %}
-                    <div class="session-teachers">
-                        {{ session_teachers }}
-                    </div>
-                    {% endif %}
-                    {% if teachers is not null %}
-                    <div class="teachers">
-                        {{ teachers }}
-                    </div>
-                    {% endif %}
-                    {% if plugin_footer_left is not null %}
-                    <div id="plugin_footer_left">
-                        {{ plugin_footer_left }}
-                    </div>
-                    {% endif %}
-                </div>
-                <div class="col-md-4">
-                    {% if plugin_footer_center is not null %}
-                    <div id="plugin_footer_center">
-                        {{ plugin_footer_center }}
-                    </div>
-                    {% endif %}
-                </div>
-                <div class="col-md-4 text-right">
-                    {% if administrator_name is not null %}
-                    <div class="administrator-name">
-                        {{ administrator_name }}
-                    </div>
-                    {% endif %}
-                    <div class="software-name">
-	                <a href="{{_p.web}}" target="_blank">
-                        {{ "PoweredByX" |get_lang | format(_s.software_name) }}
-                    </a>&copy; {{ "now"|date("Y") }}
-                    </div>
-                    {% if plugin_footer_right is not null %}
-                    <div id="plugin_footer_right">
-                        {{ plugin_footer_right }}
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
+<footer class="footer bdT ta-c lh-0 fsz-sm c-grey-600 text-right">
+    {% if plugin_pre_footer %}
+        <div id="plugin_pre_footer">
+            {{ plugin_pre_footer }}
         </div>
-        {% if footer_extra_content is not null %}
-        <div class="extra-footer">
-            {{ footer_extra_content }}
-        </div>
-        {% endif %}
-    </div><!-- end of #container -->
+    {% endif %}
+    {% if administrator_name is not null %}
+        {{ administrator_name }}
+    {% endif %}
+    <a href="{{_p.web}}" target="_blank">
+        {{ "PoweredByX" |get_lang | format(_s.software_name) }}
+    </a>&copy; {{ "now"|date("Y") }}
 </footer>
+
+{#<footer {% block footer_open_attributes %}{% endblock footer_open_attributes %}>#}
 {% endautoescape %}
 {{ execution_stats }}
 
-<div class="modal fade" id="expand-image-modal" tabindex="-1" role="dialog" aria-labelledby="expand-image-modal-title" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="expand-image-modal-title">&nbsp;</h4>
-            </div>
-            <div class="modal-body">
-            </div>
-        </div>
-    </div>
-</div>
-{# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #}
-<div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title" id="global-modal-title">&nbsp;</h4>
-            </div>
-            <div class="modal-body">
-            </div>
-        </div>
-    </div>
-</div>
+
 {{ footer_extra_content }}
diff --git a/src/ThemeBundle/Resources/views/Layout/legacy_js.html.twig b/src/ThemeBundle/Resources/views/Layout/legacy_js.html.twig
index c4b92fbb34..7020802199 100644
--- a/src/ThemeBundle/Resources/views/Layout/legacy_js.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/legacy_js.html.twig
@@ -3,3 +3,4 @@
 <script src="{{ asset('libs/ckeditor/ckeditor.js') }}"></script>
 {#<script src="{{ asset('libs/readmore-js/readmore.js') }}"></script>#}
 <script src="{{ asset('libs/js-cookie/src/js.cookie.js') }}"></script>
+
diff --git a/src/ThemeBundle/Resources/views/Layout/sidebar.html.twig b/src/ThemeBundle/Resources/views/Layout/sidebar.html.twig
new file mode 100644
index 0000000000..53f2500750
--- /dev/null
+++ b/src/ThemeBundle/Resources/views/Layout/sidebar.html.twig
@@ -0,0 +1,26 @@
+{% autoescape false %}
+<ul class="sidebar-menu scrollable pos-r">
+    {{ mopa_bootstrap_menu('ChamiloCoreBundle:NavBuilder:leftMenu', {'automenu': 'navbar', 'stacked' : true}) }}
+
+    <li class="sidebar-divider"></li>
+
+    <li class="nav-item">
+        <a class='sidebar-link' href="https://docs.chamilo.org/">
+            <i class="far fa-file-alt"></i>
+            {{ "Documentation"|get_lang }}
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class='sidebar-link' href="https://forum.chamilo.org/">
+            <i class="fa fa-users"></i>
+            {{ "Forums"|get_lang }}
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class='sidebar-link' href="https://github.com/chamilo/chamilo-lms">
+            <i class="fab fa-github"></i>
+            {{ "GithubRepository"|get_lang }}
+        </a>
+    </li>
+</ul>
+{% endautoescape %}
\ No newline at end of file
diff --git a/src/ThemeBundle/Resources/views/Layout/topbar.html.twig b/src/ThemeBundle/Resources/views/Layout/topbar.html.twig
index 378f7cd7fb..5c44fd32a4 100644
--- a/src/ThemeBundle/Resources/views/Layout/topbar.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/topbar.html.twig
@@ -1,73 +1,338 @@
 <!-- Topbar -->
 {% autoescape false %}
-{% if show_toolbar == 1 %}
-    <nav id="toolbar-admin" class="navbar navbar-dark bg-dark">
-        <a class="navbar-brand" href="{{ _p.web }}">
-            <img src="{{ "icon-chamilo.png"|icon(22) }}" title="{{ "siteName" | get_setting }}">
-        </a>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $('.search-toggle').on('click', e => {
+                $('.search-box, .search-input').toggleClass('active');
+                $('.search-input input').focus();
+                e.preventDefault();
+            });
 
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+            // Sidebar links
+            $('.sidebar .sidebar-menu li a').on('click', function () {
+                const $this = $(this);
 
-        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav mr-auto">
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ _p.web }}user_portal.php"> {{ "MyCourses"|get_lang }}
-                        </a>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link" data-toggle="dropdown" href="#">
-                            {{'Tracking'|get_lang }}<b class="caret"></b>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{{ _p.web_main }}mySpace/">{{ "CoursesReporting"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}mySpace/index.php?view=admin">{{ "AdminReports"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}tracking/exams.php">{{ "ExamsReporting"|get_lang }}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{{ _p.web_main }}dashboard/">{{ "Dashboard"|get_lang }}</a></li>
-                        </ul>
-                    </li>
-                    {% if is_granted('ROLE_ADMIN') == 1 %}
-                    <li class="nav-item dropdown">
-                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{'Administration'|get_lang }}<b class="caret"></b></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{{ _p.web_main }}admin/">{{ "Home"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}admin/user_list.php">{{ "UserList"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}admin/course_list.php">{{ "CourseList"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}session/session_list.php">{{ "SessionList"|get_lang }}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{{ _p.web_main }}admin/settings.php">{{ "Settings"|get_lang }}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{{ _p.web_main }}admin/settings.php?category=Plugins">{{ "Plugins"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}admin/settings.php?category=Regions">{{ "Regions"|get_lang }}</a></li>
-                        </ul>
-                    </li>
+                if ($this.parent().hasClass('open')) {
+                    $this
+                        .parent()
+                        .children('.dropdown-menu')
+                        .slideUp(200, () => {
+                            $this.parent().removeClass('open');
+                        });
+                } else {
+                    $this
+                        .parent()
+                        .parent()
+                        .children('li.open')
+                        .children('.dropdown-menu')
+                        .slideUp(200);
 
-                    <li class="nav-item dropdown">
-                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ 'Add'|get_lang }}<b class="caret"></b></a>
-                        <ul class="dropdown-menu">
-                            <li><a href="{{ _p.web_main }}admin/user_add.php">{{ "User"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}admin/course_add.php">{{ "Course"|get_lang }}</a></li>
-                            <li><a href="{{ _p.web_main }}session/session_add.php">{{ "Session"|get_lang }}</a></li>
-                        </ul>
-                    </li>
-                    {% endif %}
-                </ul>
+                    $this
+                        .parent()
+                        .parent()
+                        .children('li.open')
+                        .children('a')
+                        .removeClass('open');
 
-                {% if is_granted('ROLE_ADMIN') == 1 %}
-                <form class="form-inline my-2 my-lg-0" role="search" action="{{ _p.web_main }}admin/user_list.php" method="get">
-                    <input type="text" class="form-control" placeholder="{{'SearchUsers'|get_lang }}" name="keyword">
-                </form>
-                {% endif %}
+                    $this
+                        .parent()
+                        .parent()
+                        .children('li.open')
+                        .removeClass('open');
 
-                <ul class="nav navbar-nav navbar-right">
-                    <li><a href="{{ path('logout') }}">{{ "Logout"|get_lang }}</a></li>
-                </ul>
-            </div> <!-- /nav collapse -->
-        {% endif %}
-    </nav><!-- /topbar -->
-{% endif %}
+                    $this
+                        .parent()
+                        .children('.dropdown-menu')
+                        .slideDown(200, () => {
+                            $this.parent().addClass('open');
+                        });
+                }
+            });
 
+            // Sidebar Activity Class
+            const sidebarLinks = $('.sidebar').find('.sidebar-link');
+
+            sidebarLinks
+                .each((index, el) => {
+                    $(el).removeClass('active');
+                })
+                .filter(function () {
+                    const href = $(this).attr('href');
+                    const pattern = href[0] === '/' ? href.substr(1) : href;
+                    return pattern === (window.location.pathname).substr(1);
+                })
+                .addClass('active');
+
+            // ٍSidebar Toggle
+            $('.sidebar-toggle').on('click', e => {
+                $('.app').toggleClass('is-collapsed');
+                e.preventDefault();
+            });
+
+            /**
+             * Wait untill sidebar fully toggled (animated in/out)
+             * then trigger window resize event in order to recalculate
+             * masonry layout widths and gutters.
+             */
+            $('#sidebar-toggle').click(e => {
+                e.preventDefault();
+                setTimeout(() => {
+                    window.dispatchEvent(window.EVENT);
+                }, 300);
+            });
+        });
+    </script>
+    <div class="header navbar">
+        <div class="header-container">
+
+            <!-- NAVBAR LEFT -->
+            <ul class="nav-left">
+                <li>
+                    <a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
+                        <i class="fas fa-bars"></i>
+                    </a>
+                </li>
+                <li class="search-box">
+                    <a class="search-toggle no-pdd-right" href="javascript:void(0);">
+                        <i class="search-icon fas fa-search pdd-right-10"></i>
+                        <i class="search-icon-close fas fa-times pdd-right-10"></i>
+                    </a>
+                </li>
+                <li class="search-input">
+                    <input class="form-control" type="text" placeholder="Buscar curso...">
+                </li>
+            </ul>
+            <!-- END NAVBAR LEFT -->
+            <!-- NAVBAR RIGHT -->
+            {% if app.user is not null and is_granted('IS_AUTHENTICATED_FULLY') %}
+            <ul class="nav-right">
+                <li class="btn-padding">
+                    <a class="btn btn-light btn-create-two btn-sm" href="{{ url('legacy_main', { 'name' : 'main/create_course/add_course.php' }) }}">
+                        <i class="fa fa-plus fa-lg" aria-hidden="true"></i>
+                        {{ "AddCourse"|trans }}
+                    </a>
+                </li>
+                <li class="btn-padding">
+
+                    <a class="btn btn-light btn-create-one btn-sm" href="{{ url('legacy_main', { 'name' : 'session/session_add.php' }) }}">
+                        <i class="fa fa-plus fa-lg" aria-hidden="true"></i>
+                        {{ "AddSession"|trans }}
+                    </a>
+                </li>
+                <li class="btn-padding">
+                    <a class="btn btn-light btn-create-three btn-sm" href="{{ path('legacy_main', { 'name' : '../user_portal.php'}) }}">
+                        <i class="fa fa-graduation-cap fa-lg" aria-hidden="true"></i>
+                        {{ "MyCourses"|trans }}
+                    </a>
+                </li>
+
+                <li class="btn-menu">
+                    <a href="{{ url('legacy_main', { 'name' : 'calendar/agenda_js.php' }) }}">
+                        <i class="fa fa-calendar fa-lg" aria-hidden="true"></i>
+                    </a>
+                </li>
+
+                <li class="notifications dropdown">
+                    <span class="counter bgc-red">3</span>
+                    <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                        <i class="far fa-bell"></i>
+                    </a>
+
+                    <ul class="dropdown-menu">
+                        <li class="pX-20 pY-15 bdB">
+                            <i class="ti-bell pR-10"></i>
+                            <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
+                        </li>
+                        <li>
+                            <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">John Doe</span>
+                              <span class="c-grey-600">liked your <span class="text-dark">post</span>
+                              </span>
+                            </span>
+                                            <p class="m-0">
+                                                <small class="fsz-xs">5 mins ago</small>
+                                            </p>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">Moo Doe</span>
+                              <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
+                              </span>
+                            </span>
+                                            <p class="m-0">
+                                                <small class="fsz-xs">7 mins ago</small>
+                                            </p>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">Lee Doe</span>
+                              <span class="c-grey-600">commented on your <span class="text-dark">video</span>
+                              </span>
+                            </span>
+                                            <p class="m-0">
+                                                <small class="fsz-xs">10 mins ago</small>
+                                            </p>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="pX-20 pY-15 ta-c bdT">
+                    <span>
+                      <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
+                    </span>
+                        </li>
+                    </ul>
+                </li>
+                <li class="notifications dropdown">
+                    <span class="counter bgc-blue">3</span>
+                    <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                        <i class="far fa-envelope"></i>
+                    </a>
+
+                    <ul class="dropdown-menu">
+                        <li class="pX-20 pY-15 bdB">
+                            <i class="ti-email pR-10"></i>
+                            <span class="fsz-sm fw-600">Emails</span>
+                        </li>
+                        <li>
+                            <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                                            <div>
+                                                <div class="peers jc-sb fxw-nw mB-5">
+                                                    <div class="peer">
+                                                        <p class="fw-500 mB-0">John Doe</p>
+                                                    </div>
+                                                    <div class="peer">
+                                                        <small class="fsz-xs">5 mins ago</small>
+                                                    </div>
+                                                </div>
+                                                <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                                            <div>
+                                                <div class="peers jc-sb fxw-nw mB-5">
+                                                    <div class="peer">
+                                                        <p class="fw-500 mB-0">Moo Doe</p>
+                                                    </div>
+                                                    <div class="peer">
+                                                        <small class="fsz-xs">15 mins ago</small>
+                                                    </div>
+                                                </div>
+                                                <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                                        <div class="peer mR-15">
+                                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                                        </div>
+                                        <div class="peer peer-greed">
+                                            <div>
+                                                <div class="peers jc-sb fxw-nw mB-5">
+                                                    <div class="peer">
+                                                        <p class="fw-500 mB-0">Lee Doe</p>
+                                                    </div>
+                                                    <div class="peer">
+                                                        <small class="fsz-xs">25 mins ago</small>
+                                                    </div>
+                                                </div>
+                                                <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="pX-20 pY-15 ta-c bdT">
+                    <span>
+                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                    </span>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                        <div class="peer mR-10">
+                            <img class="w-2r bdrs-50p" src="{{ asset(app.user.avatarOrAnonymous(32)) }}" alt="{{ app.user.completeName }}">
+                        </div>
+                        <div class="peer">
+                            <span class="fsz-sm">{{ app.user.completeName }}</span>
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu fsz-sm">
+                        <li>
+                            <a title="{{ "Inbox"|trans }}" class="dropdown-item"
+                               href="{{ url('legacy_main', { 'name' : 'messages/inbox.php' }) }}">
+                                <em class="fa fa-envelope" aria-hidden="true"></em> {{ "Inbox"|get_lang }}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ url('legacy_main', { 'name' : 'survey/pending.php' }) }}" class="dropdown-item">
+                                <em class="fa fa-chart-pie"></em> {{ 'PendingSurveys'|get_lang }}
+                            </a>
+                        </li>
+                        <li>
+                            <a title="{{ "MyCertificates"|trans }}" class="dropdown-item"
+                               href="{{ url('legacy_main', { 'name' : 'gradebook/my_certificates.php' }) }}">
+                                <em class="fa fa-graduation-cap"
+                                    aria-hidden="true"></em> {{ "MyCertificates"|get_lang }}
+                            </a>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        <li>
+                            <a id="logout_button" title="{{ "Logout"|trans }}" class="dropdown-item"
+                               href="{{ path('legacy_main', { 'name' : '../public/logout'}) }}">
+                                <em class="fa fa-sign-out-alt"></em> {{ "Logout"|trans }}
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            {% endif %}
+            <!-- END NAVBAR RIGHT -->
+        </div>
+    </div>
 {% endautoescape %}
\ No newline at end of file