diff --git a/static/js/tictactoe_widget.js b/static/js/tictactoe_widget.js
index d22be08ad2..da18d5c881 100644
--- a/static/js/tictactoe_widget.js
+++ b/static/js/tictactoe_widget.js
@@ -46,7 +46,7 @@ var tictactoe_data_holder = function () {
     self.get_widget_data = function () {
         function square(i) {
             return {
-                val: square_values[i] || i,
+                val: square_values[i],
                 idx: i,
                 disabled: waiting || square_values[i] || game_over,
             };
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index 2ebb2a05ce..c334f09f71 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -2797,8 +2797,29 @@ div.topic_edit_spinner .loading_indicator_spinner {
 
 div.message_content table.tictactoe {
     width: 80px;
+    margin-left: 0px;
 }
 
-td.tictactoe {
+div.message_content td.tictactoe {
     width: 15px;
+    border: none;
+    padding: 2px;
+}
+
+div.message_content button.tictactoe-square {
+    background-color: #81bba4;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 3px;
+    font-size: 25px;
+    color: white;
+}
+
+div.message_content button.tictactoe-square:hover {
+    background-color: #808c87;
+}
+
+div.message_content button.tictactoe-square:disabled {
+    background-color: #beded1;
 }
diff --git a/static/templates/widgets/tictactoe-widget.handlebars b/static/templates/widgets/tictactoe-widget.handlebars
index 2160612f47..2259926b87 100644
--- a/static/templates/widgets/tictactoe-widget.handlebars
+++ b/static/templates/widgets/tictactoe-widget.handlebars
@@ -1,7 +1,6 @@
 <h3>Tic Tac Toe</h3>
 
-{{ move_status }}
-<br />
+<h4>{{ move_status }}</h4>
 
 <table class="tictactoe">
     {{#each squares}}