diff --git a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss b/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
index 2638400..0c2ddb2 100644
--- a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
+++ b/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
@@ -279,8 +279,22 @@
             float: left;
             width: 34px;
             text-align: center;
-            margin-left: 10px;
-            margin-right: 12px;
+            margin-left: 12px;
+            margin-right: 10px;
+        }
+
+        a.logo-mini .logo-img {
+          width: 32px;
+          display: inline-block;
+          height: 32px;
+          margin-left: 0;
+          margin-right: 15px;
+          background: #fff;
+          border-radius: 32px;
+          text-align: center;
+          img {
+            max-width: 21px;
+          }
         }
 
         a.logo-normal{
@@ -345,6 +359,10 @@
       @include linear-gradient($success-states, $success);
     }
 
+    &[data="vue"] {
+      @include linear-gradient($vue-states, $vue);
+    }
+
     .user{
         padding-bottom: 20px;
         margin:20px auto 0;
@@ -450,6 +468,10 @@
       border-top: 2px solid $success;
     }
 
+    &[data="vue"]{
+      border-top: 2px solid $vue;
+    }
+
     &[data="primary"]{
       border-top: 2px solid $primary;
     }
diff --git a/src/assets/sass/black-dashboard/custom/_variables.scss b/src/assets/sass/black-dashboard/custom/_variables.scss
index 326af19..a771c5a 100644
--- a/src/assets/sass/black-dashboard/custom/_variables.scss
+++ b/src/assets/sass/black-dashboard/custom/_variables.scss
@@ -1,4 +1,7 @@
-
+@import "../bootstrap/mixins";
+@import "../bootstrap/functions";
+@import "functions";
+@import "mixins";
 // Global settings
 
 $enable-caret:              true !default;
@@ -104,7 +107,7 @@ $info:          #1d8cf8 !default;
 $warning:       #ff8d72 !default;
 $danger:        #fd5d93 !default;
 $black:         #222a42 !default;
-
+$vue:           #42b883 !default;
 
 // gradient
 $default-states:       #263148 !default;
@@ -114,6 +117,7 @@ $info-states:          #3358f4 !default;
 $warning-states:       #ff6491 !default;
 $danger-states:        #ec250d !default;
 $black-states:         #1d253b !default;
+$vue-states:           #38ef7d !default;
 
 $background-black:           #1e1e2f !default;
 $background-states-black:    #1e1e24 !default;
diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue
index bd13ddf..ed365f6 100644
--- a/src/components/SidebarPlugin/SideBar.vue
+++ b/src/components/SidebarPlugin/SideBar.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="sidebar"
-       :data-background-color="backgroundColor"
-       :data-active-color="activeColor">
+       :data="backgroundColor">
     <!--
             Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black | darkblue"
             Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
@@ -10,7 +9,11 @@
     <div class="sidebar-wrapper" id="style-3">
       <div class="logo">
         <a href="http://www.creative-tim.com" class="simple-text logo-mini">
-          {{shortTitle}}
+          <div class="logo-img">
+            <img
+              src="data:image/png;base64,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"
+              alt="">
+          </div>
         </a>
         <a href="http://www.creative-tim.com" class="simple-text logo-normal">
           {{title}}
@@ -37,105 +40,104 @@
   </div>
 </template>
 <script>
-import MovingArrow from "./MovingArrow.vue";
-import SidebarLink from "./SidebarLink";
-export default {
-  props: {
-    title: {
-      type: String,
-      default: "Creative Tim"
-    },
-    backgroundColor: {
-      type: String,
-      default: "black",
-      validator: value => {
-        let acceptedValues = ["white", "black", "darkblue"];
-        return acceptedValues.indexOf(value) !== -1;
-      }
-    },
-    activeColor: {
-      type: String,
-      default: "success",
-      validator: value => {
-        let acceptedValues = [
-          "primary",
-          "info",
-          "success",
-          "warning",
-          "danger"
-        ];
-        return acceptedValues.indexOf(value) !== -1;
-      }
-    },
-    sidebarLinks: {
-      type: Array,
-      default: () => []
-    },
-    autoClose: {
-      type: Boolean,
-      default: true
-    }
-  },
-  provide() {
-    return {
-      autoClose: this.autoClose,
-      addLink: this.addLink,
-      removeLink: this.removeLink
-    };
-  },
-  components: {
-    MovingArrow,
-    SidebarLink
-  },
-  computed: {
-    /**
-     * Styles to animate the arrow near the current active sidebar link
-     * @returns {{transform: string}}
-     */
-    arrowMovePx() {
-      return this.linkHeight * this.activeLinkIndex;
-    },
-    shortTitle() {
-      return this.title.split(' ')
-        .map(word => word.charAt(0))
-        .join('').toUpperCase();
-    }
-  },
-  data() {
-    return {
-      linkHeight: 65,
-      activeLinkIndex: 0,
-      windowWidth: 0,
-      isWindows: false,
-      hasAutoHeight: false,
-      links: []
-    };
-  },
-  methods: {
-    findActiveLink() {
-      this.links.forEach((link, index) => {
-        if (link.isActive()) {
-          this.activeLinkIndex = index;
+  import MovingArrow from "./MovingArrow.vue";
+  import SidebarLink from "./SidebarLink";
+
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: "Creative Tim"
+      },
+      backgroundColor: {
+        type: String,
+        default: "black",
+        validator: value => {
+          let acceptedValues = ["white", "black", "darkblue"];
+          return acceptedValues.indexOf(value) !== -1;
         }
-      });
-    },
-    addLink(link) {
-      const index = this.$slots.links.indexOf(link.$vnode);
-      this.links.splice(index, 0, link);
-    },
-    removeLink(link) {
-      const index = this.links.indexOf(link);
-      if (index > -1) {
-        this.links.splice(index, 1);
+      },
+      activeColor: {
+        type: String,
+        default: "success",
+        validator: value => {
+          let acceptedValues = [
+            "primary",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ];
+          return acceptedValues.indexOf(value) !== -1;
+        }
+      },
+      sidebarLinks: {
+        type: Array,
+        default: () => []
+      },
+      autoClose: {
+        type: Boolean,
+        default: true
       }
+    },
+    provide() {
+      return {
+        autoClose: this.autoClose,
+        addLink: this.addLink,
+        removeLink: this.removeLink
+      };
+    },
+    components: {
+      MovingArrow,
+      SidebarLink
+    },
+    computed: {
+      /**
+       * Styles to animate the arrow near the current active sidebar link
+       * @returns {{transform: string}}
+       */
+      arrowMovePx() {
+        return this.linkHeight * this.activeLinkIndex;
+      },
+      shortTitle() {
+        return this.title.split(' ')
+          .map(word => word.charAt(0))
+          .join('').toUpperCase();
+      }
+    },
+    data() {
+      return {
+        linkHeight: 65,
+        activeLinkIndex: 0,
+        windowWidth: 0,
+        isWindows: false,
+        hasAutoHeight: false,
+        links: []
+      };
+    },
+    methods: {
+      findActiveLink() {
+        this.links.forEach((link, index) => {
+          if (link.isActive()) {
+            this.activeLinkIndex = index;
+          }
+        });
+      },
+      addLink(link) {
+        const index = this.$slots.links.indexOf(link.$vnode);
+        this.links.splice(index, 0, link);
+      },
+      removeLink(link) {
+        const index = this.links.indexOf(link);
+        if (index > -1) {
+          this.links.splice(index, 1);
+        }
+      }
+    },
+    mounted() {
+      this.$watch("$route", this.findActiveLink, {
+        immediate: true
+      });
     }
-  },
-  mounted() {
-    this.$watch("$route", this.findActiveLink, {
-      immediate: true
-    });
-  }
-};
+  };
 </script>
-<style>
-</style>
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index 80dffbb..a74575c 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/src/layout/dashboard/TopNavbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-absolute"
+  <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent"
        :class="{'bg-white': showMenu}">
     <div class="container-fluid">
       <div class="navbar-wrapper">