diff --git a/app/.vitepress/src/components/doc/DocPagination.vue b/app/.vitepress/src/components/doc/DocPagination.vue
index bcff96b1737ddf8ed121a954272aebd60b9f671e..72532b6fd6a4cdcc721a773423573b8a2c745468 100644
--- a/app/.vitepress/src/components/doc/DocPagination.vue
+++ b/app/.vitepress/src/components/doc/DocPagination.vue
@@ -49,7 +49,7 @@ const config = computed(() => {
     <ODivider />
     <div class="doc-footer-content">
       <a class="link-item-prev link-item" :href="config.prevHref" v-if="config.prevHref && config.prevLabel" @click="emits('page-change', 'prev')">
-        <OIcon>
+        <OIcon class="icon-arrow-left">
           <OIconArrowLeft />
         </OIcon>
         <span class="prev-text-wrap">
@@ -61,10 +61,10 @@ const config = computed(() => {
 
       <a class="link-item-next link-item" :href="config.nextHref" v-if="config.nextHref && config.nextLabel" @click="emits('page-change', 'next')">
         <span class="next-text-wrap">
-          <span class="next-text">{{ t('docs.next') }}</span>
           <span class="title-text">{{ config.nextLabel }}</span>
+          <span class="next-text">{{ t('docs.next') }}</span>
         </span>
-        <OIcon>
+        <OIcon class="icon-arrow-right">
           <OIconArrowRight />
         </OIcon>
       </a>
@@ -138,42 +138,58 @@ const config = computed(() => {
 .next-text-wrap {
   display: flex;
   align-items: center;
+  
 
   @include respond-to('phone') {
-    flex-direction: column;
+    gap: 4px;
   }
 }
 
 .prev-text-wrap {
-  padding-left: 10px;
-
   @include respond-to('phone') {
+    flex-direction: column;
     align-items: flex-end;
   }
 }
 
 .next-text-wrap {
-  padding-right: 10px;
-
   @include respond-to('phone') {
+    flex-direction: column-reverse;
     align-items: flex-start;
   }
 }
 
-.pre-text,
+.pre-text {
+  padding: 0 16px 0 10px;
+}
+
 .next-text {
-  padding-right: 16px;
+  padding: 0 10px 0 16px;
+}
 
+.pre-text,
+.next-text {
   @include respond-to('phone') {
-    padding-right: 0;
+    padding: 0;
   }
 }
 
 .title-text {
   @include respond-to('phone') {
-    margin-top: 4px;
     @include text-truncate(1);
     @include text2;
   }
 }
+
+.icon-arrow-left {
+  @include respond-to('phone') {
+    padding-right: 8px;
+  }
+}
+
+.icon-arrow-right {
+  @include respond-to('phone') {
+    padding-left: 8px;
+  }
+}
 </style>