diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6a5656811..f15c9a099 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -258,7 +258,7 @@ li{
   border-radius: 4px;
   display: inline-block;
 }
-.nz-btn-group-size-normal {
+.nz-btn-group-size-small {
   max-height: 24px;
 }
 .nz-btn-group .nz-btn:first-child:not(:last-child) {
@@ -268,7 +268,6 @@ li{
 .nz-btn-group .nz-btn:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-left: 1px solid rgba(162,162,162,0.5);
 }
 .nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
   border-radius: 0;
@@ -286,6 +285,16 @@ li{
 .nz-btn-group .nz-input-group-middle input {
   border-radius: 0px !important;
   border: none;
+  border-right: 1px solid rgba(162,162,162,0.50) !important;
+}
+.nz-btn-group .nz-input-group-left input {
+  border-radius: 4px 0px 0px 4px !important;
+  border: none;
+  border-right: 1px solid rgba(162,162,162,0.50) !important;
+}
+.nz-btn-group .nz-input-group-right input {
+  border-radius: 0px 4px 4px 0px !important;
+  border: none;
 }
 /* end--按钮组件*/
 
@@ -306,14 +315,17 @@ li{
 .input-x-mini-24 .el-input__inner {
   height: 24px;
   line-height: 24px;
-  padding: 0 5px;
-  font-size: 12px;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.input-x-mini-24 .el-input__icon {
+  line-height: 24px;
 }
 .input-x-mini-26 .el-input__inner {
   height: 26px;
   line-height: 26px;
   padding: 0 5px;
-  font-size: 12px;
+  font-size: 14px;
 }
 .el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/
   right: 20px;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index b35cd3359..b3653c20f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -19,7 +19,7 @@
             <i slot="suffix" class="el-input__icon el-icon-search" style="float:right" @click="focusInput"></i>
           </el-input>
         </div>
-        <div class="margin-r-20 nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
+        <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
           <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
           v-model="formatTime"loading
           type="datetime"
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ff70b1292..8ddc6617b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -589,11 +589,12 @@ const en = {
       models:'Models',
       modelTip:'please select models',
       createMib:'Create Mib',
-      mibFile:'Mib File',
+      mibFiles:'Mib Files',
       uploadTip:'please upload mib file',
       requiredMibFile:'mib file is required',
       vendor:'Vendor',
       type:'Type',
+      mibBrowser: 'Mib browser',
     },
     system:{
       system:'System',
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index c76fd5525..70fa9fabf 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -32,7 +32,7 @@
               <div class="right-child-box-title">{{$t('asset.asset')}}</div>
               <!--end--标题-->
               <!--begin--搜索框-->
-              <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
+              <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
                 <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
                   <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
                   <span>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 4055534a2..8bba96198 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -56,7 +56,7 @@
                   <!---->
                   <div class="pop-item-wider " >
                     <!-- begin--搜索框-->
-                    <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
+                    <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
                       <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
                         <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
                         <span>
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index 866acbc17..da455b8bf 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -33,82 +33,85 @@
       </div>
     </div>
     <div class="content-right">
-      <div class="top-tools">
-        <div class="nz-tab" style="right: 100%; transform: translateX(100%); position: absolute;width: 200px;">
-          <div class="nz-tab-item-box" @click="" id="module-type-1">
-            <div class="nz-tab-item nz-tab-item-active">Files</div>
-          </div>
-          <div @click="" class="nz-tab-item-box" id="module-type-2">
-            <div class="nz-tab-item">Browser</div>
-          </div>
-        </div>
-        <div class="top-tool-main-right">
-          <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
-                  id="mib-add">
-            <i class="nz-icon-create-square nz-icon"></i>
-          </button>
-        </div>
-      </div>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table>
-        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
-                         :key="`col-${index}`" :label="item.label">
-          <template slot-scope="scope" :column="item">
-            <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
-            <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
-              <span class="clickable" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
-            </template>
-            <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
-              <div style="height: 100%">
-                <el-scrollbar style="height: 100%">
-                  <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
-                  <el-popover trigger="hover" placement="top" >
-                    <div>
-                      <div>
-                        <span>{{$t('overall.name')}}:</span>
-                        <span>{{n.name}}</span>
-                      </div>
-                      <div>
-                        <span>{{$t('config.mib.vendor')}}:</span>
-                        <span>{{n.vendor}}</span>
-                      </div>
-                      <div>
-                        <span>{{$t('config.mib.type')}}:</span>
-                        <span>{{n.type}}</span>
-                      </div>
-                    </div>
-                    <template slot="reference">
-                      <div  class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
-                      <div  class="detail-item-content" v-else>{{n.name}}</div>
-                    </template>
-                  </el-popover>
-                </div>
-                </el-scrollbar>
-              </div>
-            </template>
-            <div v-else-if="item.prop == 'option'" class="content-right-options">
-<!--              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
-<!--              &nbsp;-->
-              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+      <template v-if="showTab == 'file'">
+        <div class="top-tools">
+          <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
+            <div class="nz-tab-item-box" id="module-type-1">
+              <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
             </div>
-            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-            <template v-else>-</template>
-          </template>
-        </el-table-column>
-        <el-table-column :resizable="false" width="28">
-          <template slot="header" slot-scope="scope">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
+            <div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
+              <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
+            </div>
+          </div>
+          <div class="top-tool-main-right">
+            <div class="top-tool-search">
+              <search-input :searchMsg="searchMsg" @search="search"></search-input>
+            </div>
+            <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
+                    id="mib-add">
+              <i class="nz-icon-create-square nz-icon"></i>
+            </button>
+          </div>
+        </div>
+        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table>
+          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
+                           :key="`col-${index}`" :label="item.label">
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
+              <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
+                <span class="clickable" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
+              </template>
+              <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
+                <div style="height: 100%">
+                  <el-scrollbar style="height: 100%">
+                    <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
+                    <el-popover trigger="hover" placement="top" >
+                      <div>
+                        <div>
+                          <span>{{$t('overall.name')}}:</span>
+                          <span>{{n.name}}</span>
+                        </div>
+                        <div>
+                          <span>{{$t('config.mib.vendor')}}:</span>
+                          <span>{{n.vendor}}</span>
+                        </div>
+                        <div>
+                          <span>{{$t('config.mib.type')}}:</span>
+                          <span>{{n.type}}</span>
+                        </div>
+                      </div>
+                      <template slot="reference">
+                        <div  class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
+                        <div  class="detail-item-content" v-else>{{n.name}}</div>
+                      </template>
+                    </el-popover>
+                  </div>
+                  </el-scrollbar>
+                </div>
+              </template>
+              <div v-else-if="item.prop == 'option'" class="content-right-options">
+  <!--              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
+  <!--              &nbsp;-->
+                <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                &nbsp;
+                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+              </div>
+              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
+          <el-table-column :resizable="false" width="28">
+            <template slot="header" slot-scope="scope">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <i class="nz-icon nz-icon-gear"></i>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
+      </template>
+      <mib-browser :showTab="showTab" v-show="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
     </div>
 
     <element-set
@@ -125,10 +128,17 @@
 <script>
   import axios from 'axios'
   import bus from '../../../libs/bus';
+  import mibBrowser from './mibBrowser';
+
   export default {
     name: "mib",
+    components: {
+      'mib-browser': mibBrowser
+    },
     data() {
       return {
+        showTab: 'file', //file/browser
+
         tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         mib: {
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 2122083ad..bde2ccedb 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -1,13 +1,312 @@
 <template>
-
+  <span class="mib-browser">
+    <div class="top-tools">
+      <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
+        <div class="nz-tab-item-box" @click="toFileTab" id="module-type-3">
+          <div class="nz-tab-item">{{$t("config.mib.mibFiles")}}</div>
+        </div>
+        <div class="nz-tab-item-box" id="module-type-4">
+          <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibBrowser")}}</div>
+        </div>
+      </div>
+      <div class="top-tool-main-right">
+        <div class="top-tool-search">
+          <el-input size="mini" v-model="searchParam.host" placeholder="Host"></el-input>
+        </div>
+        <div class="top-tool-search margin-l-20 oid-input">
+          <el-input size="mini" v-model="searchParam.oid" placeholder="OID"></el-input>
+        </div>
+        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-l-20">
+          <el-select class="nz-input-group-left input-x-mini-24 operation" v-model="searchParam.operation">
+            <el-option v-for="item in operationData" :key="item" :value="item"></el-option>
+          </el-select><button
+          @click="advancedShow = true" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="browser-advanced"><i class="el-icon-more"></i></button><button
+          @click="search" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="browser-go">Go</button>
+        </div>
+      </div>
+    </div>
+    <div class="mib-browser-box">
+      <el-row style="height: 100%;">
+        <!--左半部分-->
+        <el-col :span="7" class="mib-browser-left">
+          <!--tree-->
+          <el-scrollbar class="mib-browser-tree" ref="scrollbar">
+            <el-tree
+              ref="walkTree"
+              node-key="objectID"
+              :props="{label: 'name', children: 'subTree', disabled: disabledNode}"
+              :data="walkData"
+              :expand-on-click-node="false"
+              check-on-click-node
+              check-strictly
+              @node-click="showDetail"
+            >
+              <div slot-scope="{node, data}" class="walk-tree-item">
+                <span v-if="!data.type"><i class="el-icon-reading"></i></span>
+                <span v-else>
+                  <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+                  <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
+                  <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+                  <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+                  <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
+                </span>
+                {{data.name}}
+              </div>
+            </el-tree>
+          </el-scrollbar>
+          <!--detail-->
+          <div class="mib-browser-detail">
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Name</el-col>
+              <el-col :span="19">{{currentWalk.name}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">OID</el-col>
+              <el-col :span="19">{{currentWalk.objectID}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">MIB</el-col>
+              <el-col :span="19">{{mibName(currentWalk.objectID)}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Syntax</el-col>
+              <el-col :span="19">{{currentWalk.syntax}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Access</el-col>
+              <el-col :span="19">{{currentWalk.access}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Status</el-col>
+              <el-col :span="19">{{currentWalk.status}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Indexes</el-col>
+              <el-col :span="19">{{currentWalk.index}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Description</el-col>
+              <el-col :span="19">
+                <el-scrollbar style="height: 100%;">
+                  <div class="mib-browser-detail-description">{{currentWalk.description}}</div>
+                </el-scrollbar>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <!--右半部分-->
+        <el-col :span="17" class="mib-browser-right">
+          <div class="mib-browser-table-title">
+            <span>Result table</span>
+            <span>
+              <span class="mib-browser-table-op" :title="$t('overall.exportExcel')"><i class="el-icon-download"></i></span>
+              <span @click="clearResult" class="mib-browser-table-op" :title="$t('overall.clear')"><i class="el-icon-close"></i></span>
+            </span>
+          </div>
+          <div class="mib-browser-table">
+            <el-row class="mib-browser-table-header">
+              <el-col :span="8">Name/OID</el-col>
+              <el-col :span="9">Value</el-col>
+              <el-col :span="3">Type</el-col>
+              <el-col :span="4">IP:Port</el-col>
+            </el-row>
+            <el-row class="mib-browser-table-tr" v-for="item, index in resultData" :key="index">
+              <el-col :span="8">{{item.name ? item.name : item.oid}}</el-col>
+              <el-col :span="9">{{item.value}}</el-col>
+              <el-col :span="3">{{item.type}}</el-col>
+              <el-col :span="4">{{item.ip + (item.port ? ":" + item.port : "")}}</el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </span>
 </template>
 
 <script>
   export default {
-    name: "mibBrowser"
+    name: "mibBrowser",
+    props: {
+      showTab: String,
+    },
+    data() {
+      return {
+        searchParam: {
+          host: '',
+          port: 161,
+          oid: '',
+          operation: 'get'
+        },
+        operationData: ['get', 'walk', 'getnext', 'set'],
+        advancedShow: false,
+
+        walkData: [],
+        currentWalk: {name: '', objectID: '', syntax: '', access: '', status: '', index: '', description: ''},
+        resultData: []
+      }
+    },
+    computed: {
+      mibName() {
+        return (value) => {
+          return value ? this.getMibName(value) : "";
+        }
+      }
+    },
+    methods: {
+      toFileTab() {
+        this.$emit("toFileTab");
+      },
+      showDetail(data, node) {
+        this.currentWalk = data;
+      },
+      disabledNode(data) {
+        if (data.objectID) {
+          return false;
+        }
+        return true;
+      },
+      getMibName(oid) {
+        let node = this.$refs.walkTree.getNode(oid);
+        let mibName = getMibName(node);
+        function getMibName(n) {
+          if (n.parent && n.parent.parent) {
+            return getMibName(n.parent);
+          } else if (n.parent) {
+            return n.data.name;
+          } else {
+            return "";
+          }
+        }
+        if (mibName) {
+          return mibName;
+        } else {
+          return "";
+        }
+      },
+      getWalkData() {
+        this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            let obj = JSON.parse(response.data);
+            this.walkData = [];
+            for (let item in obj) {
+              this.walkData.push({name: item, subTree: obj[item]});
+            }
+          }
+        });
+      },
+      search() {
+        this.$get('mib/browser').then(response => {
+          if (response.code === 200) {
+            this.resultData = response.data.list;
+          }
+        });
+      },
+      clearResult() {
+        this.resultData = [];
+      }
+    },
+    mounted() {
+      this.getWalkData();
+    }
   }
 </script>
 
-<style scoped>
+<style lang="scss">
+.mib-browser {
+  .top-tool-search .el-input__inner {
+    height: 25px;
+    line-height: 25px;
+  }
+  .operation {
+    width: 90px;
+  }
+  .oid-input {
+    width: 500px;
+  }
 
+  .mib-browser-box {
+    border: 1px solid #D8D8D8;
+    border-radius: 4px;
+    height: calc(100% - 55px);
+    width: 100%;
+  }
+
+  .mib-browser-left {
+    border-right: 2px solid #D8D8D8;
+    height: 100%;
+  }
+  .mib-browser-tree {
+    height: calc(66% - 1px);
+    background-color: white;
+    border-radius: 4px 0 0 0;
+    border-bottom: 2px solid #dcdcdc;
+    font-size: 14px;
+  }
+  .mib-browser-detail {
+    height: 34%;
+  }
+  .mib-browser-detail-row {
+    line-height: 25px;
+    background-color: white;
+    border-bottom: 1px solid #D8D8D8;
+    font-size: 14px;
+  }
+  .mib-browser-detail-row .el-col:first-of-type {
+    color: #666;
+  }
+  .mib-browser-detail-row:not(:last-of-type) {
+    border-bottom: 1px solid #D8D8D8;
+    height: 25px;
+  }
+  .mib-browser-detail-row:last-of-type {
+    height: calc(100% - 175px);
+  }
+  .mib-browser-detail-row:last-of-type .el-col {
+    height: 100%;
+  }
+  .mib-browser-detail-row .el-col {
+    padding: 0 5px
+  }
+  .mib-browser-detail-row .el-col:first-of-type {
+    border-right: 1px solid #D8D8D8;
+  }
+  .mib-browser-detail-row:last-of-type .el-col:last-of-type {
+    padding-right: 0;
+  }
+  .mib-browser-detail-description {
+    padding: 0 14px 0 0;
+  }
+  .mib-browser-table-title {
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+    border-bottom: 1px solid #D8D8D8;
+    padding: 0 5px 0 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .mib-browser-table-op {
+    display: inline-block;
+    margin: 0 5px;
+    cursor: pointer;
+  }
+  .mib-browser-table-header .el-col {
+    color: #666;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-bottom: 1px solid #D8D8D8;
+  }
+  .mib-browser-table-header .el-col:not(:last-of-type), .mib-browser-table-tr .el-col:not(:last-of-type) {
+    border-right: 1px solid #D8D8D8;
+  }
+  .mib-browser-table-tr .el-col {
+    border-bottom: 1px solid #D8D8D8;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 4px;
+    font-size: 14px;
+    background-color: white;
+  }
+}
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6d148fe64..011eaa619 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -49,7 +49,7 @@
             </div>
           </div>
 
-          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
+          <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20">
             <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
               <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>