diff --git a/layouts/docs/second.html b/layouts/docs/second.html
index 0ca39d01a..834b23839 100644
--- a/layouts/docs/second.html
+++ b/layouts/docs/second.html
@@ -146,29 +146,11 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                         {{ end }}
                     </div>
                 </div>
+
                 {{ if .IsPage }}
-                
-                <div class="page-div common-flex-layout">
-                    {{ with .Next }}
-                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="last" href="{{.RelPermalink}}">
-                            <img src="/images/docs/v3.3/last.svg" alt="{{ i18n "Previous" }}">
-                            {{ i18n "Previous" }}
-                            <span>: {{.LinkTitle}}</span>
-                        </a>
-                    <!-- {{ end }} -->
-                    {{ end }}
-                    {{ with .Prev }}
-                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="next" href="{{.RelPermalink}}">
-                            {{ i18n "Next" }}
-                            <span>: {{.LinkTitle}}</span>
-                            <img src="/images/docs/v3.3/next.svg" alt="{{ i18n "Next" }}">
-                        </a>            
-                    <!-- {{ end }} -->
-                    {{ end }}
-                </div>
+                {{ partial "pagination" . }}
                 {{ end }}
+                
                 <div></div>
             </div>
             {{ if .IsPage }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index e974bcdf6..dfd1e5a01 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -154,29 +154,11 @@
                             <p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
                         </div>
                     </div>
-                    {{ if .IsPage }}
 
-                    <div class="page-div common-flex-layout">
-                        {{ with .Next }}
-                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="last" href="{{.RelPermalink}}">
-                            <img src="/images/docs/v3.3/last.svg" alt="{{ i18n " Previous" }}">
-                            {{ i18n "Previous" }}
-                            <span>: {{.LinkTitle}}</span>
-                        </a>
-                        <!-- {{ end }} -->
-                        {{ end }}
-                        {{ with .Prev }}
-                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="next" href="{{.RelPermalink}}">
-                            {{ i18n "Next" }}
-                            <span>: {{.LinkTitle}}</span>
-                            <img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
-                        </a>
-                        <!-- {{ end }} -->
-                        {{ end }}
-                    </div>
+                    {{ if .IsPage }}
+                    {{ partial "pagination" . }}
                     {{ end }}
+                    
                     <div></div>
                 </div>
                 {{ if .IsPage }}
diff --git a/layouts/partials/findFirstInNextSection.html b/layouts/partials/findFirstInNextSection.html
new file mode 100644
index 000000000..26834e793
--- /dev/null
+++ b/layouts/partials/findFirstInNextSection.html
@@ -0,0 +1,9 @@
+{{ if ne .Parent.CurrentSection .Parent.FirstSection }} <!-- out of boundary -->
+{{ with .}}
+<a class="next" href="{{.RelPermalink}}">
+	{{ i18n "Next" }}
+	<span>: {{.LinkTitle}}</span>
+	<img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
+</a>
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/findLastInPreSection.html b/layouts/partials/findLastInPreSection.html
new file mode 100644
index 000000000..9192d5021
--- /dev/null
+++ b/layouts/partials/findLastInPreSection.html
@@ -0,0 +1,18 @@
+<!-- find last page in section -->
+{{ if ne .Parent.CurrentSection .Parent.FirstSection }} <!-- out of boundary -->
+
+{{ if .IsSection}} <!-- recursive  -->
+{{ $curSection := .Pages.ByWeight }}
+{{ $l := len $curSection}}
+{{ $page := index $curSection (sub $l 1)}}
+{{ partial "findLastInPreSection" $page}}
+{{ else }} <!-- not recursive -->
+
+<a class="last" href="{{.RelPermalink}}">
+	<img src="/images/docs/v3.3/last.svg" alt="{{ i18n " Previous" }}">
+	{{ i18n "Previous" }}
+	<span>: {{.LinkTitle}}</span>
+</a>
+{{ end }}
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/page_navigation.html b/layouts/partials/page_navigation.html
new file mode 100644
index 000000000..f3b1e5760
--- /dev/null
+++ b/layouts/partials/page_navigation.html
@@ -0,0 +1,71 @@
+{{ $current := .context }}
+
+<!-- choose different bottom up step -->
+<!-- in this case page.parent is index -->
+{{ $g_parent := "" }}
+{{ if $current.IsPage }}
+{{ $g_parent = $current.Parent.Parent }}
+{{ else }}
+{{ $g_parent = $current.Parent}}
+{{ end }}
+
+<!-- SECTION1 -->
+<!-- important! here we need call .Pages to include both pure page and _index -->
+{{ $p_section := $g_parent.Pages.ByWeight }}
+{{ $length := len $p_section }}
+<!-- page prev -->
+{{ if .prev }}
+{{ $first := index $p_section 0}}
+
+<!-- check if is already the first section -->
+<!-- if is first section,we need to bottom up -->
+{{ if $current.InSection $first.CurrentSection }}
+<!-- bottom up -->
+{{ partial "page_navigation" (dict "context" $g_parent "prev" true)}}
+
+<!--if not the first section just go to pre section last page (last page of pre section of p_section)-->
+{{else}}
+
+<!-- find current page's section position -->
+{{ $curIndex := 0 }}
+{{ range $i, $p_sec := $p_section}}
+{{ if eq $p_sec $current.CurrentSection}}
+{{ $curIndex = $i }}
+{{ end }}
+{{ end }}
+
+{{ $prevPage := index $p_section (sub $curIndex 1) }}
+{{ partial "findLastInPreSection" $prevPage}}
+
+{{ end }} <!-- close of check page prev bottom up -->
+<!-- SECTION1 -->
+
+<!-- page next -->
+{{ else }}
+
+<!-- SECTION2 -->
+{{ $last := index $p_section (sub $length 1)}}
+
+<!-- if is last section,we need to bottom up -->
+{{ if $current.InSection $last.CurrentSection }}
+
+<!-- bottom up -->
+{{ partial "page_navigation" (dict "context" $g_parent "prev" false)}}
+
+<!--if not the last section just go to next section -->
+{{ else }}
+
+{{ $curIndex := 0 }}
+{{ range $i, $p_sec := $p_section}}
+{{ if eq $p_sec $current.CurrentSection}}
+{{ $curIndex = $i }}
+{{ end }}
+{{ end }}
+
+{{ $nextPage := index $p_section (add $curIndex 1) }}
+{{ partial "findFirstInNextSection" $nextPage}}
+
+{{ end }} <!-- close of check next bottom up -->
+<!-- SECTION2 -->
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 000000000..6fe3074bd
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,33 @@
+<div class="page-div common-flex-layout">
+	<!-- if not each page in a section is pure page we can't simply use prev/nextInsection -->
+	<!-- or is there a better way -->
+	{{ $current := .}}
+	{{ $p := .Parent.Pages.ByWeight }}
+	{{ $length := len $p }}
+
+	<!-- find current page's section position -->
+	{{ $curIndex := 0 }}
+	{{ range $i, $p_sec := $p}}
+	
+	{{ if eq $p_sec $current}}
+	{{ $curIndex = $i }}
+	{{ end }}
+	{{ end }}
+
+	<!-- prev -->
+	{{ if gt $curIndex 0}}
+	{{ $prevPage := index $p (sub $curIndex 1) }}
+	{{ partial "findLastInPreSection" $prevPage}}
+	{{ else }}
+	{{ partial "page_navigation" (dict "context" . "prev" true)}}
+	{{ end }}
+
+	<!-- next -->
+	{{ if lt $curIndex (sub $length 1) }}
+	{{ $nextPage := index $p (add $curIndex 1)}}
+	{{ partial "findFirstInNextSection" $nextPage}}
+	{{ else }}
+	{{ partial "page_navigation" (dict "context" . "prev" false)}}
+	{{ end }}
+
+</div>
\ No newline at end of file