diff --git a/src/css/app.scss b/src/css/app.scss
index 2e524e693..1b2e56add 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -182,3 +182,7 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
+
+.mt-15 {
+    margin-top: 15px;
+}
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f3de8a41a..c220ebb7b 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -146,8 +146,8 @@ onMounted(async () => {
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center">
-        <div style="width: 100%">
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneList"
                 url="Zones"
@@ -191,7 +191,7 @@ onMounted(async () => {
                                 <QTd :props="props">
                                     <div class="table-actions">
                                         <QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="vn:clone"
                                             size="sm"
                                             color="primary"
@@ -201,7 +201,7 @@ onMounted(async () => {
                                                 t('globals.clone')
                                             }}</QTooltip> </QIcon
                                         ><QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="preview"
                                             size="sm"
                                             color="primary"