diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 9bf8bbe35..b54a1a0ac 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -715,6 +715,7 @@ const message = {
         emptyTerminal: 'No terminal is currently connected',
     },
     logs: {
+        panelLog: 'Panel logs',
         operation: 'Operation logs',
         login: 'Login logs',
         system: 'System logs',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index b7357d8d2..b4a622c09 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -720,6 +720,7 @@ const message = {
         emptyTerminal: '暂无终端连接',
     },
     logs: {
+        panelLog: '面板日志',
         operation: '操作日志',
         login: '登录日志',
         loginIP: '登录 IP',
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 98f62fcf9..c267aa88f 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -323,4 +323,9 @@
         width: 300px;
         height: 300px;
     }
+}
+
+.no-active-button {
+    background: none;
+    border: none;
 }
\ No newline at end of file
diff --git a/frontend/src/views/log/index.vue b/frontend/src/views/log/index.vue
index 259b75595..5bf9d839c 100644
--- a/frontend/src/views/log/index.vue
+++ b/frontend/src/views/log/index.vue
@@ -14,17 +14,9 @@ import RouterButton from '@/components/router-button/index.vue';
 
 const buttons = [
     {
-        label: i18n.global.t('logs.operation'),
+        label: i18n.global.t('logs.panelLog'),
         path: '/logs/operation',
     },
-    {
-        label: i18n.global.t('logs.login'),
-        path: '/logs/login',
-    },
-    {
-        label: i18n.global.t('logs.system'),
-        path: '/logs/system',
-    },
     {
         label: i18n.global.t('ssh.loginLogs'),
         path: '/logs/ssh',
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index da0f1f44d..457e009e0 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -4,8 +4,14 @@
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
-                        <el-button type="primary" plain @click="onClean()">
-                            {{ $t('logs.deleteLogs') }}
+                        <el-button class="no-active-button" @click="onChangeRoute('OperationLog')">
+                            {{ $t('logs.operation') }}
+                        </el-button>
+                        <el-button type="primary" @click="onChangeRoute('LoginLog')">
+                            {{ $t('logs.login') }}
+                        </el-button>
+                        <el-button class="no-active-button" @click="onChangeRoute('SystemLog')">
+                            {{ $t('logs.system') }}
                         </el-button>
                     </el-col>
                     <el-col :span="8">
@@ -32,6 +38,9 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
+                <el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
+                    {{ $t('logs.deleteLogs') }}
+                </el-button>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
@@ -73,6 +82,8 @@ import { cleanLogs, getLoginLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from '@vue/runtime-core';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const loading = ref();
 const data = ref();
@@ -104,6 +115,10 @@ const search = async () => {
         });
 };
 
+const onChangeRoute = async (addr: string) => {
+    router.push({ name: addr });
+};
+
 const onClean = async () => {
     let params = {
         header: i18n.global.t('logs.deleteLogs'),
@@ -123,13 +138,3 @@ onMounted(() => {
     search();
 });
 </script>
-
-<style scoped lang="scss">
-.pre {
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    word-wrap: break-word;
-}
-</style>
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 0bf6f8665..351344712 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -4,8 +4,14 @@
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
-                        <el-button type="primary" plain @click="onClean()">
-                            {{ $t('logs.deleteLogs') }}
+                        <el-button type="primary" @click="onChangeRoute('OperationLog')">
+                            {{ $t('logs.operation') }}
+                        </el-button>
+                        <el-button class="no-active-button" @click="onChangeRoute('LoginLog')">
+                            {{ $t('logs.login') }}
+                        </el-button>
+                        <el-button class="no-active-button" @click="onChangeRoute('SystemLog')">
+                            {{ $t('logs.system') }}
                         </el-button>
                     </el-col>
                     <el-col :span="8">
@@ -44,6 +50,9 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
+                <el-button type="primary" style="margin-left: 10px" plain @click="onClean()">
+                    {{ $t('logs.deleteLogs') }}
+                </el-button>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
@@ -106,6 +115,8 @@ import { onMounted, reactive, ref } from '@vue/runtime-core';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const loading = ref();
 const data = ref();
@@ -155,6 +166,10 @@ const onClean = async () => {
     confirmDialogRef.value!.acceptParams(params);
 };
 
+const onChangeRoute = async (addr: string) => {
+    router.push({ name: addr });
+};
+
 const loadDetail = (log: string) => {
     if (log.indexOf('[enable]') !== -1) {
         log = log.replace('[enable]', '[' + i18n.global.t('commons.button.enable') + ']');
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index f8902910c..1aadb8d0e 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -1,6 +1,21 @@
 <template>
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.system')">
+            <template #toolbar>
+                <el-row>
+                    <el-col :span="16">
+                        <el-button class="no-active-button" @click="onChangeRoute('OperationLog')">
+                            {{ $t('logs.operation') }}
+                        </el-button>
+                        <el-button class="no-active-button" @click="onChangeRoute('LoginLog')">
+                            {{ $t('logs.login') }}
+                        </el-button>
+                        <el-button type="primary" @click="onChangeRoute('SystemLog')">
+                            {{ $t('logs.system') }}
+                        </el-button>
+                    </el-col>
+                </el-row>
+            </template>
             <template #main>
                 <codemirror
                     :autofocus="true"
@@ -30,6 +45,8 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { nextTick, onMounted, ref, shallowRef } from 'vue';
 import { LoadFile } from '@/api/modules/files';
 import { loadBaseDir } from '@/api/modules/setting';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const loading = ref();
 const extensions = [javascript(), oneDark];
@@ -59,6 +76,10 @@ const loadSystemlogs = async () => {
         });
 };
 
+const onChangeRoute = async (addr: string) => {
+    router.push({ name: addr });
+};
+
 onMounted(() => {
     loadSystemlogs();
 });