diff --git a/mod/quiz/attemptlib.php b/mod/quiz/attemptlib.php
index 5efd8ffc1aa..7a58644302a 100644
--- a/mod/quiz/attemptlib.php
+++ b/mod/quiz/attemptlib.php
@@ -2795,7 +2795,6 @@ class quiz_attempt_nav_panel extends quiz_nav_panel_base {
         }
         return html_writer::link($this->attemptobj->summary_url(),
                 get_string('endtest', 'quiz'), array('class' => 'endtestlink aalink')) .
-                $output->countdown_timer($this->attemptobj, time()) .
                 $this->render_restart_preview_link($output);
     }
 }
diff --git a/mod/quiz/module.js b/mod/quiz/module.js
index 84090582b2d..a62d34a2e95 100644
--- a/mod/quiz/module.js
+++ b/mod/quiz/module.js
@@ -71,7 +71,7 @@ M.mod_quiz.timer = {
         M.mod_quiz.timer.endtime = M.pageloadstarttime.getTime() + start*1000;
         M.mod_quiz.timer.preview = preview;
         M.mod_quiz.timer.update();
-        Y.one('#quiz-timer').setStyle('display', 'block');
+        Y.one('#quiz-timer-wrapper').setStyle('display', 'flex');
     },
 
     /**
diff --git a/mod/quiz/renderer.php b/mod/quiz/renderer.php
index bd87a36c557..bedfad83b92 100644
--- a/mod/quiz/renderer.php
+++ b/mod/quiz/renderer.php
@@ -294,10 +294,8 @@ class mod_quiz_renderer extends plugin_renderer_base {
             $this->initialise_timer($timerstartvalue, $ispreview);
         }
 
-        return html_writer::tag('div', get_string('timeleft', 'quiz') . ' ' .
-                html_writer::tag('span', '', array('id' => 'quiz-time-left')),
-                array('id' => 'quiz-timer', 'role' => 'timer',
-                    'aria-atomic' => 'true', 'aria-relevant' => 'text'));
+
+        return $this->output->render_from_template('mod_quiz/timer', (object)[]);
     }
 
     /**
@@ -447,6 +445,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
         $output = '';
         $output .= $this->header();
         $output .= $this->quiz_notices($messages);
+        $output .= $this->countdown_timer($attemptobj, time());
         $output .= $this->attempt_form($attemptobj, $page, $slots, $id, $nextpage);
         $output .= $this->footer();
         return $output;
diff --git a/mod/quiz/styles.css b/mod/quiz/styles.css
index 474e202c174..da39888ee01 100644
--- a/mod/quiz/styles.css
+++ b/mod/quiz/styles.css
@@ -196,80 +196,6 @@
     margin: 0.5em 0;
 }
 
-/* Countdown timer. */
-#quiz-timer {
-    display: none;
-    margin-top: 1em;
-}
-
-#quiz-time-left {
-    font-weight: bold;
-}
-
-#quiz-timer.timeleft15 {
-    background: #fff;
-}
-
-#quiz-timer.timeleft14 {
-    background: #fee;
-}
-
-#quiz-timer.timeleft13 {
-    background: #fdd;
-}
-
-#quiz-timer.timeleft12 {
-    background: #fcc;
-}
-
-#quiz-timer.timeleft11 {
-    background: #fbb;
-}
-
-#quiz-timer.timeleft10 {
-    background: #faa;
-}
-
-#quiz-timer.timeleft9 {
-    background: #f99;
-}
-
-#quiz-timer.timeleft8 {
-    background: #f88;
-}
-
-#quiz-timer.timeleft7 {
-    background: #f77;
-}
-
-#quiz-timer.timeleft6 {
-    background: #f66;
-}
-
-#quiz-timer.timeleft5 {
-    background: #f55;
-}
-
-#quiz-timer.timeleft4 {
-    background: #f44;
-}
-
-#quiz-timer.timeleft3 {
-    background: #f33;
-}
-
-#quiz-timer.timeleft2 {
-    background: #f22;
-}
-
-#quiz-timer.timeleft1 {
-    background: #f11;
-}
-
-#quiz-timer.timeleft0 {
-    background: #f00;
-}
-
 /** mod quiz mod **/
 #page-mod-quiz-mod #id_reviewoptionshdr .fitem {
     width: 23%;
diff --git a/mod/quiz/templates/timer.mustache b/mod/quiz/templates/timer.mustache
new file mode 100644
index 00000000000..7a825558085
--- /dev/null
+++ b/mod/quiz/templates/timer.mustache
@@ -0,0 +1,31 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template mod_quiz/timer
+
+    Login page template
+
+    Example context (json):
+    {
+    }
+}}
+<div id="quiz-timer-wrapper" class="mb-2">
+    <div id="quiz-timer" class="quiz-timer-inner py-1 px-2 ml-auto" role="timer" aria-atomic="true" aria-relevant="text">
+        {{#str}} timeleft, quiz {{/str}}
+        <span id="quiz-time-left"></span>
+    </div>
+</div>
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 74585484007..971c1879b8d 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -1265,6 +1265,34 @@ div#dock {
     margin: 0 0.4em;
 }
 
+/* Countdown timer. */
+#page-mod-quiz-attempt #region-main {
+    overflow-x: inherit;
+}
+
+#quiz-timer-wrapper {
+    display: none;
+    position: sticky;
+    justify-content: end;
+    top: $navbar-height + 5px;
+    z-index: $zindex-modal;
+    #quiz-timer {
+        border: $border-width solid $red;
+        background-color: $white;
+    }
+}
+.pagelayout-embedded #quiz-timer-wrapper {
+    top: 5px;
+}
+
+@for $i from 0 through 16 {
+    #quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
+        $bg: lighten($red, ($i * 3%));
+        background-color: $bg;
+        color: color-yiq($bg);
+    }
+}
+
 // Assign.
 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
     top: auto;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 754b3f37460..6bf27ca9a9a 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -17522,6 +17522,91 @@ div#dock {
   padding: 0;
   margin: 0 0.4em; }
 
+/* Countdown timer. */
+#page-mod-quiz-attempt #region-main {
+  overflow-x: inherit; }
+
+#quiz-timer-wrapper {
+  display: none;
+  position: sticky;
+  justify-content: end;
+  top: 55px;
+  z-index: 1050; }
+  #quiz-timer-wrapper #quiz-timer {
+    border: 1px solid #d43f3a;
+    background-color: #fff; }
+
+.pagelayout-embedded #quiz-timer-wrapper {
+  top: 5px; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft0 {
+  background-color: #d43f3a;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft1 {
+  background-color: #d74b47;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft2 {
+  background-color: #d95753;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft3 {
+  background-color: #dc6460;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft4 {
+  background-color: #df706c;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft5 {
+  background-color: #e27c79;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft6 {
+  background-color: #e48885;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft7 {
+  background-color: #e79592;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft8 {
+  background-color: #eaa19e;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft9 {
+  background-color: #edadab;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft10 {
+  background-color: #efb9b8;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft11 {
+  background-color: #f2c6c4;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft12 {
+  background-color: #f5d2d1;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft13 {
+  background-color: #f8dedd;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft14 {
+  background-color: #faeaea;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft15 {
+  background-color: #fdf7f6;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft16 {
+  background-color: white;
+  color: #212529; }
+
 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
   top: auto; }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 39675de72a7..37e9157c056 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -17749,6 +17749,91 @@ div#dock {
   padding: 0;
   margin: 0 0.4em; }
 
+/* Countdown timer. */
+#page-mod-quiz-attempt #region-main {
+  overflow-x: inherit; }
+
+#quiz-timer-wrapper {
+  display: none;
+  position: sticky;
+  justify-content: end;
+  top: 55px;
+  z-index: 1050; }
+  #quiz-timer-wrapper #quiz-timer {
+    border: 1px solid #d43f3a;
+    background-color: #fff; }
+
+.pagelayout-embedded #quiz-timer-wrapper {
+  top: 5px; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft0 {
+  background-color: #d43f3a;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft1 {
+  background-color: #d74b47;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft2 {
+  background-color: #d95753;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft3 {
+  background-color: #dc6460;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft4 {
+  background-color: #df706c;
+  color: #fff; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft5 {
+  background-color: #e27c79;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft6 {
+  background-color: #e48885;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft7 {
+  background-color: #e79592;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft8 {
+  background-color: #eaa19e;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft9 {
+  background-color: #edadab;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft10 {
+  background-color: #efb9b8;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft11 {
+  background-color: #f2c6c4;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft12 {
+  background-color: #f5d2d1;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft13 {
+  background-color: #f8dedd;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft14 {
+  background-color: #faeaea;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft15 {
+  background-color: #fdf7f6;
+  color: #212529; }
+
+#quiz-timer-wrapper #quiz-timer.timeleft16 {
+  background-color: white;
+  color: #212529; }
+
 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
   top: auto; }