diff --git a/css/chess.css b/css/chess.css
index 742a177..102262e 100644
--- a/css/chess.css
+++ b/css/chess.css
@@ -183,6 +183,10 @@ button:disabled .silhouette {
    max-width: 7.5in;
 }
 
+#cb_history_future {
+   color: grey;
+}
+
 .cb-hbox {
    display: flex;
    flex-flow: row nowrap;
diff --git a/index.html b/index.html
index acd129c..1901845 100644
--- a/index.html
+++ b/index.html
@@ -224,7 +224,7 @@
 						</div>
 					</form>
 					<div id="cb_scrollable">
-						<p id="cb_history"></p>
+						<p id="cb_history"><span id="cb_history_past"></span><span id="cb_history_future"></span></p>
 						<details>
 							<summary>Rule Reference</summary>
 							<p>The basic movement for each piece is the same as traditional chess.</p>
diff --git a/js/pacosako_ui.js b/js/pacosako_ui.js
index 1f2b6e9..4b89460 100644
--- a/js/pacosako_ui.js
+++ b/js/pacosako_ui.js
@@ -14,6 +14,8 @@ import 'webpack-jquery-ui/droppable';
 import 'webpack-jquery-ui/selectmenu';
 import 'webpack-jquery-ui/css';
 
+import escape from 'lodash/escape';
+
 /* "Waterdrop" by Porphyr (freesound.org/people/Porphyr) / CC BY 3.0 (creativecommons.org/licenses/by/3.0) */
 import Waterdrop from '../wav/191678__porphyr__waterdrop.wav';
 
@@ -391,7 +393,11 @@ $(function (){
       }
       $('#cb_message').text(msg);
 
-      $('#cb_history').text(game.history || '');
+      const viewHistory = game.history || '';
+      const fullHistory = currentGame.history || '';
+      const futureHistory = fullHistory.slice(viewHistory.length);
+      $('#cb_history_past').html(escape(viewHistory).replace(/\d+\./g, '<b>$&</b>'));
+      $('#cb_history_future').html(escape(futureHistory).replace(/\d+\./g, '<b>$&</b>'));
 
       $('#cb_nav_first').attr('disabled', !game.canUndo);
       $('#cb_nav_prev_turn').attr('disabled', !game.canUndo);