diff --git a/src/Controllers/BadasoMenuController.php b/src/Controllers/BadasoMenuController.php
index e606f43c8..cd2d55637 100644
--- a/src/Controllers/BadasoMenuController.php
+++ b/src/Controllers/BadasoMenuController.php
@@ -174,10 +174,15 @@ public function addMenuItem(Request $request)
                 'target' => ['required'],
             ]);
 
+            $url = $request->get('url');
+            if (filter_var($url, FILTER_VALIDATE_URL) === false) {
+                $url = substr($request->get('url'), 0, 1) != '/' ? '/'.$request->get('url') : $request->get('url');
+            }
+
             $new_menu_item = new MenuItem();
             $new_menu_item->menu_id = $request->get('menu_id');
             $new_menu_item->title = $request->get('title');
-            $new_menu_item->url = substr($request->get('url'), 0, 1) != '/' ? '/'.$request->get('url') : $request->get('url');
+            $new_menu_item->url = $url;
             $new_menu_item->target = $request->get('target') ? $request->get('target') : '_self';
             $new_menu_item->icon_class = $request->get('icon_class');
             $new_menu_item->color = $request->get('color');
@@ -233,10 +238,15 @@ public function editMenuItem(Request $request)
                 'target' => ['required'],
             ]);
 
+            $url = $request->get('url');
+            if (filter_var($url, FILTER_VALIDATE_URL) === false) {
+                $url = substr($request->get('url'), 0, 1) != '/' ? '/'.$request->get('url') : $request->get('url');
+            }
+
             $menu_item = MenuItem::find($request->menu_item_id);
             $menu_item->menu_id = $request->get('menu_id');
             $menu_item->title = $request->get('title');
-            $menu_item->url = substr($request->get('url'), 0, 1) != '/' ? '/'.$request->get('url') : $request->get('url');
+            $menu_item->url = $url;
             $menu_item->target = $request->get('target') ? $request->get('target') : '_self';
             $menu_item->icon_class = $request->get('icon_class');
             $menu_item->color = $request->get('color');
diff --git a/src/Mail/ForgotPassword.php b/src/Mail/ForgotPassword.php
index b218616aa..251773961 100644
--- a/src/Mail/ForgotPassword.php
+++ b/src/Mail/ForgotPassword.php
@@ -33,6 +33,6 @@ public function __construct($user, $token)
     public function build()
     {
         return $this
-            ->markdown('Badaso::mail.forgot-password');
+            ->markdown('badaso::mail.forgot-password');
     }
 }
diff --git a/src/Mail/SendUserVerification.php b/src/Mail/SendUserVerification.php
index 1825a2d39..f35e3cb9b 100644
--- a/src/Mail/SendUserVerification.php
+++ b/src/Mail/SendUserVerification.php
@@ -34,6 +34,6 @@ public function build()
     {
         return $this
             ->subject('Email Verification | Badaso')
-            ->markdown('Badaso::mail.email-verification');
+            ->markdown('badaso::mail.email-verification');
     }
 }
diff --git a/src/Seeder/Configurations/SiteManagementSeeder.php b/src/Seeder/Configurations/SiteManagementSeeder.php
index adf8caf91..a3f949bab 100644
--- a/src/Seeder/Configurations/SiteManagementSeeder.php
+++ b/src/Seeder/Configurations/SiteManagementSeeder.php
@@ -55,7 +55,7 @@ public function run()
                 3 => [
                     'key' => 'adminPanelHeaderColor',
                     'display_name' => 'Admin Panel Header Color',
-                    'value' => '#000',
+                    'value' => '#fff',
                     'details' => '',
                     'type' => 'color_picker',
                     'order' => 4,
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index 5cdc38ecd..2da63f76d 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -115,6 +115,7 @@ Vue.prototype.$constants = {
 };
 Vue.prototype.$loadingConfig = {
   type: "sound",
+  color: "#06bbd3"
 };
 
 let baseUrl = process.env.MIX_ADMIN_PANEL_ROUTE_PREFIX
diff --git a/src/resources/js/assets/scss/layout/_vs-modified.scss b/src/resources/js/assets/scss/layout/_vs-modified.scss
index 3812b7aa0..5d04e8272 100644
--- a/src/resources/js/assets/scss/layout/_vs-modified.scss
+++ b/src/resources/js/assets/scss/layout/_vs-modified.scss
@@ -234,4 +234,14 @@ th .vs-table-text {
 .vs-checkbox-primary input:checked+.vs-checkbox {
   border: 2px solid $primary!important;
   background: $primary;
+}
+
+.vs-progress-primary {
+  .vs-progress--foreground {
+    background: $primary; 
+  }
+
+  .vs-progress--indeterminate {
+    background: $primary; 
+  }
 }
\ No newline at end of file
diff --git a/src/resources/js/components/BadasoColorPicker.vue b/src/resources/js/components/BadasoColorPicker.vue
index 12c4eba8f..f69fe02c1 100644
--- a/src/resources/js/components/BadasoColorPicker.vue
+++ b/src/resources/js/components/BadasoColorPicker.vue
@@ -151,7 +151,7 @@ export default {
         this.updateColors(val);
         this.$emit("input", val);
       }
-    },
+    }
   },
   mounted() {
     this.setColor(this.color || "#000000");
diff --git a/src/resources/js/components/BadasoSidebarItem.vue b/src/resources/js/components/BadasoSidebarItem.vue
new file mode 100644
index 000000000..38f8bf3b7
--- /dev/null
+++ b/src/resources/js/components/BadasoSidebarItem.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    :class="{'vs-sidebar-item-active':getActive}"
+    class="vs-sidebar--item"
+    @click="setIndexActive">
+    <router-link
+      v-if="to && target === '_self'"
+      :to="to">
+      <vs-icon
+        :icon-pack="iconPack"
+        :icon="icon">
+      </vs-icon>
+      <slot></slot>
+    </router-link>
+    <a
+      v-else-if="to && target != '_self'"
+      :target="target"
+      :href="to">
+      <vs-icon
+        :icon-pack="iconPack"
+        :icon="icon">
+      </vs-icon>
+      <slot></slot>
+    </a>
+    <a
+      v-else
+      :target="target"
+      :href="href">
+      <vs-icon
+        :icon-pack="iconPack"
+        :icon="icon">
+      </vs-icon>
+      <slot></slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  name:'BadasoSidebarItem',
+  props:{
+    icon: {
+      default: null,
+      type: String
+    },
+    iconPack: {
+      default: 'material-icons',
+      type: String
+    },
+    href: {
+      default:'#',
+      type: String
+    },
+    target: {
+      default:'_self',
+      type: String
+    },
+    to: {
+      default:null,
+      type: [String, Object]
+    },
+    index: {
+      default: null,
+      type: [String, Number]
+    },
+  },
+  computed:{
+    getActive () {
+      return this.$parent.getActive() == this.index
+    }
+  },
+  methods:{
+    setIndexActive () {
+      this.$parent.setIndexActive(this.index)
+      this.$emit('click')
+    }
+  }
+}
+</script>
diff --git a/src/resources/js/layout/admin/header/Navbar.vue b/src/resources/js/layout/admin/header/Navbar.vue
index 6da0e13b7..7b9e7240b 100644
--- a/src/resources/js/layout/admin/header/Navbar.vue
+++ b/src/resources/js/layout/admin/header/Navbar.vue
@@ -45,15 +45,16 @@
           left
           class="cursor-pointer ml-1 mr-md-3"
         >
-          <a class="text-white-dark" href="#"
+          <a class="text-white-dark" href="#" :style="{ color: topbarFontColor }"
             ><vs-icon icon="notifications"></vs-icon
           ></a>
           <vs-dropdown-menu class="topbar-dd">
             <div
-              class="d-flex align-items-center p-3 bg-danger text-white mb-2 preview"
+              class="d-flex align-items-center p-3 mb-2 preview"
+              :style="{ backgroundColor: topbarFontColor, color: topbarColor }"
             >
               <div class="ml-2">
-                <h4 class="mb-0 text-white">0 New</h4>
+                <h4 class="mb-0">0 New</h4>
                 <p class="mb-0">Notification</p>
               </div>
             </div>
diff --git a/src/resources/js/layout/admin/sidebar/SideBar.vue b/src/resources/js/layout/admin/sidebar/SideBar.vue
index 5223c640d..94efe536a 100644
--- a/src/resources/js/layout/admin/sidebar/SideBar.vue
+++ b/src/resources/js/layout/admin/sidebar/SideBar.vue
@@ -27,7 +27,7 @@
           :subTitle="user.email"
           icon="person_pin"
         >
-          <vs-sidebar-item
+          <badaso-sidebar-item
             v-if="user.id"
             icon="person_outline"
             :to="{
@@ -35,10 +35,10 @@
             }"
           >
             Profile
-          </vs-sidebar-item>
-          <vs-sidebar-item icon="logout" @click="logout()">
+          </badaso-sidebar-item>
+          <badaso-sidebar-item icon="logout" @click="logout()">
             Logout
-          </vs-sidebar-item>
+          </badaso-sidebar-item>
         </badaso-sidebar-group>
         <vs-select
           v-model="selectedLang"
@@ -54,9 +54,9 @@
           />
         </vs-select>
       </div>
-      <vs-sidebar-item icon="dashboard" :to="`/${prefix}/home`">
+      <badaso-sidebar-item icon="dashboard" :to="`/${prefix}/home`">
         <span class="hide-in-minisidebar">{{ $t("sidebar.dashboard") }}</span>
-      </vs-sidebar-item>
+      </badaso-sidebar-item>
       <badaso-sidebar-group
         :title="mainMenu.menu.displayName"
         open
@@ -71,49 +71,53 @@
             :icon="menu.iconClass"
           >
             <template v-for="(childMenu, indexChildMenu) in menu.children">
-              <vs-sidebar-item
+              <badaso-sidebar-item
                 v-if="$helper.isValidHttpUrl(childMenu.url)"
                 :icon="childMenu.iconClass ? childMenu.iconClass : 'remove'"
-                @click="open(childMenu.url)"
+                :href="menu.url"
                 :key="`menu-${index}-${indexChildMenu}`"
                 :index="`${index}.${indexChildMenu}`"
                 :style="`color: ${childMenu.color}`"
+                :target="menu.target"
               >
                 <span class="hide-in-minisidebar">{{ childMenu.title }}</span>
-              </vs-sidebar-item>
-              <vs-sidebar-item
+              </badaso-sidebar-item>
+              <badaso-sidebar-item
                 v-else
                 :icon="childMenu.iconClass ? childMenu.iconClass : 'remove'"
                 :to="childMenu.url"
                 :key="`menu-${index}-${indexChildMenu}`"
                 :index="`${index}.${indexChildMenu}`"
                 :style="`color: ${childMenu.color}`"
+                :target="menu.target"
               >
                 <span class="hide-in-minisidebar">{{ childMenu.title }}</span>
-              </vs-sidebar-item>
+              </badaso-sidebar-item>
             </template>
           </badaso-sidebar-group>
           <div v-else>
-            <vs-sidebar-item
+            <badaso-sidebar-item
               v-if="$helper.isValidHttpUrl(menu.url)"
               :icon="menu.iconClass ? menu.iconClass : 'remove'"
-              @click="open(menu.url)"
+              :href="menu.url"
               :key="`menu-${index}`"
               :index="index"
               :style="`color: ${menu.color}`"
+              :target="menu.target"
             >
               <span class="hide-in-minisidebar">{{ menu.title }}</span>
-            </vs-sidebar-item>
-            <vs-sidebar-item
+            </badaso-sidebar-item>
+            <badaso-sidebar-item
               v-else
               :icon="menu.iconClass ? menu.iconClass : 'remove'"
               :to="menu.url"
               :key="`menu-${index}`"
               :index="index"
               :style="`color: ${menu.color}`"
+              :target="menu.target"
             >
               <span class="hide-in-minisidebar">{{ menu.title }}</span>
-            </vs-sidebar-item>
+            </badaso-sidebar-item>
           </div>
         </template>
       </badaso-sidebar-group>
@@ -134,49 +138,53 @@
             :icon="menu.iconClass"
           >
             <template v-for="(childMenu, indexChildMenu) in menu.children">
-              <vs-sidebar-item
+              <badaso-sidebar-item
                 v-if="$helper.isValidHttpUrl(childMenu.url)"
                 :icon="childMenu.iconClass ? childMenu.iconClass : 'remove'"
-                @click="open(childMenu.url)"
+                :href="menu.url"
                 :key="`menu-${index}-${indexChildMenu}`"
                 :index="`${index}.${indexChildMenu}`"
                 :style="`color: ${childMenu.color}`"
+                :target="menu.target"
               >
                 <span class="hide-in-minisidebar">{{ childMenu.title }}</span>
-              </vs-sidebar-item>
-              <vs-sidebar-item
+              </badaso-sidebar-item>
+              <badaso-sidebar-item
                 v-else
                 :icon="childMenu.iconClass ? childMenu.iconClass : 'remove'"
                 :to="childMenu.url"
                 :key="`menu-${index}-${indexChildMenu}`"
                 :index="`${index}.${indexChildMenu}`"
                 :style="`color: ${childMenu.color}`"
+                :target="menu.target"
               >
                 <span class="hide-in-minisidebar">{{ childMenu.title }}</span>
-              </vs-sidebar-item>
+              </badaso-sidebar-item>
             </template>
           </badaso-sidebar-group>
           <div v-else>
-            <vs-sidebar-item
+            <badaso-sidebar-item
               v-if="$helper.isValidHttpUrl(menu.url)"
               :icon="menu.iconClass ? menu.iconClass : 'remove'"
               :key="`menu-${index}`"
               :index="index"
               :style="`color: ${menu.color}`"
-              @click="open(menu.url)"
+              :href="menu.url"
+              :target="menu.target"
             >
               <span class="hide-in-minisidebar">{{ menu.title }}</span>
-            </vs-sidebar-item>
-            <vs-sidebar-item
+            </badaso-sidebar-item>
+            <badaso-sidebar-item
               v-else
               :icon="menu.iconClass ? menu.iconClass : 'remove'"
               :key="`menu-${index}`"
               :index="index"
               :style="`color: ${menu.color}`"
               :to="menu.url"
+              :target="menu.target"
             >
               <span class="hide-in-minisidebar">{{ menu.title }}</span>
-            </vs-sidebar-item>
+            </badaso-sidebar-item>
           </div>
         </template>
       </badaso-sidebar-group>
diff --git a/src/resources/js/pages/menu-management/builder.vue b/src/resources/js/pages/menu-management/builder.vue
index 36f07a1c0..e11226659 100644
--- a/src/resources/js/pages/menu-management/builder.vue
+++ b/src/resources/js/pages/menu-management/builder.vue
@@ -63,73 +63,6 @@
         </vs-col>
       </vs-row>
     </vs-popup>
-    <vs-popup
-      class="holamundo"
-      :title="$t('menu.builder.popup.edit.title')"
-      :active.sync="editMenuItemPopUp"
-    >
-      <vs-row>
-        <badaso-text
-          v-model="menuItem.title"
-          size="12"
-          :label="$t('menu.builder.popup.edit.field.title')"
-          placeholder=""
-          :alert="errors.tile"
-        ></badaso-text>
-        <badaso-text
-          v-model="menuItem.url"
-          size="12"
-          :label="$t('menu.builder.popup.edit.field.url')"
-          placeholder=""
-          :alert="errors.url"
-        ></badaso-text>
-        <badaso-select
-          v-model="menuItem.target"
-          size="12"
-          :label="$t('menu.builder.popup.edit.field.target.title')"
-          :items="menuItemTargets"
-          placeholder=""
-          :alert="errors.target"
-        ></badaso-select>
-        <badaso-text
-          v-model="menuItem.iconClass"
-          size="12"
-          :label="$t('menu.builder.popup.edit.field.icon.title')"
-          placeholder=""
-          :additionalInfo="$t('menu.builder.popup.edit.field.icon.description')"
-          :alert="errors.icon"
-        ></badaso-text>
-        <badaso-color-picker
-          size="12"
-          v-model="menuItem.color"
-          :alert="errors.color"
-        ></badaso-color-picker>
-      </vs-row>
-      <vs-row vs-type="flex" vs-justify="flex-end">
-        <vs-col vs-lg="12" vs-type="flex" vs-align="flex-end"> </vs-col>
-      </vs-row>
-      <vs-row vs-type="flex" vs-justify="space-between">
-        <vs-col vs-lg="2" vs-type="flex" vs-align="flex-end">
-          <vs-button
-            class="btn-block"
-            color="danger"
-            @click="closeModal()"
-            type="relief"
-            >{{ $t("menu.builder.popup.edit.button.cancel") }}</vs-button
-          >
-        </vs-col>
-        <vs-col vs-lg="2" vs-type="flex" vs-align="flex-end">
-          <vs-button
-            class="btn-block"
-            v-if="menuItem.id"
-            color="primary"
-            @click="updateMenuItem()"
-            type="relief"
-            >{{ $t("menu.builder.popup.edit.button.edit") }}</vs-button
-          >
-        </vs-col>
-      </vs-row>
-    </vs-popup>
     <badaso-breadcrumb-row>
       <template slot="action" v-if="$helper.isAllowed('add_menu_items')">
         <vs-button color="primary" type="relief" @click="addMenuItem()"
@@ -197,6 +130,71 @@
                         ><vs-icon icon="delete"></vs-icon
                       ></vs-button>
                     </div>
+                    <vs-popup
+                      class="holamundo"
+                      :title="$t('menu.builder.popup.edit.title')"
+                      :active.sync="data.editItem"
+                    >
+                      <vs-row>
+                        <badaso-text
+                          v-model="data.title"
+                          size="12"
+                          :label="$t('menu.builder.popup.edit.field.title')"
+                          placeholder=""
+                          :alert="errors.tile"
+                        ></badaso-text>
+                        <badaso-text
+                          v-model="data.url"
+                          size="12"
+                          :label="$t('menu.builder.popup.edit.field.url')"
+                          placeholder=""
+                          :alert="errors.url"
+                        ></badaso-text>
+                        
+                        <badaso-select
+                          v-model="data.target"
+                          size="12"
+                          :label="$t('menu.builder.popup.edit.field.target.title')"
+                          :items="menuItemTargets"
+                          placeholder=""
+                          :alert="errors.target"
+                        ></badaso-select>
+                        
+                        <badaso-text
+                          v-model="data.iconClass"
+                          size="12"
+                          :label="$t('menu.builder.popup.edit.field.icon.title')"
+                          placeholder=""
+                          :additionalInfo="$t('menu.builder.popup.edit.field.icon.description')"
+                          :alert="errors.icon"
+                        ></badaso-text>
+                        <badaso-color-picker
+                          size="12"
+                          v-model="data.color"
+                          :alert="errors.color"
+                        ></badaso-color-picker>
+                      </vs-row>
+                      <vs-row vs-type="flex" vs-justify="space-between">
+                          <vs-col vs-lg="2" vs-type="flex" vs-align="flex-end">
+                            <vs-button
+                              class="btn-block"
+                              color="danger"
+                              @click="closeModal()"
+                              type="relief"
+                              >{{ $t("menu.builder.popup.edit.button.cancel") }}</vs-button
+                            >
+                          </vs-col>
+                          <vs-col vs-lg="2" vs-type="flex" vs-align="flex-end">
+                            <vs-button
+                              class="btn-block"
+                              color="primary"
+                              @click="updateMenuItem(data)"
+                              type="relief"
+                              >{{ $t("menu.builder.popup.edit.button.edit") }}</vs-button
+                            >
+                          </vs-col>
+                        </vs-row>
+                    </vs-popup>
                   </template>
                 </div>
               </Tree>
@@ -295,7 +293,14 @@ export default {
           menuId: this.$route.params.id,
         })
         .then((response) => {
-          this.menuItems = response.data.menuItems;
+          this.menuItems = response.data.menuItems.map((item) => {
+            let _item = item
+            _item.editItem = false
+            _item.title = item.title ? item.title : ''
+            _item.iconClass = item.iconClass ? item.iconClass : ''
+            _item.color = item.color ? item.color : '#000000'
+            return _item;
+          });
           this.savedItems = [...response.data.menuItems];
           this.flatSavedItems = this.flattenItems([...response.data.menuItems]);
           this.$vs.loading.close();
@@ -411,11 +416,7 @@ export default {
         });
     },
     editMenuItem(menuItem) {
-      this.menuItem = menuItem;
-      this.menuItem.target = menuItem.target
-        ? menuItem.target
-        : this.menuItemTargets[0].value;
-      this.editMenuItemPopUp = true;
+      menuItem.editItem = true
     },
     addMenuItem(menuItem) {
       this.menuItem = {
@@ -475,18 +476,18 @@ export default {
           this.$vs.loading.close();
         });
     },
-    updateMenuItem() {
+    updateMenuItem(data) {
       this.errors = {};
       this.$vs.loading(this.$loadingConfig);
       this.$api.menu
         .editItem({
           menuId: this.$route.params.id,
-          menuItemId: this.menuItem.id,
-          title: this.menuItem.title,
-          url: this.menuItem.url,
-          target: this.menuItem.target,
-          iconClass: this.menuItem.iconClass,
-          color: this.menuItem.color,
+          menuItemId: data.id,
+          title: data.title,
+          url: data.url,
+          target: data.target,
+          iconClass: data.iconClass,
+          color: data.color,
         })
         .then((response) => {
           this.editMenuItemPopUp = false;