diff --git a/mod/forum/lang/en/forum.php b/mod/forum/lang/en/forum.php
index f9772cbe16f..8c44f51857f 100644
--- a/mod/forum/lang/en/forum.php
+++ b/mod/forum/lang/en/forum.php
@@ -433,6 +433,7 @@ $string['namenews_help'] = 'The course announcements forum is a special forum fo
 $string['namesocial'] = 'Social forum';
 $string['nameteacher'] = 'Teacher forum';
 $string['nextdiscussiona'] = 'Next discussion: {$a}';
+$string['nextuser'] = 'Next user';
 $string['newforumposts'] = 'New forum posts';
 $string['noattachments'] = 'There are no attachments to this post';
 $string['nodiscussions'] = 'There are no discussion topics yet in this forum';
@@ -511,6 +512,7 @@ $string['poststo'] = 'Posts to';
 $string['posttoforum'] = 'Post to forum';
 $string['postupdated'] = 'Your post was updated';
 $string['potentialsubscribers'] = 'Potential subscribers';
+$string['previoususer'] = 'Previous user';
 $string['privacy:digesttypenone'] = 'We do not hold any data relating to a preferred forum digest type for this forum.';
 $string['privacy:digesttypepreference'] = 'You have chosen to receive the following forum digest type: "{$a->type}".';
 $string['privacy:discussionsubscriptionpreference'] = 'You have chosen the following discussion subscription preference for this forum: "{$a->preference}"';
@@ -709,6 +711,7 @@ $string['unsubscribed'] = 'Unsubscribed';
 $string['unsubscribeshort'] = 'Unsubscribe';
 $string['useexperimentalui'] = 'Use experimental nested discussion view';
 $string['usermarksread'] = 'Manual message read marking';
+$string['usernavigation'] = 'User navigation';
 $string['unpindiscussion'] = 'Unpin this discussion';
 $string['viewalldiscussions'] = 'View all discussions';
 $string['viewparentpost'] = 'View parent post';
diff --git a/mod/forum/templates/local/grades/local/grader/user_picker.mustache b/mod/forum/templates/local/grades/local/grader/user_picker.mustache
index c84666eed0d..d81753c1f03 100644
--- a/mod/forum/templates/local/grades/local/grader/user_picker.mustache
+++ b/mod/forum/templates/local/grades/local/grader/user_picker.mustache
@@ -34,40 +34,39 @@
     {
     }
 }}
-<div class="col-md-12">
-    <div class="row">
-        <div class="col-md-8">
-            <div data-region="user_picker/user"></div>
-        </div>
-        <div class="col-md-4">
-            <ul class="pagination">
-                <li class="page-item mr-3">
-                    <a class="page-link" href="#" aria-label="Previous" data-action="change-user" data-direction="-1">
-                        <span aria-hidden="true">&langle;</span>
-                        <span class="sr-only">{{#str}} previous {{/str}}</span>
-                    </a>
-                </li>
-                <li class="page-item mr-3">
-                    <a class="page-link" href="#" aria-label="Next" data-action="change-user" data-direction="1">
-                        <span aria-hidden="true">&rangle;</span>
-                        <span class="sr-only">{{#str}} next {{/str}}</span>
-                    </a>
-                </li>
-                <li>
-                    <button class="btn btn-icon icon-size-4 icon-no-margin colour-inherit" aria-label="{{#str}} search {{/str}}" data-target="#searchbox" aria-expanded="false" aria-controls="searchbox" data-toggle="collapse">
-                        <i class="icon fa fa-search fa-fw" aria-hidden="true"></i>
-                        <span class="sr-only">{{#str}} search {{/str}}</span>
-                    </button>
-                </li>
 
+<div class="d-flex align-items-center user-picker-container mb-2 py-2">
+    <div class="d-flex align-items-center" data-region="user_picker/user"></div>
+    <div class="ml-auto flex-shrink-0">
+        <nav aria-label="{{#str}} usernavigation, mod_forum {{/str}}">
+            <ul class="pagination mb-0">
+                <li class="page-item">
+                    <a
+                        class="page-link icon-no-margin p-0 text-reset icon-size-3"
+                        href="#"
+                        aria-label="{{#str}} previous {{/str}}"
+                        data-action="change-user"
+                        data-direction="-1"
+                        title="{{#str}} previoususer, mod_forum {{/str}}"
+                    >
+                        <span class="dir-ltr-hide">{{#pix}} i/next, core {{/pix}}</span>
+                        <span class="dir-rtl-hide">{{#pix}} i/previous, core {{/pix}}</span>
+                    </a>
+                </li>
+                <li class="page-item">
+                    <a
+                        class="page-link icon-no-margin p-0 text-reset icon-size-3 ml-2"
+                        href="#"
+                        aria-label="{{#str}} next {{/str}}"
+                        data-action="change-user"
+                        data-direction="1"
+                        title="{{#str}} nextuser, mod_forum {{/str}}"
+                    >
+                        <span class="dir-ltr-hide">{{#pix}} i/previous, core {{/pix}}</span>
+                        <span class="dir-rtl-hide">{{#pix}} i/next, core {{/pix}}</span>
+                    </a>
+                </li>
             </ul>
-        </div>
-        <div id="searchbox" class="col-md-12 collapse">
-            <form action="" class="search-form my-3 w-100">
-                <input type="text" data-action="search-user-input" class="form-control input-lg" placeholder="Search user">
-            </form>
-            <div data-action="search-user-box"></div>
-        </div>
+        </nav>
     </div>
-    <hr>
 </div>
diff --git a/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache b/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
index 3fb917b9702..8d77a0c299e 100644
--- a/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
+++ b/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
@@ -38,5 +38,21 @@
         "total": 7
     }
 }}
-<div class="d-block font-weight-bold" data-region="name" data-userid="{{id}}">{{fullname}}</div>
-<div class="d-block"><div class="d-inline" data-region="index">{{displayIndex}}</div>/{{total}}</div>
+{{#profileimagelg}}
+<img
+    class="rounded-circle userpicture mr-2"
+    src="{{.}}"
+    alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
+    title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
+>
+{{/profileimagelg}}
+<div>
+    <h5
+        class="mb-0 font-weight-bold user-full-name text-truncate"
+        data-region="name"
+        data-userid="{{id}}"
+    >
+        {{fullname}}
+    </h5>
+</div>
+
diff --git a/mod/forum/templates/local/grades/local/grader/user_picker_placeholder.mustache b/mod/forum/templates/local/grades/local/grader/user_picker_placeholder.mustache
index af03054b440..d93d99a63f4 100644
--- a/mod/forum/templates/local/grades/local/grader/user_picker_placeholder.mustache
+++ b/mod/forum/templates/local/grades/local/grader/user_picker_placeholder.mustache
@@ -30,29 +30,21 @@
     {
     }
 }}
-<div class="col-md-12 mt-3">
-    <div class="row">
-        <div class="col-md-8">
-            <div class="bg-pulse-grey w-50" style="height: 20px;"></div>
-            <div class="bg-pulse-grey w-25 mt-1" style="height: 15px;"></div>
-        </div>
-        <div class="col-md-4">
-            <ul class="pagination">
-                <li class="page-item mr-3">
-                    <span class="btn bg-pulse-grey" aria-hidden="true">&langle;</span>
-                    <span class="sr-only">{{#str}} previous {{/str}}</span>
-                </li>
-                <li class="page-item mr-3">
-                    <span class="btn bg-pulse-grey" aria-hidden="true">&rangle;</span>
-                    <span class="sr-only">{{#str}} next {{/str}}</span>
-
+<div class="d-flex align-items-center user-picker-container mb-2 py-2">
+    <div class="d-flex align-items-center">
+        <div class="bg-pulse-grey rounded-circle d-inline-block flex-shrink-0 userpicture mr-2"></div>
+        <div class="bg-pulse-grey d-inline-block" style="height: 22px; width: 150px"></div>
+    </div>
+    <div class="ml-auto flex-shrink-0">
+        <nav>
+            <ul class="pagination mb-0">
+                <li class="page-item">
+                    <a class="bg-pulse-grey border-0 page-link icon-no-margin p-0 icon-size-3" href="#"></a>
                 </li>
                 <li class="page-item">
-                    <span class="btn bg-pulse-grey fa fa-search" aria-hidden="true"></span>
-                    <span class="sr-only">{{#str}} search {{/str}}</span>
+                    <a class="bg-pulse-grey border-0 page-link icon-no-margin p-0 icon-size-3 ml-2" href="#"></a>
                 </li>
             </ul>
-        </div>
+        </nav>
     </div>
 </div>
-