diff --git a/frontend/src/components/error-message/error_code.vue b/frontend/src/components/error-message/error_code.vue
index 8a345889e..2bd25d957 100644
--- a/frontend/src/components/error-message/error_code.vue
+++ b/frontend/src/components/error-message/error_code.vue
@@ -1,16 +1,14 @@
 <template>
     <div>
-        <body>
-            <div>
-                <el-row type="flex" justify="center">
-                    <h1>{{ loadErrInfo() }}</h1>
-                </el-row>
-            </div>
-            <hr />
-            <div>
-                <el-row type="flex" justify="center"><span>nginx</span></el-row>
-            </div>
-        </body>
+        <div>
+            <el-row type="flex" justify="center">
+                <h1>{{ loadErrInfo() }}</h1>
+            </el-row>
+        </div>
+        <hr />
+        <div>
+            <el-row type="flex" justify="center"><span>nginx</span></el-row>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index 17d75cb13..69e794839 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-card class="router_card">
-        <div class="flex w-full flex-col md:justify-between md:flex-row">
+        <div class="flex w-full justify-between items-center md:justify-between md:flex-row">
             <el-radio-group v-model="activeName" @change="handleChange">
                 <el-radio-button
                     class="router_card_button"
@@ -76,6 +76,7 @@ onMounted(() => {
 <style lang="scss">
 .router_card {
     --el-card-padding: 0;
+    width: 100%;
     .el-card__body {
         display: flex;
         justify-content: space-between;
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 2726f1102..0707d3442 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -42,39 +42,37 @@
 
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
-                <CardWithHeader :header="$t('home.overview')" height="166px">
+                <CardWithHeader :header="$t('home.overview')">
                     <template #body>
                         <div class="h-overview">
-                            <el-row>
-                                <el-col :span="6">
-                                    <span>{{ $t('menu.website') }}</span>
-                                    <div class="count">
-                                        <span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span>{{ $t('menu.database') }} - {{ $t('database.all') }}</span>
-                                    <div class="count">
-                                        <span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span>{{ $t('menu.cronjob') }}</span>
-                                    <div class="count">
-                                        <span @click="goRouter('/cronjobs')">
-                                            {{ baseInfo?.cronjobNumber }}
-                                        </span>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <span>{{ $t('home.appInstalled') }}</span>
-                                    <div class="count">
-                                        <span @click="goRouter('/apps/installed')">
-                                            {{ baseInfo?.appInstalledNumber }}
-                                        </span>
-                                    </div>
-                                </el-col>
-                            </el-row>
+                            <div>
+                                <span>{{ $t('menu.website') }}</span>
+                                <div class="count">
+                                    <span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
+                                </div>
+                            </div>
+                            <div>
+                                <span>{{ $t('menu.database') }} - {{ $t('database.all') }}</span>
+                                <div class="count">
+                                    <span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
+                                </div>
+                            </div>
+                            <div>
+                                <span>{{ $t('menu.cronjob') }}</span>
+                                <div class="count">
+                                    <span @click="goRouter('/cronjobs')">
+                                        {{ baseInfo?.cronjobNumber }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div>
+                                <span>{{ $t('home.appInstalled') }}</span>
+                                <div class="count">
+                                    <span @click="goRouter('/apps/installed')">
+                                        {{ baseInfo?.appInstalledNumber }}
+                                    </span>
+                                </div>
+                            </div>
                         </div>
                     </template>
                 </CardWithHeader>
@@ -85,42 +83,44 @@
                 </CardWithHeader>
                 <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px; margin-bottom: 20px">
                     <template #header-r>
-                        <el-radio-group
-                            style="float: right; margin-left: 5px"
-                            v-model="chartOption"
-                            @change="changeOption"
-                        >
-                            <el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
-                            <el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
-                        </el-radio-group>
-                        <el-select
-                            v-if="chartOption === 'network'"
-                            @change="onLoadBaseInfo(false, 'network')"
-                            v-model="searchInfo.netOption"
-                            class="p-w-200 float-right"
+                        <div
+                            class="float-right flex flex-col items-end flex-wrap sm:items-center gap-2 sm:flex-row sm:gap-4"
                         >
-                            <template #prefix>{{ $t('home.networkCard') }}</template>
-                            <el-option
-                                v-for="item in netOptions"
-                                :key="item"
-                                :label="item == 'all' ? $t('commons.table.all') : item"
-                                :value="item"
-                            />
-                        </el-select>
-                        <el-select
-                            v-if="chartOption === 'io'"
-                            v-model="searchInfo.ioOption"
-                            @change="onLoadBaseInfo(false, 'io')"
-                            class="p-w-200 float-right"
-                        >
-                            <template #prefix>{{ $t('home.disk') }}</template>
-                            <el-option
-                                v-for="item in ioOptions"
-                                :key="item"
-                                :label="item == 'all' ? $t('commons.table.all') : item"
-                                :value="item"
-                            />
-                        </el-select>
+                            <el-radio-group v-model="chartOption" @change="changeOption">
+                                <el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
+                                <el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
+                            </el-radio-group>
+                            <div>
+                                <el-select
+                                    v-if="chartOption === 'network'"
+                                    @change="onLoadBaseInfo(false, 'network')"
+                                    v-model="searchInfo.netOption"
+                                    class="p-w-200 float-right"
+                                >
+                                    <template #prefix>{{ $t('home.networkCard') }}</template>
+                                    <el-option
+                                        v-for="item in netOptions"
+                                        :key="item"
+                                        :label="item == 'all' ? $t('commons.table.all') : item"
+                                        :value="item"
+                                    />
+                                </el-select>
+                                <el-select
+                                    v-if="chartOption === 'io'"
+                                    v-model="searchInfo.ioOption"
+                                    @change="onLoadBaseInfo(false, 'io')"
+                                    class="p-w-200 float-right"
+                                >
+                                    <template #prefix>{{ $t('home.disk') }}</template>
+                                    <el-option
+                                        v-for="item in ioOptions"
+                                        :key="item"
+                                        :label="item == 'all' ? $t('commons.table.all') : item"
+                                        :value="item"
+                                    />
+                                </el-select>
+                            </div>
+                        </div>
                     </template>
                     <template #body>
                         <div style="position: relative; margin-top: 20px">
@@ -685,14 +685,20 @@ onBeforeUnmount(() => {
 <style lang="scss">
 .h-overview {
     text-align: center;
-
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: row;
     span:first-child {
         font-size: 14px;
         color: var(--el-text-color-regular);
     }
     @media only screen and (max-width: 1300px) {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
         span:first-child {
-            font-size: 12px;
+            font-size: 16px;
             color: var(--el-text-color-regular);
         }
     }
