diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less
index 1fcc5f4a25db..146f072da37f 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less
@@ -357,76 +357,54 @@ dl.export-tree-legend dt + dd {
 
 // Viewer = changes -----------------------------------------------------------
 #changes-info {
-  background-color: @xwiki-background-secondary-color;
-  border: @border-width solid @xwiki-border-color;
   margin-top: (@grid-gutter-width / 2);
   margin-bottom: (@grid-gutter-width / 2);
   padding-top: (@grid-gutter-width / 2);
   padding-bottom: (@grid-gutter-width / 2);
   position: relative;
-  /* Background arrow */
-  &:before {
-    background: @xwiki-page-content-bg;
-    height: 2em;
-    right: 50%;
-    top: 4em;
-    width: 2em;
-  }
-  &:after {
-    border-bottom: 2em solid transparent;
-    border-left: 3em solid @xwiki-page-content-bg;
-    border-top: 2em solid transparent;
-    left: 50%;
-    top: 3em;
-  }
-  &:before, &:after {
-    content: "";
-    display: block;
-    position: absolute;
-  }
 }
 
 #changes-info-boxes {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
+  column-gap: 5vw;
+  row-gap: 1vh;
 }
 
 .changes-info-box {
   flex: 1;
-  padding: 0 (@main-padding / 2);
-}
-
-.changes-info-box, #changes-info-comment {
+  padding: (@main-padding / 4) (@main-padding / 2);
+  background-color: @xwiki-background-secondary-color;
+  border-radius: @border-radius-large;
   text-align: center;
 }
 
 .changes-info-title {
   .h3;
-}
-
-@media (max-width: @screen-xs-max) {
-  #changes-info:before, #changes-info:after {
-    display: none; /* Hide the arrow for small resolutions */
-  }
+  margin-top: 0;
 }
 
 .changes-version {
   white-space: nowrap;
 }
 
+.changes-arrow {
+  font-size: inherit;
+}
+
 .changes-arrow, .changes-arrow-left, .changes-arrow-right {
   &, &:hover, &:active, &:visited, &:focus {
-    color: @xwiki-page-content-bg;
-    text-decoration: none;
+    vertical-align: baseline;
     font-weight: 700;
   }
 }
 
-.changes-arrow-left, .changes-arrow-right {
-  font-size: 7em;
-  line-height: 1;
+#changes-arrows-box {
+  font-size: 1.5em;
+  flex-basis: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
 .changes-body > .changes-body-header {
diff --git a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
index c05d3339b01f..282f5919254a 100644
--- a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
+++ b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
@@ -1720,6 +1720,7 @@ web.history.changes.restrictedInfo=For security reasons, at least one of the com
   restricted mode as it is not the current version. There may be differences and errors due to this.
 
 core.viewers.diff.title=Changes for page <a href="{1}">{0}</a>
+core.viewers.diff.change=From {0} to {1}
 core.viewers.diff.from=From version {0}
 core.viewers.diff.fromNew=From empty
 core.viewers.diff.to=To version {0}
@@ -1727,10 +1728,10 @@ core.viewers.diff.editedBy=edited by {0}
 core.viewers.diff.editedOn=on {0}
 core.viewers.diff.editComment=Change comment:
 core.viewers.diff.noEditComment=There is no comment for this version
-core.viewers.diff.nextChange=Next change
-core.viewers.diff.previousChange=Previous change
-core.viewers.diff.nextVersion=Next version
-core.viewers.diff.previousVersion=Previous version
+core.viewers.diff.nextVersion.origin=Increase the base version to {0}
+core.viewers.diff.previousVersion.origin=Decrease the base version to {0}
+core.viewers.diff.nextVersion.target=Increase the target version to {0}
+core.viewers.diff.previousVersion.target=Decrease the target version to {0}
 
 core.viewers.code.showBlame=Show last authors
 core.viewers.code.hideBlame=Hide last authors
@@ -5636,6 +5637,14 @@ platform.office.importDocumentOverwriteConfirmation=The target document exists.
 #######################################
 core.menu.navbar.left.label=Left side of the navigation bar
 
+#######################################
+## until 15.9RC1
+#######################################
+core.viewers.diff.nextVersion=Next version
+core.viewers.diff.previousVersion=Previous version
+core.viewers.diff.nextChange=Next change
+core.viewers.diff.previousChange=Previous change
+
 ## Used to indicate where deprecated keys end
 #@deprecatedend
 
diff --git a/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java b/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java
index d8f7f26dce79..1140177f4db8 100644
--- a/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java
+++ b/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java
@@ -33,8 +33,8 @@
  */
 public class ChangesPane extends BaseElement
 {
-    private final static String previousChangeSelector = "#changes-info-boxes > a.changes-arrow-left";
-    private final static String nextChangeSelector = "#changes-info-boxes > a.changes-arrow-right";
+    private final static String previousChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-left";
+    private final static String nextChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-right";
     private final static String previousFromVersionSelector = "#changes-info-box-from .changes-arrow:first-child";
     private final static String nextFromVersionSelector = "#changes-info-box-from .changes-arrow:last-child";
     private final static String previousToVersionSelector = "#changes-info-box-to .changes-arrow:first-child";
@@ -69,7 +69,7 @@ public class ChangesPane extends BaseElement
     /**
      * The comment for the to version.
      */
-    @FindBy(id = "changes-info-comment")
+    @FindBy(css = "#changes-info-box-to .changes-info-comment")
     private WebElement changeComment;
 
     @FindBy(css = "#changes-info-box-to .changes-version a:not(.changes-arrow)")
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm
index 837f5e5c2ebb..a72067369c87 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm
@@ -24,31 +24,33 @@
 
 #if ("$!previousOrigdocVersion" != '')
   #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev2}")})
-  #set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion'))
-  #set ($previousOrigdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&lt;</a>")
+  #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.origin', [${previousOrigdocVersion}])))
+  #set ($previousOrigdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('left')</a>")
 #end
 #if ("$!nextOrigdocVersion" != '')
   #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev2}")})
-  #set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion'))
-  #set ($nextOrigdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&gt;</a>")
+  #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.origin', [${nextOrigdocVersion}])))
+  #set ($nextOrigdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('right')</a>")
 #end
 #if ("$!previousNewdocVersion" != '')
   #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${previousNewdocVersion}")})
-  #set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion'))
-  #set ($previousNewdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&lt;</a>")
+  #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.target', [${previousNewdocVersion}])))
+  #set ($previousNewdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('left')</a>")
 #end
 #if ("$!nextNewdocVersion" != '')
   #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${nextNewdocVersion}")})
-  #set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion'))
-  #set ($nextNewdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&gt;</a>")
+  #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.target', [${nextNewdocVersion}])))
+  #set ($nextNewdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('right')</a>")
 #end
 ## Display the previous change arrow only if there is a previous version of the original document and there is no extension version
 #if ("$!previousOrigdocVersion" != '' && "$!previousNewdocVersion" != '')
   ## Keep the reverse navigation order in case the original document version is greater than the version of the new document
   #if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion))
     #set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev1}")})
+    #set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$previousOrigdocVersion,$rev1])))
   #else
     #set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${previousNewdocVersion}")})
+    #set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $previousNewdocVersion])))
   #end
 #end
 ## Display the next change arrow only if there is a next version of the new document and there is no extension version
@@ -56,8 +58,10 @@
   ## Keep the reverse navigation order in case the original document version is greater than the version of the new document
   #if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion))
     #set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${nextNewdocVersion}")})
+    #set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $nextNewdocVersion])))
   #else
     #set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev1}")})
+    #set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$nextOrigdocVersion, $rev1])))
   #end
 #end
 
@@ -66,14 +70,16 @@
   'version': $rev1,
   'previousVersionLink': $previousOrigdocLink,
   'nextVersionLink': $nextOrigdocLink,
-  'previousLink': $previousLink
+  'previousLink': $previousLink,
+  'previousLabel': $previousLabel
 })
 #set ($to = {
   'doc': $newdoc,
   'version': $rev2,
   'previousVersionLink': $previousNewdocLink,
   'nextVersionLink': $nextNewdocLink,
-  'nextLink': $nextLink
+  'nextLink': $nextLink,
+  'nextLabel': $nextLabel
 })
 #displayDocumentChangesHeader($from $to)
 
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm
index d07507eb4a5c..1e30d19761ff 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm
@@ -575,15 +575,33 @@
         $services.localization.render('core.viewers.diff.editedOn', [$xwiki.formatDate($targetDoc.date)])
       #end
     </div> ## changes-info-content
+    <div class="changes-info-comment">
+      $escapetool.xml($services.localization.render('core.viewers.diff.editComment'))
+      #if ("$targetDoc.comment" == '')
+        $escapetool.xml($services.localization.render('core.viewers.diff.noEditComment'))
+      #else
+        $escapetool.xml($targetDoc.comment)
+      #end
+    </div> ## changes-info-comment
   #end
 #end
 
 #macro (displayDocumentChangesHeader $from $to)
   <div id="changes-info">
     <div id="changes-info-boxes">
-      #if ("$!from.previousLink" != '')
-        <a href="$from.previousLink" class="changes-arrow-left"
-          title="$escapetool.xml($services.localization.render('core.viewers.diff.previousChange'))">&lt;</a>
+      #if ("$!from.previousLink" != '' || "$!to.nextLink" != '')
+        <div id='changes-arrows-box'>
+          #if ("$!from.previousLink" != '')
+            <a href="$from.previousLink" class="btn btn-default changes-arrow-left">
+              $services.icon.renderHTML('left') $from.previousLabel
+            </a>
+          #end
+          #if ("$!to.nextLink" != '')
+            <a href="$to.nextLink" class="btn btn-default changes-arrow-right">
+              $to.nextLabel $services.icon.renderHTML('right')
+            </a>
+          #end
+        </div>
       #end
       <div id="changes-info-box-from" class="changes-info-box">
         #displayDocumentVersionInfo($from.doc $from.version $from.previousVersionLink $from.nextVersionLink 'core.viewers.diff.from')
@@ -591,19 +609,7 @@
       <div id="changes-info-box-to" class="changes-info-box">
         #displayDocumentVersionInfo($to.doc $to.version $to.previousVersionLink $to.nextVersionLink 'core.viewers.diff.to')
       </div> ## changes-info-box-to
-      #if ("$!to.nextLink" != '')
-        <a href="$to.nextLink" class="changes-arrow-right"
-          title="$escapetool.xml($services.localization.render('core.viewers.diff.nextChange'))">&gt;</a>
-      #end
     </div> ## changes-info-boxes
-    <div id="changes-info-comment">
-      $escapetool.xml($services.localization.render('core.viewers.diff.editComment'))
-      #if ("$!to.doc.comment" == '')
-        $escapetool.xml($services.localization.render('core.viewers.diff.noEditComment'))
-      #else
-        $escapetool.xml($to.doc.comment)
-      #end
-    </div> ## changes-info-comment
   </div> ## changes-info
 #end