diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 0000000..2af0362
Binary files /dev/null and b/src/assets/logo1.png differ
diff --git a/src/assets/navbar-bkg.png b/src/assets/navbar-bkg.png
new file mode 100644
index 0000000..ce25313
Binary files /dev/null and b/src/assets/navbar-bkg.png differ
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index ab6ee89..bf274d4 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -19,16 +19,28 @@ export default {
 }
 </script>
 
+<style>
+.app-main-scroll {
+  width: calc(100% - 30px * 2);
+  height: calc(100vh - var(--navbar-height) - 20px - 20px);
+  margin-top: calc(var(--navbar-height) + 20px);
+  margin-left: 30px;
+}
+</style>
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
+  border-radius: 6px;
+  max-height: calc(100vh - var(--navbar-height) - 20px - 20px);
+  width: calc(100% - 30px * 2);
+  z-index: 10;
+  margin: calc(var(--navbar-height) + 20px) auto 0;
   position: relative;
-  overflow: hidden;
+  overflow: scroll;
+  padding: 20px;
 }
 .fixed-header+.app-main {
-  padding: 50px 20px 20px 20px;
+
 }
 </style>
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 93b3ccd..0d74073 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,140 +1,201 @@
-<template>
-  <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb class="breadcrumb-container" />
-
-    <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
-        <div class="avatar-wrapper">
-          <img src="../../assets/face.jpg" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              系统首页
-            </el-dropdown-item>
-          </router-link>
-          <router-link to="/info/password">
-            <el-dropdown-item>
-              个人信息
-            </el-dropdown-item>
-          </router-link>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-  import {
-    mapGetters
-  } from 'vuex'
-  import Breadcrumb from '@/components/Breadcrumb'
-  import Hamburger from '@/components/Hamburger'
-
-  export default {
-    components: {
-      Breadcrumb,
-      Hamburger
-    },
-    computed: {
-      ...mapGetters([
-        'sidebar',
-        'avatar'
-      ])
-    },
-    methods: {
-      toggleSideBar() {
-        this.$store.dispatch('app/toggleSideBar')
-      },
-      async logout() {
-        await this.$store.dispatch('user/logout')
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .navbar {
-    height: 50px;
-    overflow: hidden;
-    position: relative;
-    background: #fff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-
-    .hamburger-container {
-      line-height: 46px;
-      height: 100%;
-      float: left;
-      cursor: pointer;
-      transition: background .3s;
-      -webkit-tap-highlight-color: transparent;
-
-      &:hover {
-        background: rgba(0, 0, 0, .025)
-      }
-    }
-
-    .breadcrumb-container {
-      float: left;
-    }
-
-    .right-menu {
-      float: right;
-      height: 100%;
-      line-height: 50px;
-
-      &:focus {
-        outline: none;
-      }
-
-      .right-menu-item {
-        display: inline-block;
-        padding: 0 8px;
-        height: 100%;
-        font-size: 18px;
-        color: #5a5e66;
-        vertical-align: text-bottom;
-
-        &.hover-effect {
-          cursor: pointer;
-          transition: background .3s;
-
-          &:hover {
-            background: rgba(0, 0, 0, .025)
-          }
-        }
-      }
-
-      .avatar-container {
-        margin-right: 30px;
-
-        .avatar-wrapper {
-          margin-top: 5px;
-          position: relative;
-
-          .user-avatar {
-            cursor: pointer;
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-          }
-
-          .el-icon-caret-bottom {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
+<template>
+  <div class="navbar">
+    <img class="navbar-bkg" :src="require('@/assets/navbar-bkg.png')" alt="">
+    <div class="logo-mini">
+      <img :src="require('@/assets/logo-mini.png')" alt="">
+    </div>
+    <div class="logo">
+      <img :src="require('@/assets/logo1.png')" alt="">
+    </div>
+<!--    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
+
+<!--    <breadcrumb class="breadcrumb-container" />-->
+
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <el-badge is-dot class="notice">
+            <i class="el-icon-bell"></i>
+          </el-badge>
+          <img src="../../assets/face.jpg" class="user-avatar">
+          <span>{{ $store.state.user.name }}</span>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              系统首页
+            </el-dropdown-item>
+          </router-link>
+          <router-link to="/info/password">
+            <el-dropdown-item>
+              个人信息
+            </el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">退出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import Hamburger from '@/components/Hamburger'
+
+  export default {
+    components: {
+      Breadcrumb,
+      Hamburger
+    },
+    computed: {
+      ...mapGetters([
+        'sidebar',
+        'avatar'
+      ])
+    },
+    methods: {
+      toggleSideBar() {
+        this.$store.dispatch('app/toggleSideBar')
+      },
+      async logout() {
+        await this.$store.dispatch('user/logout')
+        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .navbar {
+    height: var(--navbar-height);
+    position: relative;
+    //background: #fff;
+    padding: 0 20px;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+    border-bottom: 1px solid #627bd9;
+    box-sizing: border-box;
+
+    &-bkg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: auto;
+      z-index: -1;
+      object-fit: cover;
+    }
+
+    .logo-mini {
+      height: 100%;
+      display: flex;
+      float: left;
+      align-items: center;
+
+      & > img {
+        height: 65%;
+      }
+    }
+    .logo {
+      height: 100%;
+      display: flex;
+      float: left;
+      align-items: center;
+      margin-left: 23px;
+
+      & > img {
+        height: 32%;
+      }
+    }
+    .hamburger-container {
+      line-height: 46px;
+      height: 100%;
+      float: left;
+      cursor: pointer;
+      transition: background .3s;
+      -webkit-tap-highlight-color: transparent;
+
+      &:hover {
+        background: rgba(0, 0, 0, .025)
+      }
+    }
+
+    .breadcrumb-container {
+      float: left;
+    }
+
+    .right-menu {
+      float: right;
+      height: 100%;
+      line-height: 50px;
+
+      &:focus {
+        outline: none;
+      }
+
+      .right-menu-item {
+        display: inline-block;
+        padding: 0 8px;
+        height: 100%;
+        font-size: 18px;
+        color: #5a5e66;
+        vertical-align: text-bottom;
+
+        &.hover-effect {
+          cursor: pointer;
+          transition: background .3s;
+
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
+        }
+      }
+
+      .avatar-container {
+        height: 100%;
+        color: #fff;
+
+        .avatar-wrapper {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          position: relative;
+
+          .notice {
+            display: flex;
+            align-items: center;
+            height: 43%;
+            font-size: 20px;
+            margin-right: 14px;
+          }
+          .user-avatar {
+            cursor: pointer;
+            height: 60%;
+            border-radius: 100%;
+          }
+
+          span {
+            font-size: 18px;
+            letter-spacing: 1px;
+            font-weight: 600;
+            padding: 0 12px;
+          }
+
+          .el-icon-caret-bottom {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  @media screen and (min-width: 1680px) {
+    .navbar {
+      padding: 0 40px;
+    }
+  }
 </style>
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index 9fed7c6..fcbf376 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -3,6 +3,10 @@ export default {
   name: 'MenuItem',
   functional: true,
   props: {
+    pid: {
+      type: Number,
+      default: 0
+    },
     icon: {
       type: String,
       default: ''
@@ -13,32 +17,36 @@ export default {
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, title, pid } = context.props
     const vnodes = []
-
-    if (icon) {
-      if (icon.includes('el-icon')) {
-        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
-      }
-      else if(icon.includes("viewicon")){
+    //解决el-menu-item 中行内样式padding-left为动态计算问题
+    vnodes.push(<span style="padding-left: 16px;"> </span>)
+    if (pid === 0) {
+      if (icon) {
+        if (icon.includes('el-icon')) {
+          vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+        }
+        else if(icon.includes("viewicon")){
           let _icon=icon.split("/")[1];
           vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
-      }
-      else if(icon.includes("iconfont")){
+        }
+        else if(icon.includes("iconfont")){
           let _icon=icon.split("/")[1];
           vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} />)
-      }
-      else {
-        vnodes.push(<svg-icon icon-class={icon}/>)
-      }
-    }else {
+        }
+        else {
+          vnodes.push(<svg-icon icon-class={icon}/>)
+        }
+      }else {
         var _icon="el-icon-menu";
         vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
       }
+    }
 
     if (title) {
       vnodes.push(<span slot='title'>{(title)}</span>)
     }
+
     return vnodes
   }
 }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index e580e5e..276e788 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -4,14 +4,14 @@
       v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item :pid="(item.meta && item.meta.pid) ? item.meta.pid : 0" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item v-if="item.meta" :pid="(item.meta && item.meta.pid) ? item.meta.pid : 0" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
         :base-path="resolvePath(child.path)" class="nest-menu" />
@@ -94,11 +94,9 @@
         }
         return path.resolve(this.basePath, routePath)
       }
-    }
+    },
   }
 </script>
-<style>
-  .el-submenu__title i {
-    color: #fff !important;
-  }
+<style scoped>
+
 </style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a2..9dfa280 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+  <div>
+    <Icon class="collapse" type="md-menu" @click.native="toggleSideBar"/>
+    <!--    <logo v-if="showLogo" :collapse="isCollapse" />-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
+
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
@@ -49,6 +51,26 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
   }
 }
 </script>
+
+<style scoped lang="scss">
+  .collapse {
+    width: 22px;
+    font-size: 22px;
+    color: #2052e3;
+    position: absolute;
+    right: 14px;
+    top: 20px;
+  }
+  .hideSidebar .collapse {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index db22a7b..b6ffffb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -79,12 +79,12 @@ export default {
     top: 0;
     right: 0;
     z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
+    width: 100%;
     transition: width 0.28s;
   }
 
   .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
+    width: 100%;
   }
 
   .mobile .fixed-header {
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index ff17b74..b0ea81f 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -132,7 +132,7 @@ export function generaMenu(routes, data) {
             roles: ['admin'],
             params,
             auths:item.has_auth_node_tags,
-
+            pid: item.pid,
             icon: item.icon
           }
         }, ]
@@ -153,6 +153,7 @@ export function generaMenu(routes, data) {
         meta: {
           title: item.name,
           id: item.id,
+          pid: item.pid,
           roles: ['admin'],
           auths:item.has_auth_node_tags,
           params,
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 1a56a91..207bf1b 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -91,5 +91,5 @@
 }
 
 .el-menu-item,.el-submenu__title,.el-table,.el-descriptions,.v-table .el-table__header th,.el-form-item__label,.el-input {
-  font-size: 15px!important;
+  font-size: 16px!important;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0439e67..9500738 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -181,8 +181,8 @@ top: 41px !important;
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -191,7 +191,7 @@ top: 41px !important;
 }
 
 .app-main{
-  background: #EFF2F9;
+  background: #fff;
 }
 
 #nprogress .bar{
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 42c6114..773f1a5 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,8 +1,8 @@
 #app {
-
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
+    overflow: hidden;
     margin-left: $sideBarWidth;
     position: relative;
   }
@@ -11,20 +11,23 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     //background-color: $menuBg;
-    background: linear-gradient(180deg, #0284cd, #0077CC);
+    background: #fff;
     box-shadow: 1px 1px 15px 0px rgba(17, 76, 157, 0.2);
     height: 100%;
+    border-radius: 0 6px 0 0;
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: calc(var(--navbar-height) + 20px);
     bottom: 0;
     left: 0;
     z-index: 1001;
+    padding-top: 50px;
     overflow: hidden;
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -36,7 +39,7 @@
     }
 
     .el-scrollbar {
-        height: calc(100% - 100px);
+      height: calc(100% - 100px);
     }
 
     &.has-logo {
@@ -78,22 +81,19 @@
         color: $subMenuActiveText !important;
       }
     }
-    .el-submenu .is-active{
+    .el-submenu .is-active {
       // background-color: $menuHover !important;
     }
 
-
-
-    .is-active{
-       //background-color: $menuActiveBg !important;
-       //border-right: 5px solid $subMenuActiveText !important;
+    .is-active {
+      //background-color: $menuActiveBg !important;
+      //border-right: 5px solid $subMenuActiveText !important;
+    }
+    .is-active > .el-submenu__title {
+      color: $subMenuActiveText !important;
     }
-        .is-active>.el-submenu__title {
-          color: $subMenuActiveText !important;
-        }
-
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -102,15 +102,14 @@
         background-color: $subMenuHover !important;
         color: $subMenuActiveText !important;
       }
-      &.is-active{
-         background-color: $submenuActiveBg !important;
-         border-right: 5px solid $subMenuActiveText !important;
-         color: $subMenuActiveText !important;
+      &.is-active {
+        background-color: $submenuActiveBg !important;
+        border-right: 5px solid $subMenuActiveText !important;
+        color: $subMenuActiveText !important;
       }
     }
   }
 
-
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
@@ -140,7 +139,7 @@
     .el-submenu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      & > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -159,23 +158,50 @@
 
     .el-menu--collapse {
       .el-submenu {
-        &>.el-submenu__title {
-          &>span {
+        & > .el-submenu__title {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
           }
+          .sub-el-icon {
+            margin-left: 0!important;
+          }
         }
       }
     }
+
+    .el-menu-item span,el-submenu__title span {
+      display: none;
+    }
+    .el-menu {
+      .router-link-active::before {
+        width: calc(100% - 4px);
+      }
+    }
   }
 
   .el-menu--collapse .el-menu .el-submenu {
     min-width: $sideBarWidth !important;
   }
 
+  .el-menu .router-link-active {
+    position: relative;
+    &::before {
+      content: "";
+      background: #e9edfb;
+      height: 84%;
+      width: calc(100% - 12px);
+      border-radius: 22px 0 0 22px;
+
+      position: absolute;
+      right: 0;
+      top: calc((100% - 84%) / 2);
+    }
+  }
+
   // mobile responsive
   .mobile {
     .main-container {
@@ -183,7 +209,7 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: $sideBarWidth !important;
     }
 
@@ -197,7 +223,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -207,7 +232,7 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
@@ -217,7 +242,7 @@
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -226,10 +251,11 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
-    background: #0077CC !important;
+    color: #000;
+    background: #fff !important;
 
     &::-webkit-scrollbar-track-piece {
       background: #d3dce6;
@@ -244,6 +270,4 @@
       border-radius: 20px;
     }
   }
-
-
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4df2569..90e5568 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,17 +1,28 @@
 // sidebar
-$menuText:#ffffff;
-$menuActiveText:#ffffff;
-$subMenuActiveText:#ffffff; //https://github.com/ElemeFE/element/issues/12951
+$menuText:#000;
+$menuActiveText:#2052e3;
+$subMenuActiveText:#2052e3; //https://github.com/ElemeFE/element/issues/12951
 
 $menuBg:rgb(255, 255, 255,0);//#304156
 $menuHover:rgba(242, 242, 242, .4);
-$menuActiveBg:rgba(242, 242, 242, .4);
+$menuActiveBg: #e9edfb;
 
 
 $subMenuBg:rgb(255, 255, 255,0);//#304156
 $subMenuHover:rgba(242, 242, 242, .4);
 $submenuActiveBg:rgba(242, 242, 242, .4);
 
+:root {
+  --navbar-height: 50px;
+  --sidebar-width: 210px;
+}
+@media screen and (min-width: 1680px) {
+  :root {
+    --navbar-height: 83px;
+    --sidebar-width: 210px;
+  }
+}
+$navbarHeight: 50px;
 $sideBarWidth: 210px;
 $primaryColor: #5585bf;
 // the :export directive is the magic sauce for webpack
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b1e8b0e..4dc4903 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Card style="margin: 20px 0;">
+    <Card>
       <div>
 
         <div class="contract">