diff --git a/app/.vitepress/src/components/doc/DocPagination.vue b/app/.vitepress/src/components/doc/DocPagination.vue
index 2d5a48fd8ed83d2ea76518e64d9e46ed5fa3f675..bcff96b1737ddf8ed121a954272aebd60b9f671e 100644
--- a/app/.vitepress/src/components/doc/DocPagination.vue
+++ b/app/.vitepress/src/components/doc/DocPagination.vue
@@ -48,24 +48,27 @@ const config = computed(() => {
   <div v-if="config.prevHref || config.nextHref" class="doc-footer">
     <ODivider />
     <div class="doc-footer-content">
-      <div class="link-item">
-        <a :href="config.prevHref" v-if="config.prevHref && config.prevLabel" @click="emits('page-change', 'prev')">
-          <OIcon>
-            <OIconArrowLeft />
-          </OIcon>
-          <span class="link-text">{{ t('docs.previous') }}</span>
-          <span>{{ config.prevLabel }}</span>
-        </a>
-      </div>
-      <div class="link-item">
-        <a :href="config.nextHref" v-if="config.nextHref && config.nextLabel" @click="emits('page-change', 'next')">
-          <span>{{ t('docs.next') }}</span>
-          <span class="link-text">{{ config.nextLabel }}</span>
-          <OIcon>
-            <OIconArrowRight />
-          </OIcon>
-        </a>
-      </div>
+      <a class="link-item-prev link-item" :href="config.prevHref" v-if="config.prevHref && config.prevLabel" @click="emits('page-change', 'prev')">
+        <OIcon>
+          <OIconArrowLeft />
+        </OIcon>
+        <span class="prev-text-wrap">
+          <span class="pre-text">{{ t('docs.previous') }}</span>
+          <span class="title-text">{{ config.prevLabel }}</span>
+        </span>
+      </a>
+      <span v-else class="link-item link-item-invisible" />
+
+      <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>
+        <OIcon>
+          <OIconArrowRight />
+        </OIcon>
+      </a>
+      <span v-else class="link-item link-item-invisible" />
     </div>
   </div>
 </template>
@@ -74,52 +77,103 @@ const config = computed(() => {
 .doc-footer {
   padding-bottom: 16px;
   margin-top: auto;
+
+  @include respond-to('phone') { 
+    padding-bottom: 0;
+  }
 }
+
 .o-divider {
   --o-divider-gap: 32px 0 30px;
+
+  @include respond-to('<=laptop') {
+    --o-divider-gap: 24px 0 12px;
+  }
 }
 
 .doc-footer-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
+}
 
-  @include respond-to('phone') {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    .link-item + .link-item {
-      margin-top: 8px;
-    }
-  }
+.link-item-prev {
+  justify-content: flex-start;
+}
+
+.link-item-next {
+  justify-content: flex-end;
 }
 
 .link-item {
-  a {
-    display: flex;
-    align-items: center;
-    @include text1;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  
+  @include text1;
+
+  @include respond-to('phone') {
+    justify-content: space-between;
+    padding: 16px 8px;
+    border-radius: var(--o-radius-xs);
+    background-color: var(--o-color-fill1);
   }
 
   .o-icon {
     @include h2;
+
+    @include respond-to('phone') {
+      font-size: 24px;
+    }
   }
+}
 
-  .link-text {
-    margin: 0 16px 0 10px;
+.link-item-invisible {
+  opacity: 0;
+  background-color: transparent;
+}
+
+.prev-text-wrap,
+.next-text-wrap {
+  display: flex;
+  align-items: center;
+
+  @include respond-to('phone') {
+    flex-direction: column;
+  }
+}
+
+.prev-text-wrap {
+  padding-left: 10px;
+
+  @include respond-to('phone') {
+    align-items: flex-end;
+  }
+}
+
+.next-text-wrap {
+  padding-right: 10px;
+
+  @include respond-to('phone') {
+    align-items: flex-start;
   }
 }
 
-@include respond-to('<=laptop') {
-  .o-divider {
-    --o-divider-gap: 24px;
+.pre-text,
+.next-text {
+  padding-right: 16px;
+
+  @include respond-to('phone') {
+    padding-right: 0;
   }
 }
 
-@include respond-to('phone') {
-  .o-divider {
-    --o-divider-gap: 12px 0;
+.title-text {
+  @include respond-to('phone') {
+    margin-top: 4px;
+    @include text-truncate(1);
+    @include text2;
   }
 }
 </style>