diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index ef4118ebe..25838488d 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="ml-8 mt-8 mb-16 flex">
-    <back-button :to="activeMenu"></back-button>
+  <div class="breadcrumb ml-8 mt-4 mb-12 flex">
+    <back-button :to="activeMenu" class="mt-4"></back-button>
     <el-dropdown
       placement="top"
       trigger="click"
@@ -8,7 +8,7 @@
       class="w-full"
       style="display: block"
     >
-      <div class="flex-between">
+      <div class="breadcrumb-hover flex-between cursor">
         <div class="flex align-center">
           <AppAvatar
             v-if="isApplication"
@@ -179,4 +179,14 @@ onMounted(() => {
     color: var(--el-dropdown-menuItem-hover-color);
   }
 }
+.breadcrumb {
+  .breadcrumb-hover {
+    padding: 4px 4px 4px 0;
+    border-radius: 4px;
+    &:hover {
+      background: var(--el-color-primary-light-9);
+      color: var(--el-menu-active-color);
+    }
+  }
+}
 </style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 4df5d26ad..2f9d89511 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -129,6 +129,9 @@ h4 {
 .mb-8 {
   margin-bottom: var(--app-base-px);
 }
+.mb-12 {
+  margin-bottom: calc(var(--app-base-px) + 4px);
+}
 .mb-16 {
   margin-bottom: calc(var(--app-base-px) * 2);
 }