diff --git a/src/views/layout/Levelbar.vue b/src/components/Breadcrumb/index.vue
similarity index 87%
rename from src/views/layout/Levelbar.vue
rename to src/components/Breadcrumb/index.vue
index e34d56c..2264ac9 100644
--- a/src/views/layout/Levelbar.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,9 +1,11 @@
 <template>
-  <el-breadcrumb class="app-levelbar" separator="/">
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <transition-group name="breadcrumb">
     <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
       <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
     </el-breadcrumb-item>
+     </transition-group>
   </el-breadcrumb>
 </template>
 
@@ -36,7 +38,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.app-levelbar.el-breadcrumb {
+.app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index a3d7a87..567cc58 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -12,7 +12,7 @@
 
 
 <script>
-import { Navbar, Sidebar, AppMain } from '@/views/layout'
+import { Navbar, Sidebar, AppMain } from '@/views/layout/components'
 
 export default {
   name: 'layout',
diff --git a/src/views/layout/AppMain.vue b/src/views/layout/components/AppMain.vue
similarity index 100%
rename from src/views/layout/AppMain.vue
rename to src/views/layout/components/AppMain.vue
diff --git a/src/views/layout/Navbar.vue b/src/views/layout/components/Navbar.vue
similarity index 91%
rename from src/views/layout/Navbar.vue
rename to src/views/layout/components/Navbar.vue
index 4541d43..2843a15 100644
--- a/src/views/layout/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
     <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
-    <levelbar></levelbar>
+    <breadcrumb></breadcrumb>
     <el-dropdown class="avatar-container" trigger="click">
       <div class="avatar-wrapper">
         <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
@@ -13,7 +13,9 @@
             Home
           </el-dropdown-item>
         </router-link>
-        <el-dropdown-item divided><span @click="logout" style="display:block;">LogOut</span></el-dropdown-item>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-menu>
@@ -21,12 +23,12 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Levelbar from './Levelbar'
+import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 
 export default {
   components: {
-    Levelbar,
+    Breadcrumb,
     Hamburger
   },
   computed: {
diff --git a/src/views/layout/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
similarity index 100%
rename from src/views/layout/SidebarItem.vue
rename to src/views/layout/components/Sidebar/SidebarItem.vue
diff --git a/src/views/layout/Sidebar.vue b/src/views/layout/components/Sidebar/index.vue
similarity index 100%
rename from src/views/layout/Sidebar.vue
rename to src/views/layout/components/Sidebar/index.vue
diff --git a/src/views/layout/index.js b/src/views/layout/components/index.js
similarity index 72%
rename from src/views/layout/index.js
rename to src/views/layout/components/index.js
index 91ed46c..97ee3cd 100644
--- a/src/views/layout/index.js
+++ b/src/views/layout/components/index.js
@@ -1,7 +1,3 @@
 export { default as Navbar } from './Navbar'
-
 export { default as Sidebar } from './Sidebar'
-
-export { default as Levelbar } from './Levelbar'
-
 export { default as AppMain } from './AppMain'