diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 779cac84d..9ec920ae5 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -188,10 +188,10 @@ html {
     width: 400px;
     text-align: center;
     font-size: 14px;
+    z-index: 1;
     .bt {
         margin-top: -2px;
     }
-    z-index: 1;
 }
 
 .table-button {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 5ddc38298..ded3dbd0d 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -1205,6 +1205,7 @@ onMounted(() => {
 .right-section {
     display: flex;
     align-items: center;
+    gap: 1rem;
 }
 
 .left-section > *:not(:first-child) {
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 8e522a581..fb41a8e15 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -21,36 +21,32 @@
                 </div>
             </template>
             <template #search>
-                <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
-                    <template #prefix>{{ $t('logs.resource') }}</template>
-                    <el-option :label="$t('commons.table.all')" value=""></el-option>
-                    <el-option :label="$t('logs.detail.apps')" value="apps"></el-option>
-                    <el-option :label="$t('logs.detail.websites')" value="websites"></el-option>
-                    <el-option :label="$t('logs.detail.runtimes')" value="runtimes"></el-option>
-                    <el-option :label="$t('logs.detail.databases')" value="databases"></el-option>
-                    <el-option :label="$t('logs.detail.containers')" value="containers"></el-option>
-                    <el-option :label="$t('logs.detail.cronjobs')" value="cronjobs"></el-option>
-                    <el-option :label="$t('logs.detail.files')" value="files"></el-option>
-                    <el-option :label="$t('logs.detail.hosts')" value="hosts"></el-option>
-                    <el-option :label="$t('logs.detail.process')" value="process"></el-option>
-                    <el-option :label="$t('logs.detail.logs')" value="logs"></el-option>
-                    <el-option :label="$t('logs.detail.settings')" value="settings"></el-option>
-                </el-select>
-                <el-select
-                    v-model="searchStatus"
-                    @change="search()"
-                    clearable
-                    style="margin-left: 10px"
-                    class="p-w-200"
-                >
-                    <template #prefix>{{ $t('commons.table.status') }}</template>
-                    <el-option :label="$t('commons.table.all')" value=""></el-option>
-                    <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>
+                <div class="flex flex-wrap gap-2 sm:gap-4 items-center">
+                    <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
+                        <template #prefix>{{ $t('logs.resource') }}</template>
+                        <el-option :label="$t('commons.table.all')" value=""></el-option>
+                        <el-option :label="$t('logs.detail.apps')" value="apps"></el-option>
+                        <el-option :label="$t('logs.detail.websites')" value="websites"></el-option>
+                        <el-option :label="$t('logs.detail.runtimes')" value="runtimes"></el-option>
+                        <el-option :label="$t('logs.detail.databases')" value="databases"></el-option>
+                        <el-option :label="$t('logs.detail.containers')" value="containers"></el-option>
+                        <el-option :label="$t('logs.detail.cronjobs')" value="cronjobs"></el-option>
+                        <el-option :label="$t('logs.detail.files')" value="files"></el-option>
+                        <el-option :label="$t('logs.detail.hosts')" value="hosts"></el-option>
+                        <el-option :label="$t('logs.detail.process')" value="process"></el-option>
+                        <el-option :label="$t('logs.detail.logs')" value="logs"></el-option>
+                        <el-option :label="$t('logs.detail.settings')" value="settings"></el-option>
+                    </el-select>
+                    <el-select v-model="searchStatus" @change="search()" clearable class="p-w-200">
+                        <template #prefix>{{ $t('commons.table.status') }}</template>
+                        <el-option :label="$t('commons.table.all')" value=""></el-option>
+                        <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()">
+                        {{ $t('logs.deleteLogs') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 3b258920e..173c9f2c8 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -17,11 +17,11 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select class="float-left p-w-200" v-model="logConfig.name" @change="search()">
-                    <template #prefix>{{ $t('commons.button.log') }}</template>
-                    <el-option v-for="(item, index) in fileList" :key="index" :label="item" :value="item" />
-                </el-select>
-                <div class="watchCheckbox">
+                <div class="flex flex-wrap gap-2 sm:gap-4">
+                    <el-select class="p-w-200" v-model="logConfig.name" @change="search()">
+                        <template #prefix>{{ $t('commons.button.log') }}</template>
+                        <el-option v-for="(item, index) in fileList" :key="index" :label="item" :value="item" />
+                    </el-select>
                     <el-checkbox border @change="changeTail" v-model="isWatch">
                         {{ $t('commons.button.watch') }}
                     </el-checkbox>
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index f0da29cad..a24966aaf 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -20,7 +20,7 @@
                 </el-button>
             </template>
             <template #search>
-                <div>
+                <div class="flex flex-wrap items-center gap-2 sm:gap-4">
                     <el-select v-model="logConfig.id" @change="changeWebsite()" class="p-w-200">
                         <template #prefix>{{ $t('website.website') }}</template>
                         <el-option
@@ -30,15 +30,15 @@
                             :value="website.id"
                         ></el-option>
                     </el-select>
-                    <el-button class="left-button">
+                    <el-button>
                         <el-checkbox v-model="tailLog" @change="changeTail" :disabled="logConfig.id == undefined">
                             {{ $t('commons.button.watch') }}
                         </el-checkbox>
                     </el-button>
-                    <el-button class="left-button" @click="onDownload" icon="Download" :disabled="!hasContent">
+                    <el-button @click="onDownload" icon="Download" :disabled="!hasContent">
                         {{ $t('file.download') }}
                     </el-button>
-                    <el-button type="primary" plain @click="onClean()" class="left-button" :disabled="!hasContent">
+                    <el-button type="primary" plain @click="onClean()" :disabled="!hasContent">
                         {{ $t('logs.deleteLogs') }}
                     </el-button>
                 </div>
@@ -158,3 +158,9 @@ onMounted(() => {
     getWebsites();
 });
 </script>
+
+<style scoped>
+.el-button + .el-button {
+    margin: 0 !important;
+}
+</style>