diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
index 5e65141b3..2a251207a 100644
--- a/src/assets/scss/base.scss
+++ b/src/assets/scss/base.scss
@@ -40,7 +40,7 @@ body.select-none {
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
+    border-radius: 8px;
     background: var(--color-bg-scrollbar);
   }
   &::-webkit-scrollbar-corner {
@@ -146,7 +146,7 @@ textarea {
   background-color: transparent;
   border: 1px solid var(--color-main-green);
   color: var(--color-main-green);
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 0 24px;
   cursor: pointer;
 }
diff --git a/src/assets/scss/connections.scss b/src/assets/scss/connections.scss
index e4dbd450b..c4a4a2456 100644
--- a/src/assets/scss/connections.scss
+++ b/src/assets/scss/connections.scss
@@ -3,7 +3,7 @@
   box-shadow: 1px 0px 8px 0px var(--color-shadow-leftlist);
   width: 260px;
   height: 100%;
-  left: 81px;
+  left: 76px;
   top: 0;
   bottom: 0;
   overflow-x: hidden;
diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss
index fbc926d35..addf7d0d7 100644
--- a/src/assets/scss/element/element-reset.scss
+++ b/src/assets/scss/element/element-reset.scss
@@ -81,7 +81,7 @@
 
 /* Button */
 .el-button--mini {
-  border-radius: 4px;
+  border-radius: 8px;
 }
 .el-button--outline {
   background: var(--color-bg-normal);
@@ -359,9 +359,9 @@
 .el-progress {
   .el-progress-bar__outer {
     background-color: var(--color-bg-code);
-    border-radius: 4px;
+    border-radius: 8px;
     .el-progress-bar__inner {
-      border-radius: 4px;
+      border-radius: 8px;
     }
   }
   .el-progress__text {
diff --git a/src/assets/scss/mixins.scss b/src/assets/scss/mixins.scss
index fc816fafd..38e6f3fe1 100644
--- a/src/assets/scss/mixins.scss
+++ b/src/assets/scss/mixins.scss
@@ -14,27 +14,35 @@
   pre {
     white-space: pre-wrap;
     word-wrap: break-word;
+    font-size: 13px;
+    line-height: 1.6;
   }
   p {
     margin: 0px;
   }
   .left-info {
-    color: var(--color-text-left_info);
+    color: var(--color-text-title);
+    font-size: 13px;
+    font-weight: 500;
+    .qos {
+      color: var(--color-text-default);
+    }
   }
   .right-info {
     color: var(--color-text-right_info);
   }
   .topic {
-    margin-right: 16px;
+    margin-right: 20px;
   }
   .retain {
     margin-left: 16px;
-    font-size: 12px;
+    font-size: 11px;
     color: var(--color-text-active);
-    background-color: #7e848885;
-    padding: 0 4px;
-    border-radius: 4px;
+    background-color: var(--color-main-yellow);
+    padding: 2px 8px;
+    border-radius: 8px;
     float: right;
+    font-weight: 500;
   }
   .payload {
     display: inline-block;
@@ -42,63 +50,51 @@
     max-width: 85%;
     min-width: 20px;
     margin: 10px 0 0px 0px;
-    padding: 10px;
+    padding: 14px 16px;
     white-space: normal;
     word-break: break-all;
   }
   .time {
     color: var(--color-text-light);
     margin-bottom: 5px;
+    font-size: 12px;
   }
   .properties {
-    margin-top: 10px;
-    padding-top: 6px;
-    border-top-width: 1px;
-    border-top-style: dashed;
-    &:last-child {
-      padding-bottom: 10px;
-      border-bottom-width: 1px;
-      border-bottom-style: dashed;
-    }
+    margin-top: 12px;
+    padding-top: 10px;
     &.left {
-      color: var(--color-text-left_info);
-      border-top-color: var(--color-border-left_metainfo);
-      &:last-child {
-        border-bottom-color: var(--color-border-left_metainfo);
-      }
+      color: var(--color-text-default);
     }
     &.right {
       color: var(--color-text-right_info);
-      border-top-color: var(--color-text-right_metainfo);
-      &:last-child {
-        border-bottom-color: var(--color-border-right_metainfo);
-      }
     }
   }
   .user-properties {
-    margin-top: 10px;
-    padding: 6px 0;
+    margin-top: 12px;
+    padding: 10px 0;
     .key-value-editor.msg-item-props {
       .editor-header {
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        .editor-title {
+          font-weight: 600;
+          font-size: 13px;
+        }
       }
       .el-input.is-disabled .el-input__inner {
-        background-color: transparent;
+        background-color: var(--color-bg-msg-input);
       }
     }
     &.left {
       .key-value-editor.msg-item-props {
         .editor-title {
-          color: var(--color-text-left_info);
+          color: var(--color-text-title);
         }
         .el-input.is-disabled .el-input__inner {
-          color: var(--color-text-left_info);
-          border: 1px solid var(--color-border-left_metainfo);
+          color: var(--color-text-default);
+          border: 1px solid var(--color-border-default);
+          background-color: var(--color-bg-msg-input);
         }
       }
-      border: 1px dashed var(--color-border-left_metainfo);
-      border-right: none;
-      border-left: none;
     }
     &.right {
       .key-value-editor.msg-item-props {
@@ -110,9 +106,6 @@
           border: 1px solid var(--color-border-right_metainfo);
         }
       }
-      border: 1px dashed var(--color-border-right_metainfo);
-      border-right: none;
-      border-left: none;
     }
   }
 }
diff --git a/src/assets/scss/theme/custom/prism-one-dark.scss b/src/assets/scss/theme/custom/prism-one-dark.scss
index 81b8b1c31..a0039cc03 100644
--- a/src/assets/scss/theme/custom/prism-one-dark.scss
+++ b/src/assets/scss/theme/custom/prism-one-dark.scss
@@ -315,7 +315,7 @@ div.code-toolbar {
     background-color: var(--color-bg-normal);
     border: 1px solid var(--color-border-default);
     color: var(--color-text-default);
-    border-radius: 4px;
+    border-radius: 8px;
     padding: 4px 8px;
     cursor: pointer;
     box-shadow: #00000014 0px 4px 12px;
diff --git a/src/assets/scss/theme/custom/prism-one-light.scss b/src/assets/scss/theme/custom/prism-one-light.scss
index fba0df995..22ec46fa1 100644
--- a/src/assets/scss/theme/custom/prism-one-light.scss
+++ b/src/assets/scss/theme/custom/prism-one-light.scss
@@ -297,7 +297,7 @@ div.code-toolbar {
     background-color: var(--color-bg-normal);
     border: 1px solid var(--color-border-default);
     color: var(--color-text-default);
-    border-radius: 4px;
+    border-radius: 8px;
     padding: 4px 8px;
     cursor: pointer;
     box-shadow: #00000014 0px 4px 12px;
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index cb101f3ad..73f6c74aa 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -56,8 +56,8 @@ body.dark {
   --color-border-right_metainfo: #ffffff59;
 
   /* Shadow color */
-  --color-shadow-leftlist: #00000061;
-  --color-shadow-sendbtn: #2dc17769;
+  --color-shadow-leftlist: #00000038;
+  --color-shadow-sendbtn: transparent;
   --color-shadow-card: #00000059;
-  --color-shadow-message: #1f1f1f;
+  --color-shadow-message: transparent;
 }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index a7f1a3c3b..bc15c48f8 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -29,7 +29,7 @@ body.light {
   --color-text-light: #a2a9b0;
   --color-text-tips: #b4b4b4;
   --color-text-right_block: #34c388;
-  --color-text-right_info: #ffffffde;
+  --color-text-right_info: #ffffff;
   --color-text-left_info: #00000075;
   --color-text-active: #fff;
   --color-text-leftbar_icon: #83929b;
diff --git a/src/assets/scss/theme/night.scss b/src/assets/scss/theme/night.scss
index 2135ed8f2..dc5ef5a1d 100644
--- a/src/assets/scss/theme/night.scss
+++ b/src/assets/scss/theme/night.scss
@@ -56,8 +56,8 @@ body.night {
   --color-border-right_metainfo: #ffffff54;
 
   /* Shadow color */
-  --color-shadow-leftlist: #00000061;
-  --color-shadow-sendbtn: #2dc17769;
+  --color-shadow-leftlist: #00000038;
+  --color-shadow-sendbtn: transparent;
   --color-shadow-card: #00000085;
-  --color-shadow-message: #151515;
+  --color-shadow-message: transparent;
 }
diff --git a/src/components/EmptyPage.vue b/src/components/EmptyPage.vue
index c237bcc91..2e9fcdbc9 100644
--- a/src/components/EmptyPage.vue
+++ b/src/components/EmptyPage.vue
@@ -60,25 +60,115 @@ export default class EmptyPage extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .empty-page {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
+    pointer-events: none;
+  }
 
   .empty-page__block {
+    text-align: center;
+    animation: fade-in-up 0.6s ease forwards;
+    position: relative;
+    z-index: 1;
+
+    img {
+      margin-bottom: 32px;
+      animation: float 4s ease-in-out infinite;
+      filter: drop-shadow(0 20px 40px rgba(16, 185, 129, 0.15));
+    }
+
     .primary-btn {
-      background: linear-gradient(134deg, #37dc85 0%, #35ca8d 100%);
+      background: var(--color-bg-btn-gradient);
       color: var(--color-text-active);
-      border: 1px solid #37dc85;
-    }
-    img {
-      margin-bottom: 20px;
+      border: none;
+      padding: 12px 28px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 10px;
+      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      letter-spacing: 0.02em;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      i {
+        margin-right: 6px;
+      }
     }
-    text-align: center;
+
     p {
-      margin: 24px auto;
-      max-width: 650px;
+      margin: 20px auto;
+      max-width: 500px;
+      color: var(--color-text-light);
+      font-size: 14px;
+      line-height: 1.6;
+
+      a {
+        color: var(--color-main-green);
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.2s ease;
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: -2px;
+          width: 100%;
+          height: 1px;
+          background: var(--color-main-green);
+          transform: scaleX(0);
+          transition: transform 0.2s ease;
+        }
+
+        &:hover::after {
+          transform: scaleX(1);
+        }
+      }
     }
   }
 }
diff --git a/src/components/FullMsgDialog.vue b/src/components/FullMsgDialog.vue
index e5a52a158..d63c37912 100644
--- a/src/components/FullMsgDialog.vue
+++ b/src/components/FullMsgDialog.vue
@@ -132,7 +132,7 @@ export default class FullMsgDialog extends Vue {
     background: var(--color-bg-normal);
     border: 1px solid var(--color-border-default);
     padding: 10px 1px 1px 1px;
-    border-radius: 4px;
+    border-radius: 8px;
   }
 }
 </style>
diff --git a/src/components/Leftbar.vue b/src/components/Leftbar.vue
index 48956574e..f12086ddc 100644
--- a/src/components/Leftbar.vue
+++ b/src/components/Leftbar.vue
@@ -81,17 +81,29 @@ export default class Leftbar extends Vue {
 
 <style lang="scss">
 @import '~@/assets/scss/variable.scss';
+
+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);
+  }
+}
+
 .leftbar {
   position: fixed;
-  width: 80px;
+  width: 76px;
   top: 0;
   bottom: 0;
-  background: linear-gradient(135deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
-  padding: 45px 0;
+  background: linear-gradient(180deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
+  padding: 40px 0 24px;
   z-index: 1001;
   display: flex;
   flex-direction: column;
   -webkit-app-region: drag;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
   a {
     -webkit-app-region: no-drag;
   }
@@ -106,20 +118,44 @@ export default class Leftbar extends Vue {
   }
   .leftbar-item {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     position: relative;
     a {
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-      display: inline-block;
+      height: 44px;
+      width: 44px;
+      line-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 12px;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: -12px;
+        top: 50%;
+        transform: translateY(-50%) scaleY(0);
+        width: 3px;
+        height: 20px;
+        background: var(--color-main-green);
+        border-radius: 0 2px 2px 0;
+        transition: transform 0.2s ease;
+      }
     }
     &.active a {
-      background-color: var(--color-bg-leftbar_item);
-      border-radius: 8px;
+      background: linear-gradient(135deg, var(--color-bg-leftbar_item) 0%, rgba(16, 185, 129, 0.15) 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      &::before {
+        transform: translateY(-50%) scaleY(1);
+      }
+      .iconfont {
+        color: var(--color-main-green);
+      }
     }
-    &.active a,
     a:hover {
+      background: var(--color-bg-leftbar_item);
+      transform: scale(1.05);
       .iconfont {
         color: var(--color-main-white);
       }
@@ -129,19 +165,31 @@ export default class Leftbar extends Vue {
     }
   }
   .app-logo {
+    margin-bottom: 16px;
+    a {
+      &:hover {
+        background: transparent;
+        transform: none;
+      }
+    }
     img {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
+      transition: transform 0.3s ease;
+      &:hover {
+        transform: rotate(10deg) scale(1.1);
+      }
     }
   }
   .iconfont {
     color: var(--color-text-leftbar_icon);
+    transition: color 0.2s ease;
   }
   .leftbar-center .iconfont {
-    font-size: 24px;
+    font-size: 22px;
   }
   .leftbar-bottom .iconfont {
-    font-size: 20px;
+    font-size: 18px;
   }
 }
 </style>
diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
index 0d6cd2664..655c025c2 100644
--- a/src/components/MsgLeftItem.vue
+++ b/src/components/MsgLeftItem.vue
@@ -134,11 +134,11 @@ export default class MsgLeftItem extends Vue {
   get topicColorStyle() {
     const hasFunctionOrSchema = this.functionName || this.schemaName
     if (!hasFunctionOrSchema && !this.msgError) {
-      return { height: 'calc(100% - 44px)', top: '11px' }
+      return { height: 'calc(100% - 38px)', top: '11px' }
     } else if (hasFunctionOrSchema && this.msgError) {
-      return { height: 'calc(100% - 84px)', top: '55px' }
+      return { height: 'calc(100% - 78px)', top: '55px' }
     } else {
-      return { height: 'calc(100% - 62px)', top: '32px' }
+      return { height: 'calc(100% - 56px)', top: '32px' }
     }
   }
 
@@ -242,9 +242,10 @@ body.night {
     left: -4px;
   }
   .left-payload {
-    background: var(--color-main-grey);
+    background: var(--color-bg-messagebox);
     border-radius: 0px 10px 10px 10px;
     position: relative;
+    box-shadow: 0 1px 3px var(--color-shadow-message);
   }
   .left-payload,
   .left-time {
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
index de7d1511e..b69b48c39 100644
--- a/src/components/MsgPublish.vue
+++ b/src/components/MsgPublish.vue
@@ -748,6 +748,7 @@ export default class MsgPublish extends Vue {
     }
     .dropdown-btn {
       margin-right: 4px;
+      border-radius: 4px;
       &.el-button.is-disabled {
         background-color: transparent;
         border: 1px solid var(--color-border-default);
@@ -785,7 +786,7 @@ export default class MsgPublish extends Vue {
         height: 28px;
         padding: 0;
         border: none;
-        border-radius: 4px;
+        border-radius: 8px;
         margin: 0;
         background-color: transparent;
         min-width: unset;
diff --git a/src/components/MsgRightItem.vue b/src/components/MsgRightItem.vue
index ee4b2035e..c5ea330fb 100644
--- a/src/components/MsgRightItem.vue
+++ b/src/components/MsgRightItem.vue
@@ -88,6 +88,7 @@ export default class MsgRightItem extends Vue {
     background: var(--color-text-right_block);
     border-radius: 10px 0 10px 10px;
     text-align: left;
+    box-shadow: 0 1px 3px var(--color-shadow-sendbtn);
   }
   .right-payload,
   .right-time {
diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
index 69059b10c..e6606abc8 100644
--- a/src/components/SubscriptionsList.vue
+++ b/src/components/SubscriptionsList.vue
@@ -799,6 +799,21 @@ export default class SubscriptionsList extends Vue {
       top: 15px;
       right: 0px;
     }
+    .new-subs-btn {
+      width: 100%;
+      height: 36px;
+      border-radius: 8px;
+      border: 1px solid var(--color-main-green);
+      color: var(--color-main-green);
+      background: transparent;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      &:hover {
+        background: var(--color-light-green);
+      }
+      &:active {
+        transform: scale(0.98);
+      }
+    }
   }
   .el-card__body {
     padding: 6px 16px;
@@ -814,7 +829,7 @@ export default class SubscriptionsList extends Vue {
       padding: 0px 8px;
       height: 46px;
       line-height: 46px;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       position: relative;
       top: 0px;
       clear: both;
@@ -822,9 +837,13 @@ export default class SubscriptionsList extends Vue {
       -moz-user-select: none;
       -khtml-user-select: none;
       user-select: none;
-      transition: all 0.3s ease;
-      animation: subItem 0.2s ease-in-out;
-      box-shadow: #0000000b 1px 2px 2px;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      animation: subItem 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+      &:hover {
+        transform: translateX(2px);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+      }
       &.active {
         background: var(--color-bg-dark) !important;
         box-shadow: none;
@@ -832,12 +851,19 @@ export default class SubscriptionsList extends Vue {
         .qos {
           color: var(--color-text-active) !important;
         }
+        .topics-color-line {
+          background: var(--color-text-active) !important;
+        }
       }
       &.disabled {
         background: transparent !important;
         border: 1px solid var(--color-border-default);
         box-shadow: none;
         cursor: not-allowed;
+        &:hover {
+          transform: none;
+          box-shadow: none;
+        }
         .topic,
         .qos {
           color: var(--color-text-light) !important;
@@ -856,6 +882,14 @@ export default class SubscriptionsList extends Vue {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
+        transition: height 0.2s ease;
+      }
+      &:hover .topics-color-line {
+        height: 32px;
+      }
+      &.active .topics-color-line,
+      &.active:hover .topics-color-line {
+        height: 24px;
       }
       .topic {
         max-width: 120px;
@@ -880,9 +914,14 @@ export default class SubscriptionsList extends Vue {
         height: 18px;
         text-align: center;
         line-height: 18px;
+        transition: transform 0.15s ease;
+        &:hover {
+          transform: scale(1.1);
+        }
         .el-icon-close,
         .el-icon-loading {
           color: var(--color-text-active);
+          font-size: 10px;
         }
       }
       &:hover {
@@ -894,10 +933,12 @@ export default class SubscriptionsList extends Vue {
   }
   @keyframes subItem {
     from {
-      top: 100px;
+      opacity: 0;
+      transform: translateY(8px);
     }
     to {
-      top: 0px;
+      opacity: 1;
+      transform: translateY(0);
     }
   }
 }
@@ -1004,7 +1045,7 @@ export default class SubscriptionsList extends Vue {
   background: var(--color-bg-popover);
   text-align: center;
   min-width: 120px;
-  border-radius: 4px;
+  border-radius: 8px;
   .popper__arrow::after {
     bottom: 0px !important;
     border-top-color: var(--color-bg-popover) !important;
diff --git a/src/components/ai/CopilotMessages.vue b/src/components/ai/CopilotMessages.vue
index 854c7965a..f3465d20e 100644
--- a/src/components/ai/CopilotMessages.vue
+++ b/src/components/ai/CopilotMessages.vue
@@ -253,7 +253,7 @@ body.night {
       }
       pre {
         padding: 16px;
-        border-radius: 4px;
+        border-radius: 8px;
 
         code {
           padding: 0;
diff --git a/src/components/ai/MCPSettings.vue b/src/components/ai/MCPSettings.vue
index 95d124672..fe062e4d4 100644
--- a/src/components/ai/MCPSettings.vue
+++ b/src/components/ai/MCPSettings.vue
@@ -540,7 +540,7 @@ export default class MCPSettings extends Vue {
     .editor-container {
       height: 250px;
       border: 1px solid var(--color-border-default);
-      border-radius: 4px;
+      border-radius: 8px;
 
       &.is-error {
         border-color: var(--color-minor-red);
@@ -622,7 +622,7 @@ export default class MCPSettings extends Vue {
     word-break: break-all;
     background-color: var(--color-bg-lighter);
     padding: 8px;
-    border-radius: 4px;
+    border-radius: 8px;
     position: relative;
     display: flex;
     justify-content: space-between;
@@ -650,7 +650,7 @@ export default class MCPSettings extends Vue {
       gap: 8px;
       margin-bottom: 12px;
       padding: 8px 12px;
-      border-radius: 4px;
+      border-radius: 8px;
       position: relative;
 
       &.success {
diff --git a/src/components/charts/BigNumber.vue b/src/components/charts/BigNumber.vue
index fa088af85..60c71b351 100644
--- a/src/components/charts/BigNumber.vue
+++ b/src/components/charts/BigNumber.vue
@@ -420,7 +420,7 @@ export default class BigNumberChart extends Vue {
 .big-stat-panel {
   position: relative;
   background: transparent;
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 12px;
   box-sizing: border-box;
 }
diff --git a/src/lang/viewer.ts b/src/lang/viewer.ts
index 5d8296188..d1b3c3833 100644
--- a/src/lang/viewer.ts
+++ b/src/lang/viewer.ts
@@ -299,18 +299,18 @@ export default {
     hu: 'Üzenet JSON Megjelenítő',
   },
   previous: {
-    zh: '上一个:',
-    en: 'Previous:',
-    tr: 'Önceki:',
-    ja: '前:',
-    hu: 'Előző:',
+    zh: '上一个',
+    en: 'Previous',
+    tr: 'Önceki',
+    ja: '前',
+    hu: 'Előző',
   },
   currentLabel: {
-    zh: '当前:',
-    en: 'Current:',
-    tr: 'Mevcut:',
-    ja: '現在:',
-    hu: 'Jelenlegi:',
+    zh: '当前',
+    en: 'Current',
+    tr: 'Mevcut',
+    ja: '現在',
+    hu: 'Jelenlegi',
   },
   yes: {
     zh: '是',
diff --git a/src/utils/styles.ts b/src/utils/styles.ts
index 5a2943abf..0315b3fd5 100644
--- a/src/utils/styles.ts
+++ b/src/utils/styles.ts
@@ -1,11 +1,11 @@
 export enum LeftValues {
-  Show = '341px',
-  Hide = '81px',
+  Show = '337px',
+  Hide = '77px',
 }
 
 export enum DetailLeftValues {
-  Show = '571px',
-  Hide = '311px',
+  Show = '567px',
+  Hide = '307px',
 }
 
 export enum BodyTopValues {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index abd0353e5..c33cd8c6e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -83,11 +83,14 @@ export default class Home extends Vue {
     position: fixed;
     right: 0;
     z-index: 2;
-    background: var(--color-bg-normal);
-    transition: all 0.4s;
+    background: var(--color-bg-glass);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .rightbar {
-    margin-left: 81px;
+    margin-left: 76px;
     height: 100%;
     background-color: var(--color-bg-primary);
     border-left: 1px solid var(--color-border-rightbar);
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index 24a77249f..c69e9be2d 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -20,19 +20,21 @@
         <h2>{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}</h2>
       </div>
       <div class="tail">
-        <a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
-          {{ $t('connections.connectBtn') }}
-        </a>
-        <el-dropdown trigger="click" @command="handleActionCommand">
-          <a href="javascript:;">
-            <i class="el-icon-arrow-down"></i>
+        <div class="connect-btn-group">
+          <a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
+            {{ $t('connections.connectBtn') }}
           </a>
-          <el-dropdown-menu class="connection-oper-item" slot="dropdown">
-            <el-dropdown-item command="save">
-              <i class="iconfont icon-save"></i>{{ $t('common.saveOnly') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+          <el-dropdown trigger="click" @command="handleActionCommand">
+            <a href="javascript:;" class="dropdown-btn">
+              <i class="el-icon-arrow-down"></i>
+            </a>
+            <el-dropdown-menu class="connection-oper-item" slot="dropdown">
+              <el-dropdown-item command="save">
+                <i class="iconfont icon-save"></i>{{ $t('common.saveOnly') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
     </div>
 
@@ -945,11 +947,45 @@ export default class ConnectionForm extends Vue {
       -webkit-app-region: no-drag;
     }
     .tail {
-      a {
-        padding: 0 12px;
-      }
-      .connect-btn {
-        border-right: 1px solid var(--color-border-default);
+      .connect-btn-group {
+        display: flex;
+        align-items: center;
+        background: var(--color-main-green);
+        border-radius: 8px;
+        overflow: hidden;
+
+        .connect-btn {
+          padding: 0 16px;
+          height: 32px;
+          line-height: 32px;
+          color: #fff;
+          font-size: 13px;
+          font-weight: 500;
+          transition: background 0.2s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+          }
+        }
+
+        .dropdown-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          height: 32px;
+          border-left: 1px solid rgba(255, 255, 255, 0.2);
+          color: #fff;
+          transition: background 0.2s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+          }
+
+          i {
+            font-size: 12px;
+          }
+        }
       }
     }
   }
diff --git a/src/views/connections/ConnectionsList.vue b/src/views/connections/ConnectionsList.vue
index 021dae305..e905935a5 100644
--- a/src/views/connections/ConnectionsList.vue
+++ b/src/views/connections/ConnectionsList.vue
@@ -14,10 +14,10 @@
           </a>
           <el-dropdown-menu class="connection-oper-item" slot="dropdown">
             <el-dropdown-item command="newConnection">
-              {{ $t('connections.newConnections') }}
+              <i class="iconfont icon-connections"></i>{{ $t('connections.newConnections') }}
             </el-dropdown-item>
             <el-dropdown-item command="newGroup">
-              {{ $t('connections.newCollection') }}
+              <i class="el-icon-folder"></i>{{ $t('connections.newCollection') }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -44,7 +44,7 @@
     <div class="connections-list">
       <template v-if="!isLoadingData">
         <el-tree
-          :indent="4"
+          :indent="8"
           draggable
           ref="tree"
           :data="treeData"
@@ -73,34 +73,24 @@
               @click="handleSelectConnection(data)"
               @contextmenu.prevent="handleContextMenu(data, $event)"
             >
-              <div class="item-left">
-                <div
-                  :class="[
-                    'connection-status',
-                    {
-                      online: activeConnection[data.id] ? activeConnection[data.id].client.connected : false,
-                    },
-                  ]"
-                ></div>
-                <div class="client-info">
-                  <el-tooltip
-                    :effect="theme !== 'light' ? 'light' : 'dark'"
-                    :content="`${data.name}@${data.host}:${data.port}`"
-                    :open-delay="500"
-                    placement="top"
+              <div class="client-info">
+                <el-tooltip
+                  :effect="theme !== 'light' ? 'light' : 'dark'"
+                  :content="`${data.name}@${data.host}:${data.port}`"
+                  :open-delay="500"
+                  placement="top"
+                >
+                  <div
+                    :class="[
+                      'client-name',
+                      {
+                        online: activeConnection[data.id] ? activeConnection[data.id].client.connected : false,
+                      },
+                    ]"
                   >
-                    <div
-                      :class="[
-                        'client-name',
-                        {
-                          online: activeConnection[data.id] ? activeConnection[data.id].client.connected : false,
-                        },
-                      ]"
-                    >
-                      {{ data.name }}@{{ data.host }}:{{ data.port }}
-                    </div>
-                  </el-tooltip>
-                </div>
+                    {{ data.name }}@{{ data.host }}:{{ data.port }}
+                  </div>
+                </el-tooltip>
               </div>
               <div v-if="data.ssl" class="ssl-tag">
                 <div>SSL</div>
@@ -490,6 +480,8 @@ export default class ConnectionsList extends Vue {
   }
 
   private handleConnectionTreeClick(treeNode: ConnectionModelTree) {
+    const treeRef = this.$refs.tree as ElTree<ConnectionModelTree['id'], ConnectionModelTree>
+    treeRef?.setCurrentKey(treeNode.id)
     if (treeNode.isCollection) {
       this.selectedCollection = treeNode
       this.selectedConnection = null
@@ -836,7 +828,7 @@ export default class ConnectionsList extends Vue {
       height: 100%;
       background-color: var(--color-bg-normal);
       .is-current > .el-tree-node__content {
-        background-color: var(--color-bg-item);
+        background: var(--color-bg-item);
       }
       .el-tree-node__content {
         .el-tree-node__expand-icon {
@@ -855,6 +847,7 @@ export default class ConnectionsList extends Vue {
           justify-content: space-between;
           .connection-item {
             @include flex-space-between;
+            align-items: center;
             height: 48px;
             width: 100%;
             cursor: pointer;
@@ -862,14 +855,15 @@ export default class ConnectionsList extends Vue {
             transition: background 0.3s ease;
             user-select: none;
             .client-info {
-              display: inline-block;
-              margin-left: 8px;
+              display: flex;
+              align-items: center;
+              margin-left: 0;
               .client-name {
                 display: block;
                 font-size: $font-size--body;
                 font-weight: 500;
                 color: var(--color-text-title);
-                max-width: 150px;
+                max-width: 200px;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -896,30 +890,18 @@ export default class ConnectionsList extends Vue {
               }
             }
             .new-msg-count {
-              margin-right: 28px;
+              position: absolute;
+              right: 8px;
               min-width: 18px;
               height: 18px;
               line-height: 18px;
               background: var(--color-bg-unreadmsg);
               border-radius: 9px;
-              padding: 0 3px;
+              padding: 0 5px;
               color: var(--color-text-active);
               font-size: $font-size--tips;
               text-align: center;
-              position: relative;
-              top: -2px;
-            }
-            .connection-status {
-              display: inline-block;
-              width: 8px;
-              height: 8px;
-              border-radius: 4px;
-              background: var(--color-bg-item_status);
-              vertical-align: top;
-              margin-top: 8px;
-              &.online {
-                background: var(--color-main-green);
-              }
+              box-shadow: -8px 0 12px 4px var(--color-bg-item);
             }
           }
           .custom-tree-node-collection {
@@ -932,7 +914,7 @@ export default class ConnectionsList extends Vue {
               font-size: $font-size--body;
               font-weight: 500;
               color: var(--color-text-title);
-              max-width: 150px;
+              max-width: 200px;
               svg {
                 width: 24px;
                 height: 24px;
@@ -951,4 +933,5 @@ export default class ConnectionsList extends Vue {
     }
   }
 }
+@include el-dropdown-menu-common;
 </style>
diff --git a/src/views/log/index.vue b/src/views/log/index.vue
index 0defc1947..b9018ac36 100644
--- a/src/views/log/index.vue
+++ b/src/views/log/index.vue
@@ -144,7 +144,7 @@ export default class Logs extends Vue {
     background: var(--color-bg-normal);
     border: 1px solid var(--color-border-default);
     padding: 10px 1px 1px 1px;
-    border-radius: 4px;
+    border-radius: 8px;
   }
 }
 </style>
diff --git a/src/views/script/index.vue b/src/views/script/index.vue
index f63aa3d45..4daee13db 100644
--- a/src/views/script/index.vue
+++ b/src/views/script/index.vue
@@ -674,7 +674,7 @@ message Person {
     background: var(--color-bg-normal);
     border: 1px solid var(--color-border-default);
     padding: 10px 1px 1px 1px;
-    border-radius: 4px;
+    border-radius: 8px;
   }
   .script-test-row {
     margin: 12px 0px;
diff --git a/src/views/viewer/PayloadInspector.vue b/src/views/viewer/PayloadInspector.vue
index a8bb97652..8b74e1e63 100644
--- a/src/views/viewer/PayloadInspector.vue
+++ b/src/views/viewer/PayloadInspector.vue
@@ -1,40 +1,56 @@
 <template>
   <div class="payload-inspector-view">
-    <div class="inspector-controls">
-      <div class="view-mode-selector">
-        <button
-          class="view-mode-button"
-          :class="{ active: activeViewMode === 'diff' }"
-          @click="activeViewMode = 'diff'"
-        >
-          {{ $t('viewer.diffView') }}
-        </button>
-        <button
-          class="view-mode-button"
-          :class="{ active: activeViewMode === 'tree' }"
-          @click="activeViewMode = 'tree'"
-        >
-          {{ $t('viewer.jsonTree') }}
-        </button>
-      </div>
-      <div class="control-group">
-        <ConnectionSelect v-model="selectedConnectionId" size="small" @change="onConnectionChange" />
+    <!-- Toolbar -->
+    <div class="inspector-toolbar">
+      <div class="toolbar-left">
+        <!-- Segmented Control for View Mode -->
+        <div class="view-mode-control">
+          <button class="segment" :class="{ active: activeViewMode === 'diff' }" @click="activeViewMode = 'diff'">
+            <i class="el-icon-files"></i>
+            {{ $t('viewer.diffView') }}
+          </button>
+          <button class="segment" :class="{ active: activeViewMode === 'tree' }" @click="activeViewMode = 'tree'">
+            <i class="iconfont icon-tree-view"></i>
+            {{ $t('viewer.jsonTree') }}
+          </button>
+          <span class="segment-slider" :class="{ 'at-right': activeViewMode === 'tree' }"></span>
+        </div>
       </div>
 
-      <div class="control-group">
+      <div class="toolbar-right">
+        <ConnectionSelect v-model="selectedConnectionId" size="small" width="200px" @change="onConnectionChange" />
         <TopicSelect
           v-model="selectedTopic"
           :connection-id="selectedConnectionId"
           size="small"
+          width="200px"
           @change="onTopicChange"
         />
-      </div>
-
-      <div class="message-type-tabs">
-        <MsgTypeTabs v-model="currentMessageType" @change="onMessageTypeChange" />
+        <div class="type-filter">
+          <span
+            class="type-item"
+            :class="{ active: currentMessageType === 'all' }"
+            @click="onMessageTypeChange('all')"
+            >{{ $t('connections.all') }}</span
+          >
+          <span
+            class="type-item"
+            :class="{ active: currentMessageType === 'received' }"
+            @click="onMessageTypeChange('received')"
+            >{{ $t('connections.received') }}</span
+          >
+          <span
+            class="type-item"
+            :class="{ active: currentMessageType === 'publish' }"
+            @click="onMessageTypeChange('publish')"
+            >{{ $t('connections.published') }}</span
+          >
+        </div>
       </div>
     </div>
-    <div class="diff-view-container">
+
+    <!-- Content -->
+    <div class="inspector-content">
       <DiffView
         v-if="activeViewMode === 'diff'"
         :key="componentKey"
@@ -185,55 +201,124 @@ export default class PayloadInspector extends Vue {
   flex-direction: column;
   height: calc(100vh - 130px);
   box-sizing: border-box;
-  .inspector-controls {
+
+  .inspector-toolbar {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
     flex-wrap: wrap;
-    gap: 20px;
-    .view-mode-selector {
+
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+    }
+
+    .toolbar-right {
       display: flex;
-      gap: 10px;
-      margin-bottom: 5px;
-      min-width: 180px;
-      .view-mode-button {
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    // Segmented Control
+    .view-mode-control {
+      position: relative;
+      display: inline-flex;
+      background: var(--color-bg-primary);
+      border: 1px solid var(--color-border-default);
+      border-radius: 8px;
+      padding: 3px;
+
+      .segment {
         position: relative;
         z-index: 1;
-        padding: 8px 16px;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 14px;
         border: none;
         background: transparent;
-        border-radius: 4px;
+        border-radius: 6px;
+        font-size: 13px;
         font-weight: 500;
         color: var(--color-text-default);
         cursor: pointer;
+        transition: color 0.2s ease;
         white-space: nowrap;
+
+        i {
+          font-size: 14px;
+        }
+
+        &:hover {
+          color: var(--color-main-green);
+        }
+
         &.active {
-          background: #34c38810;
           color: var(--color-main-green);
         }
       }
+
+      .segment-slider {
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: calc(50% - 3px);
+        height: calc(100% - 6px);
+        background: var(--color-bg-normal);
+        border-radius: 6px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        pointer-events: none;
+
+        &.at-right {
+          transform: translateX(100%);
+        }
+      }
     }
 
-    .message-type-tabs {
+    // Type Filter
+    .type-filter {
       display: flex;
       align-items: center;
-    }
+      border-left: 1px solid var(--color-border-default);
+      padding-left: 12px;
+      margin-left: 4px;
 
-    .control-group {
-      label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: 500;
+      .type-item {
+        padding: 0 10px;
+        font-size: 12px;
         color: var(--color-text-default);
+        cursor: pointer;
+        border-right: 1px solid var(--color-border-default);
+        transition: color 0.15s ease;
+
+        &:last-child {
+          border-right: none;
+          padding-right: 0;
+        }
+
+        &:hover {
+          color: var(--color-main-green);
+        }
+
+        &.active {
+          color: var(--color-main-green);
+          font-weight: 500;
+        }
       }
     }
   }
 
-  .diff-view-container {
+  .inspector-content {
     flex: 1;
     min-height: 0;
-    margin-top: 12px;
     border: 1px solid var(--color-border-default);
-    border-radius: 6px;
+    border-radius: 8px;
     overflow: hidden;
+    background: var(--color-bg-normal);
   }
 }
 </style>
diff --git a/src/views/viewer/dashboard/DashboardView.vue b/src/views/viewer/dashboard/DashboardView.vue
index 8fedbb0c0..8b9999b29 100644
--- a/src/views/viewer/dashboard/DashboardView.vue
+++ b/src/views/viewer/dashboard/DashboardView.vue
@@ -974,7 +974,7 @@ export default class DashboardCanvas extends Vue {
 
   .vue-grid-layout {
     background: var(--color-bg-primary);
-    border-radius: 4px;
+    border-radius: 8px;
     min-height: 400px;
     transition: background 0.2s;
   }
@@ -982,7 +982,7 @@ export default class DashboardCanvas extends Vue {
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-default);
-    border-radius: 4px;
+    border-radius: 8px;
     box-shadow: 0 1px 4px 0 var(--color-shadow-leftlist);
     transition: background 0.2s, border 0.2s;
     display: flex;
@@ -1100,7 +1100,7 @@ export default class DashboardCanvas extends Vue {
   border: 1px solid var(--color-border-default);
   box-shadow: 0 4px 12px 0 var(--color-shadow-leftlist);
   padding: 0;
-  border-radius: 4px;
+  border-radius: 8px;
 
   .el-dropdown-menu {
     background: var(--color-bg-card);
diff --git a/src/widgets/DiffView.vue b/src/widgets/DiffView.vue
index ed05fe864..a8b142f17 100644
--- a/src/widgets/DiffView.vue
+++ b/src/widgets/DiffView.vue
@@ -1,74 +1,44 @@
 <template>
   <div class="diff-view">
-    <div class="diff-header">
-      <div class="header-content">
-        <h3>{{ $t('viewer.messageHistory') }}</h3>
-      </div>
-      <div class="message-info" v-if="currentMessage && previousMessage">
-        <div class="info-side previous">
-          <div class="side-row">
-            <div class="attr">
-              <span class="label">{{ $t('viewer.previous') }} </span>
-              <span class="value">{{ formatTime(previousMessage.createAt) }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">QoS:</span>
-              <span class="value">{{ previousMessage.qos }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">Retain:</span>
-              <span class="value">{{ previousMessage.retain ? $t('viewer.yes') : $t('viewer.no') }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">Size:</span>
-              <span class="value">{{ getPayloadSize(previousMessage.payload) }}</span>
-            </div>
-          </div>
+    <div class="diff-header" v-if="currentMessage && previousMessage">
+      <el-tooltip
+        :effect="theme !== 'light' ? 'light' : 'dark'"
+        placement="bottom"
+        :open-delay="300"
+        :content="$t('viewer.olderMessage')"
+      >
+        <i class="nav-icon nav-left" :class="{ 'is-disabled': !canGoToPrevious && !hasMore }" @click="goToPrevious">
+          <i class="el-icon-arrow-left"></i>
+        </i>
+      </el-tooltip>
+      <div class="header-side previous">
+        <span class="side-label">{{ $t('viewer.previous') }}</span>
+        <span class="side-time">{{ formatTime(previousMessage.createAt) }}</span>
+        <div class="side-badges">
+          <span class="badge">QoS {{ previousMessage.qos }}</span>
+          <span class="badge retain" v-if="previousMessage.retain">Retain</span>
+          <span class="badge">{{ getPayloadSize(previousMessage.payload) }}</span>
         </div>
-        <div class="info-side current">
-          <div class="side-row">
-            <div class="attr">
-              <span class="label">{{ $t('viewer.currentLabel') }} </span>
-              <span class="value">{{ formatTime(currentMessage.createAt) }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">QoS:</span>
-              <span class="value">{{ currentMessage.qos }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">Retain:</span>
-              <span class="value">{{ currentMessage.retain ? $t('viewer.yes') : $t('viewer.no') }}</span>
-            </div>
-            <div class="attr">
-              <span class="label">Size:</span>
-              <span class="value">{{ getPayloadSize(currentMessage.payload) }}</span>
-            </div>
-          </div>
+      </div>
+      <div class="header-side current">
+        <span class="side-label">{{ $t('viewer.currentLabel') }}</span>
+        <span class="side-time">{{ formatTime(currentMessage.createAt) }}</span>
+        <div class="side-badges">
+          <span class="badge">QoS {{ currentMessage.qos }}</span>
+          <span class="badge retain" v-if="currentMessage.retain">Retain</span>
+          <span class="badge">{{ getPayloadSize(currentMessage.payload) }}</span>
         </div>
       </div>
-    </div>
-
-    <div class="diff-content-wrapper" v-if="messages.length >= 2 && originalMessage && modifiedMessage">
-      <div class="navigation-controls">
-        <el-tooltip
-          :effect="theme !== 'light' ? 'light' : 'dark'"
-          placement="bottom"
-          :open-delay="300"
-          :content="$t('viewer.olderMessage')"
-        >
-          <i
-            class="el-icon-arrow-left nav-icon"
-            :class="{ 'is-disabled': !canGoToPrevious && !hasMore }"
-            @click="goToPrevious"
-          ></i>
-        </el-tooltip>
+      <div class="nav-right">
         <el-tooltip
           :effect="theme !== 'light' ? 'light' : 'dark'"
           placement="bottom"
           :open-delay="300"
           :content="$t('viewer.newerMessage')"
         >
-          <i class="el-icon-arrow-right nav-icon" :class="{ 'is-disabled': !canGoToNext }" @click="goToNext"></i>
+          <i class="nav-icon" :class="{ 'is-disabled': !canGoToNext }" @click="goToNext">
+            <i class="el-icon-arrow-right"></i>
+          </i>
         </el-tooltip>
         <el-tooltip
           :effect="theme !== 'light' ? 'light' : 'dark'"
@@ -76,10 +46,14 @@
           :open-delay="300"
           :content="$t('viewer.goToLatestMessage')"
         >
-          <i class="el-icon-top nav-icon" :class="{ 'is-disabled': currentIndex === 0 }" @click="goToLatest"></i>
+          <i class="nav-icon" :class="{ 'is-disabled': currentIndex === 0 }" @click="goToLatest">
+            <i class="el-icon-d-arrow-right"></i>
+          </i>
         </el-tooltip>
       </div>
+    </div>
 
+    <div class="diff-content-wrapper" v-if="messages.length >= 2 && originalMessage && modifiedMessage">
       <div class="diff-content">
         <Editor
           id="message-diff"
@@ -227,76 +201,121 @@ export default class DiffView extends Vue {
   color: var(--color-text-default);
 
   .diff-header {
-    padding: 16px;
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid var(--color-border-default);
     background: var(--color-bg-primary);
 
-    .header-content {
-      .el-select {
-        width: 100px;
-      }
-
-      margin-bottom: 12px;
+    .nav-icon {
+      width: 40px;
+      height: 100%;
+      min-height: 44px;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text-title);
+      background: var(--color-bg-normal);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
 
-      h3 {
-        margin: 0;
-        font-size: 16px;
-        font-weight: 500;
-        color: var(--color-text-title);
+      &:hover {
+        background: var(--color-main-green);
+        color: #fff;
+      }
+
+      &.is-disabled {
+        opacity: 0.25;
+        cursor: not-allowed;
+        pointer-events: none;
+        background: transparent;
+      }
+
+      &.nav-left {
+        border-right: 1px solid var(--color-border-default);
       }
     }
 
-    .message-info {
+    .nav-right {
       display: flex;
-      justify-content: space-between;
-      gap: 24px;
-      flex-wrap: nowrap;
+      align-items: stretch;
+      background: var(--color-bg-normal);
+      border-left: 1px solid var(--color-border-default);
 
-      .info-side {
-        flex: 1 1 50%;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-
-        .side-row {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-          flex-wrap: wrap;
-          overflow: hidden;
-          white-space: wrap;
+      .nav-icon {
+        background: transparent;
+        height: auto;
+        border-left: 1px solid var(--color-border-default);
+
+        &:first-child {
+          border-left: none;
         }
 
-        .side-title {
-          font-size: 12px;
-          color: var(--color-text-light);
-          font-weight: 600;
-          flex: 0 0 auto;
+        &:hover {
+          background: var(--color-main-green);
+          color: #fff;
         }
+      }
+    }
+
+    .header-side {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 16px;
 
-        .attr {
-          display: inline-flex;
-          align-items: center;
-          gap: 4px;
-          max-width: 100%;
+      &.previous {
+        border-right: 1px solid var(--color-border-default);
+      }
 
-          .label {
-            font-size: 12px;
-            color: var(--color-text-light);
-            font-weight: 500;
-          }
+      &.current {
+        background: rgba(52, 195, 136, 0.03);
 
-          .value {
-            font-size: 12px;
-            color: var(--color-text-default);
-            max-width: 240px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+        .side-label {
+          background: var(--color-main-green);
+          color: #fff;
+        }
+      }
+
+      .side-label {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        padding: 4px 10px;
+        border-radius: 4px;
+        background: var(--color-text-light);
+        color: #fff;
+        flex-shrink: 0;
+      }
+
+      .side-time {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--color-text-title);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .side-badges {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .badge {
+          font-size: 12px;
+          padding: 3px 10px;
+          border-radius: 4px;
+          background: var(--color-bg-normal);
+          color: var(--color-text-default);
+          border: 1px solid var(--color-border-default);
+
+          &.retain {
+            background: var(--color-main-yellow);
+            border-color: var(--color-main-yellow);
+            color: #fff;
           }
         }
       }
@@ -309,32 +328,6 @@ export default class DiffView extends Vue {
     flex-direction: column;
     min-height: 0;
 
-    .navigation-controls {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      justify-content: center;
-      padding: 0 16px;
-      background: var(--color-bg-primary);
-      border-bottom: 1px solid var(--color-border-default);
-      height: 57px; // Match .message-header height in JSONTreeView.vue
-      .nav-icon {
-        font-size: 18px;
-        font-weight: 400;
-        color: var(--color-text-primary);
-        cursor: pointer;
-        transition: color 0.15s ease;
-        &:hover {
-          color: var(--color-main-green);
-        }
-        &.is-disabled {
-          opacity: 0.4;
-          cursor: not-allowed;
-          pointer-events: none;
-        }
-      }
-    }
-
     .diff-content {
       flex: 1;
       min-height: 0;
diff --git a/src/widgets/JSONViewer.vue b/src/widgets/JSONViewer.vue
index d3c613519..529271e44 100644
--- a/src/widgets/JSONViewer.vue
+++ b/src/widgets/JSONViewer.vue
@@ -1,102 +1,82 @@
 <template>
   <div class="json-tree-view">
-    <div class="json-header">
+    <div class="json-header" v-if="currentMessage && currentMessage.createAt">
+      <el-tooltip
+        :effect="theme !== 'light' ? 'light' : 'dark'"
+        placement="bottom"
+        :open-delay="300"
+        :content="$t('viewer.olderMessage')"
+      >
+        <i class="nav-icon nav-left" :class="{ 'is-disabled': !canGoToPrevious && !hasMore }" @click="goToPrevious">
+          <i class="el-icon-arrow-left"></i>
+        </i>
+      </el-tooltip>
       <div class="header-content">
-        <h3>{{ $t('viewer.messageJsonViewer') }}</h3>
-      </div>
-      <div class="message-info" v-if="currentMessage">
-        <div class="info-item">
-          <span class="label">Time:</span>
-          <span class="value">{{ formatTime(currentMessage.createAt) }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">QoS:</span>
-          <span class="value">{{ currentMessage.qos }}</span>
-        </div>
-        <div class="info-item">
-          <span class="label">Retain:</span>
-          <span class="value">{{ currentMessage.retain ? 'Yes' : 'No' }}</span>
+        <span class="header-time">{{ formatTime(currentMessage.createAt) }}</span>
+        <div class="header-badges">
+          <span class="badge">QoS {{ currentMessage.qos }}</span>
+          <span class="badge retain" v-if="currentMessage.retain">Retain</span>
+          <span class="badge">{{ getPayloadSize(currentMessage.payload) }}</span>
         </div>
-        <div class="info-item">
-          <span class="label">Size:</span>
-          <span class="value">{{ getPayloadSize(currentMessage.payload) }}</span>
+        <div class="header-tools">
+          <el-input
+            v-model="searchQuery"
+            :placeholder="$t('viewer.searchInJson')"
+            size="small"
+            prefix-icon="el-icon-search"
+            clearable
+            @input="onSearchInput"
+            class="search-input"
+          />
+          <el-tooltip
+            :effect="theme !== 'light' ? 'light' : 'dark'"
+            placement="bottom"
+            :open-delay="500"
+            :content="$t('viewer.visualizeJsonTree')"
+          >
+            <i class="tool-icon el-icon-pie-chart" @click="openVisualTreeModal"></i>
+          </el-tooltip>
+          <el-tooltip
+            placement="bottom"
+            :effect="theme !== 'light' ? 'light' : 'dark'"
+            :open-delay="500"
+            :content="$t('common.copy')"
+          >
+            <i
+              class="tool-icon iconfont icon-copy"
+              :class="{ 'is-disabled': !currentMessage || !currentMessage.payload }"
+              @click="copyPayload(currentMessage && currentMessage.payload ? currentMessage.payload : '')"
+            ></i>
+          </el-tooltip>
         </div>
       </div>
+      <div class="nav-right">
+        <el-tooltip
+          :effect="theme !== 'light' ? 'light' : 'dark'"
+          placement="bottom"
+          :open-delay="300"
+          :content="$t('viewer.newerMessage')"
+        >
+          <i class="nav-icon" :class="{ 'is-disabled': !canGoToNext }" @click="goToNext">
+            <i class="el-icon-arrow-right"></i>
+          </i>
+        </el-tooltip>
+        <el-tooltip
+          :effect="theme !== 'light' ? 'light' : 'dark'"
+          placement="bottom"
+          :open-delay="300"
+          :content="$t('viewer.goToLatestMessage')"
+        >
+          <i class="nav-icon" :class="{ 'is-disabled': currentIndex === 0 }" @click="goToLatest">
+            <i class="el-icon-d-arrow-right"></i>
+          </i>
+        </el-tooltip>
+      </div>
     </div>
 
     <div class="json-content-wrapper" v-if="messages.length > 0">
-      <div class="json-content">
-        <div class="message-tree">
-          <div class="message-header">
-            <div class="header-left">
-              <el-input
-                v-model="searchQuery"
-                :placeholder="$t('viewer.searchInJson')"
-                size="small"
-                prefix-icon="el-icon-search"
-                clearable
-                @input="onSearchInput"
-                class="search-input"
-              />
-              <el-tooltip
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                placement="bottom"
-                :open-delay="500"
-                :content="$t('viewer.visualizeJsonTree')"
-              >
-                <i class="el-icon-pie-chart nav-icon" @click="openVisualTreeModal"></i>
-              </el-tooltip>
-            </div>
-            <div class="navigation-controls">
-              <el-tooltip
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                placement="bottom"
-                :open-delay="300"
-                :content="$t('viewer.olderMessage')"
-              >
-                <i
-                  class="el-icon-arrow-left nav-icon"
-                  :class="{ 'is-disabled': !canGoToPrevious && !hasMore }"
-                  @click="goToPrevious"
-                ></i>
-              </el-tooltip>
-              <el-tooltip
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                placement="bottom"
-                :open-delay="300"
-                :content="$t('viewer.newerMessage')"
-              >
-                <i class="el-icon-arrow-right nav-icon" :class="{ 'is-disabled': !canGoToNext }" @click="goToNext"></i>
-              </el-tooltip>
-              <el-tooltip
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                placement="bottom"
-                :open-delay="300"
-                :content="$t('viewer.goToLatestMessage')"
-              >
-                <i class="el-icon-top nav-icon" :class="{ 'is-disabled': currentIndex === 0 }" @click="goToLatest"></i>
-              </el-tooltip>
-            </div>
-            <div class="header-right">
-              <el-tooltip
-                placement="bottom"
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                :open-delay="500"
-                :content="$t('common.copy')"
-              >
-                <i
-                  class="iconfont icon-copy nav-icon"
-                  :class="{ 'is-disabled': !currentMessage || !currentMessage.payload }"
-                  @click="copyPayload(currentMessage && currentMessage.payload ? currentMessage.payload : '')"
-                ></i>
-              </el-tooltip>
-            </div>
-          </div>
-
-          <div class="json-container" ref="jsonContainer">
-            <tree-view :data="parseJson(currentMessage.payload)" :options="treeOptions" />
-          </div>
-        </div>
+      <div class="json-container" ref="jsonContainer">
+        <tree-view :data="parseJson(currentMessage.payload)" :options="treeOptions" />
       </div>
     </div>
 
@@ -399,115 +379,149 @@ export default class JsonViewer extends Vue {
   flex-direction: column;
   background: var(--color-bg-normal);
   color: var(--color-text-default);
+
   .json-header {
-    padding: 16px;
+    display: flex;
+    align-items: stretch;
     border-bottom: 1px solid var(--color-border-default);
     background: var(--color-bg-primary);
+
+    .nav-icon {
+      width: 40px;
+      height: 100%;
+      min-height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text-title);
+      background: var(--color-bg-normal);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        background: var(--color-main-green);
+        color: #fff;
+      }
+
+      &.is-disabled {
+        opacity: 0.25;
+        cursor: not-allowed;
+        pointer-events: none;
+        background: transparent;
+      }
+
+      &.nav-left {
+        border-right: 1px solid var(--color-border-default);
+      }
+    }
+
+    .nav-right {
+      display: flex;
+      align-items: stretch;
+      background: var(--color-bg-normal);
+      border-left: 1px solid var(--color-border-default);
+
+      .nav-icon {
+        background: transparent;
+        height: auto;
+        border-left: 1px solid var(--color-border-default);
+
+        &:first-child {
+          border-left: none;
+        }
+
+        &:hover {
+          background: var(--color-main-green);
+          color: #fff;
+        }
+      }
+    }
+
     .header-content {
-      margin-bottom: 12px;
+      flex: 1;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      h3 {
-        margin: 0;
-        font-size: 16px;
+      gap: 12px;
+      padding: 10px 16px;
+
+      .header-time {
+        font-size: 12px;
         font-weight: 500;
         color: var(--color-text-title);
+        font-variant-numeric: tabular-nums;
       }
-    }
-    .message-info {
-      display: flex;
-      gap: 20px;
-      flex-wrap: wrap;
-      .info-item {
+
+      .header-badges {
         display: flex;
         align-items: center;
-        gap: 4px;
-        .label {
+        gap: 8px;
+
+        .badge {
           font-size: 12px;
-          color: var(--color-text-light);
-          font-weight: 500;
+          padding: 3px 10px;
+          border-radius: 4px;
+          background: var(--color-bg-normal);
+          color: var(--color-text-default);
+          border: 1px solid var(--color-border-default);
+
+          &.retain {
+            background: var(--color-main-yellow);
+            border-color: var(--color-main-yellow);
+            color: #fff;
+          }
         }
-        .value {
-          font-size: 12px;
+      }
+
+      .header-tools {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-left: auto;
+
+        .search-input {
+          width: 200px;
+        }
+
+        .tool-icon {
+          font-size: 16px;
           color: var(--color-text-default);
-          max-width: 200px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+          cursor: pointer;
+          padding: 6px;
+          border-radius: 4px;
+          transition: all 0.15s ease;
+
+          &:hover {
+            color: var(--color-main-green);
+            background: var(--color-bg-normal);
+          }
+
+          &.is-disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+          }
         }
       }
     }
   }
+
   .json-content-wrapper {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 0;
   }
-  .json-content {
-    flex: 1;
-    min-height: 0;
-    background: var(--color-bg-normal);
-  }
-  .message-tree {
-    overflow: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .message-header {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    padding: 12px 16px;
-    background: var(--color-bg-primary);
-    border-bottom: 1px solid var(--color-border-default);
-    position: relative;
-    .header-left {
-      justify-self: start;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      .search-input {
-        width: 300px;
-        max-width: 100%;
-      }
-    }
-    .header-right {
-      justify-self: end;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .nav-icon {
-      font-size: 18px;
-      font-weight: 400;
-      color: var(--color-text-primary);
-      cursor: pointer;
-      transition: color 0.15s ease;
-      &:hover {
-        color: var(--color-main-green);
-      }
-      &.is-disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    }
-    .navigation-controls {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      justify-self: center;
-    }
-  }
+
   .json-container {
     padding: 16px;
     background: var(--color-bg-normal);
     flex: 1;
     overflow: auto;
   }
+
   .no-messages {
     flex: 1;
     display: flex;
diff --git a/web/src/assets/scss/element/element-reset.scss b/web/src/assets/scss/element/element-reset.scss
index a27d908a9..daa751697 100644
--- a/web/src/assets/scss/element/element-reset.scss
+++ b/web/src/assets/scss/element/element-reset.scss
@@ -76,7 +76,7 @@
 
 /* Button */
 .el-button--mini {
-  border-radius: 4px;
+  border-radius: 8px;
 }
 .el-button--outline {
   background: var(--color-bg-normal);
diff --git a/web/src/assets/scss/mixins.scss b/web/src/assets/scss/mixins.scss
index 26c46c3bb..1f3eeb2f0 100644
--- a/web/src/assets/scss/mixins.scss
+++ b/web/src/assets/scss/mixins.scss
@@ -14,27 +14,35 @@
   pre {
     white-space: pre-wrap;
     word-wrap: break-word;
+    font-size: 13px;
+    line-height: 1.6;
   }
   p {
     margin: 0px;
   }
   .left-info {
-    color: var(--color-text-left_info);
+    color: var(--color-text-title);
+    font-size: 13px;
+    font-weight: 500;
+    .qos {
+      color: var(--color-text-default);
+    }
   }
   .right-info {
     color: var(--color-text-right_info);
   }
   .topic {
-    margin-right: 16px;
+    margin-right: 20px;
   }
   .retain {
     margin-left: 16px;
-    font-size: 12px;
+    font-size: 11px;
     color: var(--color-text-active);
-    background-color: #7e848885;
-    padding: 0 4px;
-    border-radius: 4px;
+    background-color: var(--color-main-yellow);
+    padding: 2px 8px;
+    border-radius: 8px;
     float: right;
+    font-weight: 500;
   }
   .payload {
     display: inline-block;
@@ -42,63 +50,51 @@
     max-width: 85%;
     min-width: 20px;
     margin: 10px 0 0px 0px;
-    padding: 10px;
+    padding: 14px 16px;
     white-space: normal;
     word-break: break-all;
   }
   .time {
     color: var(--color-text-light);
     margin-bottom: 5px;
+    font-size: 12px;
   }
   .properties {
-    margin-top: 10px;
-    padding-top: 6px;
-    border-top-width: 1px;
-    border-top-style: dashed;
-    &:last-child {
-      padding-bottom: 10px;
-      border-bottom-width: 1px;
-      border-bottom-style: dashed;
-    }
+    margin-top: 12px;
+    padding-top: 10px;
     &.left {
-      color: var(--color-text-left_info);
-      border-top-color: var(--color-border-left_metainfo);
-      &:last-child {
-        border-bottom-color: var(--color-border-left_metainfo);
-      }
+      color: var(--color-text-default);
     }
     &.right {
       color: var(--color-text-right_info);
-      border-top-color: var(--color-text-right_metainfo);
-      &:last-child {
-        border-bottom-color: var(--color-border-right_metainfo);
-      }
     }
   }
   .user-properties {
-    margin-top: 10px;
-    padding: 6px 0;
+    margin-top: 12px;
+    padding: 10px 0;
     .key-value-editor.msg-item-props {
       .editor-header {
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        .editor-title {
+          font-weight: 600;
+          font-size: 13px;
+        }
       }
       .el-input.is-disabled .el-input__inner {
-        background-color: transparent;
+        background-color: var(--color-bg-msg-input);
       }
     }
     &.left {
       .key-value-editor.msg-item-props {
         .editor-title {
-          color: var(--color-text-left_info);
+          color: var(--color-text-title);
         }
         .el-input.is-disabled .el-input__inner {
-          color: var(--color-text-left_info);
-          border: 1px solid var(--color-border-left_metainfo);
+          color: var(--color-text-default);
+          border: 1px solid var(--color-border-default);
+          background-color: var(--color-bg-msg-input);
         }
       }
-      border: 1px dashed var(--color-border-left_metainfo);
-      border-right: none;
-      border-left: none;
     }
     &.right {
       .key-value-editor.msg-item-props {
@@ -110,9 +106,6 @@
           border: 1px solid var(--color-border-right_metainfo);
         }
       }
-      border: 1px dashed var(--color-border-right_metainfo);
-      border-right: none;
-      border-left: none;
     }
   }
 }
diff --git a/web/src/assets/scss/theme/dark.scss b/web/src/assets/scss/theme/dark.scss
index 48131a802..a8a8dd734 100644
--- a/web/src/assets/scss/theme/dark.scss
+++ b/web/src/assets/scss/theme/dark.scss
@@ -60,10 +60,10 @@ body.dark {
   --color-border-right_metainfo: #ffffff59;
 
   /* Shadow color */
-  --color-shadow-leftlist: #00000061;
-  --color-shadow-sendbtn: #2dc17769;
+  --color-shadow-leftlist: #00000038;
+  --color-shadow-sendbtn: transparent;
   --color-shadow-card: #00000059;
-  --color-shadow-message: #1f1f1f;
+  --color-shadow-message: transparent;
 
   @import './highlight/dark.scss';
 }
diff --git a/web/src/assets/scss/theme/light.scss b/web/src/assets/scss/theme/light.scss
index 3cad4c781..7a66d3a23 100644
--- a/web/src/assets/scss/theme/light.scss
+++ b/web/src/assets/scss/theme/light.scss
@@ -34,7 +34,7 @@ body.light {
   --color-text-light: #a2a9b0;
   --color-text-tips: #b4b4b4;
   --color-text-right_block: #34c388;
-  --color-text-right_info: #ffffffde;
+  --color-text-right_info: #ffffff;
   --color-text-left_info: #00000075;
   --color-text-active: #fff;
   --color-text-leftbar_icon: #83929b;
diff --git a/web/src/assets/scss/theme/night.scss b/web/src/assets/scss/theme/night.scss
index fb2e5c7a6..5d7bf22ff 100644
--- a/web/src/assets/scss/theme/night.scss
+++ b/web/src/assets/scss/theme/night.scss
@@ -60,10 +60,10 @@ body.night {
   --color-border-right_metainfo: #ffffff54;
 
   /* Shadow color */
-  --color-shadow-leftlist: #00000061;
-  --color-shadow-sendbtn: #2dc17769;
+  --color-shadow-leftlist: #00000038;
+  --color-shadow-sendbtn: transparent;
   --color-shadow-card: #00000085;
-  --color-shadow-message: #151515;
+  --color-shadow-message: transparent;
 
   @import './highlight/night-owl.scss';
 }
diff --git a/web/src/components/LeftPanel.vue b/web/src/components/LeftPanel.vue
index 015956638..4b88c1b99 100644
--- a/web/src/components/LeftPanel.vue
+++ b/web/src/components/LeftPanel.vue
@@ -18,7 +18,7 @@ export default class LeftPanel extends Vue {}
 .left-panel {
   & > div {
     position: fixed;
-    left: 401px;
+    left: 397px;
     z-index: 1;
     width: 280px;
     background: var(--color-bg-normal);
@@ -27,7 +27,7 @@ export default class LeftPanel extends Vue {}
     bottom: 0;
     padding-bottom: 42px;
     @media (min-width: 1920px) {
-      left: 521px;
+      left: 517px;
       width: 400px;
     }
   }
@@ -44,7 +44,7 @@ export default class LeftPanel extends Vue {}
       left: 0;
     }
     to {
-      left: 401px;
+      left: 397px;
     }
   }
   @media (min-width: 1920px) {
@@ -53,7 +53,7 @@ export default class LeftPanel extends Vue {}
         left: 0;
       }
       to {
-        left: 521px;
+        left: 517px;
       }
     }
   }
diff --git a/web/src/components/Leftbar.vue b/web/src/components/Leftbar.vue
index 5a0c79694..15ea458ae 100644
--- a/web/src/components/Leftbar.vue
+++ b/web/src/components/Leftbar.vue
@@ -78,17 +78,28 @@ export default class Leftbar extends Vue {
 <style lang="scss">
 @import '~@/assets/scss/variable.scss';
 
+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);
+  }
+}
+
 .leftbar {
   position: fixed;
-  width: 80px;
+  width: 76px;
   top: 0;
   bottom: 0;
-  background: linear-gradient(135deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
-  padding: 45px 0;
+  background: linear-gradient(180deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
+  padding: 40px 0 24px;
   z-index: 1001;
   display: flex;
   flex-direction: column;
   -webkit-app-region: drag;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
 
   & > .leftbar-top {
     flex: 3;
@@ -99,20 +110,44 @@ export default class Leftbar extends Vue {
 
   .leftbar-item {
     text-align: center;
-    margin-bottom: 25px;
+    margin-bottom: 12px;
     position: relative;
     a {
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-      display: inline-block;
+      height: 44px;
+      width: 44px;
+      line-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 12px;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: -12px;
+        top: 50%;
+        transform: translateY(-50%) scaleY(0);
+        width: 3px;
+        height: 20px;
+        background: var(--color-main-green);
+        border-radius: 0 2px 2px 0;
+        transition: transform 0.2s ease;
+      }
     }
     &.active a {
-      background-color: var(--color-bg-leftbar_item);
-      border-radius: 8px;
+      background: linear-gradient(135deg, var(--color-bg-leftbar_item) 0%, rgba(16, 185, 129, 0.15) 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      &::before {
+        transform: translateY(-50%) scaleY(1);
+      }
+      .iconfont {
+        color: var(--color-main-green);
+      }
     }
-    &.active a,
     a:hover {
+      background: var(--color-bg-leftbar_item);
+      transform: scale(1.05);
       .iconfont {
         color: var(--color-main-white);
       }
@@ -123,25 +158,36 @@ export default class Leftbar extends Vue {
   }
 
   .app-logo {
-    margin-bottom: 35px;
+    margin-bottom: 72px;
+    a {
+      &:hover {
+        background: transparent;
+        transform: none;
+      }
+    }
     img {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
+      transition: transform 0.3s ease;
+      &:hover {
+        transform: rotate(10deg) scale(1.1);
+      }
     }
   }
 
   .iconfont {
-    color: var(--color-text-light);
+    color: var(--color-text-leftbar_icon);
+    transition: color 0.2s ease;
   }
   .leftbar-top .iconfont {
-    font-size: 24px;
+    font-size: 22px;
   }
   .leftbar-bottom .iconfont {
-    font-size: 20px;
+    font-size: 18px;
   }
 
   @media (min-width: 1920px) {
-    width: 120px;
+    width: 116px;
   }
 }
 </style>
diff --git a/web/src/components/MessageList.vue b/web/src/components/MessageList.vue
index 269d70c1b..17b868ada 100644
--- a/web/src/components/MessageList.vue
+++ b/web/src/components/MessageList.vue
@@ -180,7 +180,7 @@ export default class MessageList extends Vue {
       width: 8px;
     }
     &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
+      border-radius: 8px;
       background: var(--color-bg-scrollbar);
       width: 8px;
     }
diff --git a/web/src/components/MsgLeftItem.vue b/web/src/components/MsgLeftItem.vue
index d31f075e5..54a80e9cc 100644
--- a/web/src/components/MsgLeftItem.vue
+++ b/web/src/components/MsgLeftItem.vue
@@ -72,7 +72,7 @@ export default class MsgLeftItem extends Vue {
   text-align: left;
   position: relative;
   .topic-color {
-    height: calc(100% - 44px);
+    height: calc(100% - 38px);
     display: inline-block;
     width: 4px;
     position: absolute;
@@ -81,9 +81,10 @@ export default class MsgLeftItem extends Vue {
     left: -4px;
   }
   .left-payload {
-    background: var(--color-main-grey);
+    background: var(--color-bg-messagebox);
     border-radius: 0px 10px 10px 10px;
     position: relative;
+    box-shadow: 0 1px 3px var(--color-shadow-message);
   }
   .left-payload,
   .left-time {
diff --git a/web/src/components/MsgRightItem.vue b/web/src/components/MsgRightItem.vue
index f46e96b1d..0cba4301f 100644
--- a/web/src/components/MsgRightItem.vue
+++ b/web/src/components/MsgRightItem.vue
@@ -69,6 +69,7 @@ export default class MsgrightItem extends Vue {
     background: var(--color-text-right_block);
     border-radius: 10px 0 10px 10px;
     text-align: left;
+    box-shadow: 0 1px 3px var(--color-shadow-sendbtn);
   }
   .right-payload,
   .right-time {
diff --git a/web/src/components/SubscriptionsList.vue b/web/src/components/SubscriptionsList.vue
index 74509cc50..8a9c4eaeb 100644
--- a/web/src/components/SubscriptionsList.vue
+++ b/web/src/components/SubscriptionsList.vue
@@ -702,7 +702,7 @@ export default class SubscriptionsList extends Vue {
     border-bottom: none;
     text-align: center;
     position: relative;
-    padding: 16px 16px 0 16px;
+    padding: 12px 16px;
     text-align: center;
     .hide-btn {
       font-size: 20px;
@@ -710,9 +710,24 @@ export default class SubscriptionsList extends Vue {
       top: 15px;
       right: 0px;
     }
+    .new-subs-btn {
+      width: 100%;
+      height: 36px;
+      border-radius: 8px;
+      border: 1px solid var(--color-main-green);
+      color: var(--color-main-green);
+      background: transparent;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      &:hover {
+        background: var(--color-light-green);
+      }
+      &:active {
+        transform: scale(0.98);
+      }
+    }
   }
   .el-card__body {
-    padding: 16px 16px 0 16px;
+    padding: 6px 16px;
     height: 100%;
     overflow: auto;
     .topics-item {
@@ -729,8 +744,13 @@ export default class SubscriptionsList extends Vue {
       -moz-user-select: none;
       -khtml-user-select: none;
       user-select: none;
-      transition: all 0.3s ease;
-      animation: subItem 0.2s ease-in-out;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      animation: subItem 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+      &:hover {
+        transform: translateX(2px);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+      }
       &.active {
         background: var(--color-bg-dark) !important;
         box-shadow: none;
@@ -738,11 +758,19 @@ export default class SubscriptionsList extends Vue {
         .qos {
           color: var(--color-text-active) !important;
         }
+        .topics-color-line {
+          background: var(--color-text-active) !important;
+        }
       }
       &.disabled {
         background: transparent !important;
         border: 1px solid var(--color-border-default);
+        box-shadow: none;
         cursor: not-allowed;
+        &:hover {
+          transform: none;
+          box-shadow: none;
+        }
         .topic,
         .qos {
           color: var(--color-text-light) !important;
@@ -761,6 +789,14 @@ export default class SubscriptionsList extends Vue {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
+        transition: height 0.2s ease;
+      }
+      &:hover .topics-color-line {
+        height: 32px;
+      }
+      &.active .topics-color-line,
+      &.active:hover .topics-color-line {
+        height: 24px;
       }
       .topic {
         max-width: 120px;
@@ -785,9 +821,14 @@ export default class SubscriptionsList extends Vue {
         height: 18px;
         text-align: center;
         line-height: 18px;
+        transition: transform 0.15s ease;
+        &:hover {
+          transform: scale(1.1);
+        }
         .el-icon-close,
         .el-icon-loading {
           color: var(--color-text-active);
+          font-size: 10px;
         }
       }
       &:hover {
@@ -799,10 +840,12 @@ export default class SubscriptionsList extends Vue {
   }
   @keyframes subItem {
     from {
-      top: 100px;
+      opacity: 0;
+      transform: translateY(8px);
     }
     to {
-      top: 0px;
+      opacity: 1;
+      transform: translateY(0);
     }
   }
 }
@@ -897,7 +940,7 @@ export default class SubscriptionsList extends Vue {
   background: var(--color-bg-popover);
   text-align: center;
   min-width: 120px;
-  border-radius: 4px;
+  border-radius: 8px;
   .popper__arrow::after {
     bottom: 0px !important;
     border-top-color: var(--color-bg-popover) !important;
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index a0c461f33..3c73e7769 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -56,30 +56,30 @@ export default class Home extends Vue {
   }
   .right-topbar {
     position: fixed;
-    left: 401px;
+    left: 397px;
     right: 0;
     z-index: 3;
     background: var(--color-bg-normal);
   }
   .rightbar {
-    margin-left: 81px;
+    margin-left: 76px;
     height: 100%;
     background-color: var(--color-bg-primary);
   }
   .right-content {
-    margin-left: 401px;
+    margin-left: 397px;
     height: 100%;
     background-color: var(--color-bg-primary);
   }
   @media (min-width: 1920px) {
     .right-topbar {
-      left: 521px;
+      left: 517px;
     }
     .rightbar {
-      margin-left: 121px;
+      margin-left: 116px;
     }
     .right-content {
-      margin-left: 521px;
+      margin-left: 517px;
     }
   }
 }
diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
index 3a6502b32..90a80feae 100644
--- a/web/src/views/connections/ConnectionForm.vue
+++ b/web/src/views/connections/ConnectionForm.vue
@@ -10,19 +10,21 @@
         <h2>{{ oper === 'create' ? $t('common.new') : $t('common.edit') }}</h2>
       </div>
       <div class="tail">
-        <a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
-          {{ $t('connections.connectBtn') }}
-        </a>
-        <el-dropdown trigger="click" @command="handleActionCommand">
-          <a href="javascript:;">
-            <i class="el-icon-arrow-down"></i>
+        <div class="connect-btn-group">
+          <a href="javascript:;" @click="handleSave('connect')" class="connect-btn">
+            {{ $t('connections.connectBtn') }}
           </a>
-          <el-dropdown-menu class="connection-oper-item" slot="dropdown">
-            <el-dropdown-item command="save">
-              <i class="iconfont icon-save"></i>{{ $t('common.saveOnly') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+          <el-dropdown trigger="click" @command="handleActionCommand">
+            <a href="javascript:;" class="dropdown-btn">
+              <i class="el-icon-arrow-down"></i>
+            </a>
+            <el-dropdown-menu class="connection-oper-item" slot="dropdown">
+              <el-dropdown-item command="save">
+                <i class="iconfont icon-save"></i>{{ $t('common.saveOnly') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
     </div>
 
@@ -849,11 +851,45 @@ export default class ConnectionCreate extends Vue {
   .topbar {
     -webkit-app-region: drag;
     .tail {
-      a {
-        padding: 0 12px;
-      }
-      .connect-btn {
-        border-right: 1px solid var(--color-border-default);
+      .connect-btn-group {
+        display: flex;
+        align-items: center;
+        background: var(--color-main-green);
+        border-radius: 8px;
+        overflow: hidden;
+
+        .connect-btn {
+          padding: 0 16px;
+          height: 32px;
+          line-height: 32px;
+          color: #fff;
+          font-size: 13px;
+          font-weight: 500;
+          transition: background 0.2s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+          }
+        }
+
+        .dropdown-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          height: 32px;
+          border-left: 1px solid rgba(255, 255, 255, 0.2);
+          color: #fff;
+          transition: background 0.2s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+          }
+
+          i {
+            font-size: 12px;
+          }
+        }
       }
     }
   }
diff --git a/web/src/views/connections/ConnectionsDetail.vue b/web/src/views/connections/ConnectionsDetail.vue
index f564c7375..97566a13b 100644
--- a/web/src/views/connections/ConnectionsDetail.vue
+++ b/web/src/views/connections/ConnectionsDetail.vue
@@ -490,7 +490,7 @@ export default class ConnectionsDetail extends Vue {
   }
 
   get marginLeft(): string {
-    const left = this.showSubs ? (this.largeDesktop ? '920px' : '680px') : this.largeDesktop ? '521px' : '401px'
+    const left = this.showSubs ? (this.largeDesktop ? '916px' : '676px') : this.largeDesktop ? '517px' : '397px'
     return left
   }
 
@@ -1228,7 +1228,7 @@ export default class ConnectionsDetail extends Vue {
         background: var(--color-bg-normal);
         border-bottom: 1px solid var(--color-border-default);
         position: fixed;
-        left: 401px;
+        left: 397px;
         right: 0;
         z-index: 1;
         transition: all 0.4s;
@@ -1265,7 +1265,7 @@ export default class ConnectionsDetail extends Vue {
           }
         }
         @media (min-width: 1920px) {
-          left: 521px;
+          left: 517px;
           .message-type {
             .received-type-select {
               margin-left: 420px;
diff --git a/web/src/views/connections/ConnectionsList.vue b/web/src/views/connections/ConnectionsList.vue
index 9be84ca59..f4b9e326b 100644
--- a/web/src/views/connections/ConnectionsList.vue
+++ b/web/src/views/connections/ConnectionsList.vue
@@ -9,29 +9,28 @@
         @click="handleSelectConnection(item)"
         @contextmenu.prevent="handleContextMenu(item, $event)"
       >
-        <div class="item-left">
-          <div
-            :class="[
-              'connection-status',
-              {
-                online: activeConnection[item.id] ? activeConnection[item.id].client.connected : false,
-              },
-            ]"
-          ></div>
-          <div class="client-info">
-            <el-tooltip
-              :effect="theme !== 'light' ? 'light' : 'dark'"
-              :disabled="`${item.name}@${item.host}:${item.port}`.length < 26"
-              :content="`${item.name}@${item.host}:${item.port}`"
-              :open-delay="500"
-              placement="top"
+        <div class="client-info">
+          <el-tooltip
+            :effect="theme !== 'light' ? 'light' : 'dark'"
+            :disabled="`${item.name}@${item.host}:${item.port}`.length < 26"
+            :content="`${item.name}@${item.host}:${item.port}`"
+            :open-delay="500"
+            placement="top"
+          >
+            <div
+              :class="[
+                'client-name',
+                {
+                  online: activeConnection[item.id] ? activeConnection[item.id].client.connected : false,
+                },
+              ]"
             >
-              <div class="client-name">{{ item.name }}@{{ item.host }}:{{ item.port }}</div>
-            </el-tooltip>
-          </div>
-          <div v-if="item.ssl" class="ssl-tag">
-            <span>SSL</span>
-          </div>
+              {{ item.name }}@{{ item.host }}:{{ item.port }}
+            </div>
+          </el-tooltip>
+        </div>
+        <div v-if="item.ssl" class="ssl-tag">
+          <span>SSL</span>
         </div>
         <div v-if="unreadMessageCount[item.id] > 0" class="new-msg-count">
           {{ unreadMessageCount[item.id] }}
@@ -169,9 +168,11 @@ export default class ConnectionsList extends Vue {
       background-color: var(--color-bg-item);
     }
     .client-info {
-      display: inline-block;
-      margin-left: 8px;
+      display: flex;
+      align-items: center;
+      margin-left: 0;
       .client-name {
+        display: block;
         font-size: $font-size--body;
         font-weight: 500;
         color: var(--color-text-title);
@@ -179,6 +180,9 @@ export default class ConnectionsList extends Vue {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        &.online {
+          color: var(--color-main-green);
+        }
         @media (min-width: 1920px) {
           max-width: 350px;
         }
@@ -201,32 +205,19 @@ export default class ConnectionsList extends Vue {
         color: var(--color-text-active);
       }
     }
-    .item-left {
-      height: 28px;
-      line-height: 28px;
-    }
     .new-msg-count {
+      position: absolute;
+      right: 8px;
       min-width: 18px;
       height: 18px;
       line-height: 18px;
-      background: var(--color-main-green);
+      background: var(--color-bg-unreadmsg);
       border-radius: 9px;
-      padding: 0 6px;
-      color: #fff;
+      padding: 0 5px;
+      color: var(--color-text-active);
       font-size: $font-size--tips;
       text-align: center;
-    }
-    .connection-status {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-      background: var(--color-bg-item_status);
-      vertical-align: top;
-      margin-top: 10px;
-      &.online {
-        background: var(--color-main-green);
-      }
+      box-shadow: -8px 0 12px 4px var(--color-bg-item);
     }
     &:hover {
       background: var(--color-bg-item);
diff --git a/web/src/views/connections/index.vue b/web/src/views/connections/index.vue
index 4bdc7ec2c..c14c762c4 100644
--- a/web/src/views/connections/index.vue
+++ b/web/src/views/connections/index.vue
@@ -131,7 +131,7 @@ export default class Connections extends Vue {
   position: fixed;
   box-shadow: 1px 0px 8px 0px var(--color-shadow-leftlist);
   width: 320px;
-  left: 81px;
+  left: 76px;
   top: 0;
   bottom: 0;
   overflow-x: hidden;
@@ -139,7 +139,7 @@ export default class Connections extends Vue {
   border-right: 1px solid var(--color-border-default);
   background-color: var(--color-bg-normal);
   @media (min-width: 1920px) {
-    left: 121px;
+    left: 116px;
     width: 400px;
   }
   .no-data {