diff --git a/static/js/settings_bots.js b/static/js/settings_bots.js
index 0d01afc52c..5703a8de0c 100644
--- a/static/js/settings_bots.js
+++ b/static/js/settings_bots.js
@@ -46,10 +46,16 @@ function render_bots() {
         });
     });
 
-    if ($("#bots_lists_navbar .active-bots-tab").hasClass("active")) {
+    if ($("#bots_lists_navbar .add-a-new-bot-tab").hasClass("active")) {
+        $("#add-a-new-bot-form").show();
+        $("#active_bots_list").hide();
+        $("#inactive_bots_list").hide();
+    } else if ($("#bots_lists_navbar .active-bots-tab").hasClass("active")) {
+        $("#add-a-new-bot-form").hide();
         $("#active_bots_list").show();
         $("#inactive_bots_list").hide();
     } else {
+        $("#add-a-new-bot-form").hide();
         $("#active_bots_list").hide();
         $("#inactive_bots_list").show();
     }
@@ -331,12 +337,26 @@ exports.set_up = function () {
         ));
     });
 
+    $("#bots_lists_navbar .add-a-new-bot-tab").click(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        $("#bots_lists_navbar .add-a-new-bot-tab").addClass("active");
+        $("#bots_lists_navbar .active-bots-tab").removeClass("active");
+        $("#bots_lists_navbar .inactive-bots-tab").removeClass("active");
+        $("#add-a-new-bot-form").show();
+        $("#active_bots_list").hide();
+        $("#inactive_bots_list").hide();
+    });
+
     $("#bots_lists_navbar .active-bots-tab").click(function (e) {
         e.preventDefault();
         e.stopPropagation();
 
+        $("#bots_lists_navbar .add-a-new-bot-tab").removeClass("active");
         $("#bots_lists_navbar .active-bots-tab").addClass("active");
         $("#bots_lists_navbar .inactive-bots-tab").removeClass("active");
+        $("#add-a-new-bot-form").hide();
         $("#active_bots_list").show();
         $("#inactive_bots_list").hide();
     });
@@ -345,8 +365,10 @@ exports.set_up = function () {
         e.preventDefault();
         e.stopPropagation();
 
+        $("#bots_lists_navbar .add-a-new-bot-tab").removeClass("active");
         $("#bots_lists_navbar .active-bots-tab").removeClass("active");
         $("#bots_lists_navbar .inactive-bots-tab").addClass("active");
+        $("#add-a-new-bot-form").hide();
         $("#active_bots_list").hide();
         $("#inactive_bots_list").show();
     });
diff --git a/static/templates/settings/bot-settings.handlebars b/static/templates/settings/bot-settings.handlebars
index 7134cfa58c..356cadd782 100644
--- a/static/templates/settings/bot-settings.handlebars
+++ b/static/templates/settings/bot-settings.handlebars
@@ -12,7 +12,8 @@
         </div>
 
         <ul class="nav nav-tabs nav-justified" id="bots_lists_navbar">
-            <li class="active active-bots-tab"><a>{{t "Active bots" }}</a></li>
+            <li class="active add-a-new-bot-tab"><a>{{t "Add a new bot" }}</a></li>
+            <li class="active-bots-tab"><a>{{t "Active bots" }}</a></li>
             <li class="inactive-bots-tab"><a>{{t "Inactive bots" }}</a></li>
         </ul>
 
@@ -24,9 +25,8 @@
 
         <div id="bot_table_error" class="alert alert-error hide"></div>
 
-        <div class="add-new-bot-box grey-bg">
+        <div id="add-a-new-bot-form">
             <form id="create_bot_form" class="form-horizontal no-padding">
-                <h4 class="new-bot-section-title light no-margin">{{t "Add a new bot" }}</h4>
                 <div class="new-bot-form">
                     <div class="input-group">
                         <label for="bot_type">
@@ -64,13 +64,13 @@
                     <div class="input-group">
                         <div id="bot_avatar_file"></div>
                         <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
-                        <button class="button rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
-                        <button class="button rounded" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
+                        <button class="button white rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
+                        <button class="button white rounded" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
                     </div>
                     <p>
                         <div id="bot_avatar_file_input_error" class="text-error"></div>
                     </p>
-                    <button type="submit" class="button rounded sea-green" id="create_bot_button">
+                    <button type="submit" class="button white rounded sea-green" id="create_bot_button">
                         {{t 'Create bot' }}
                     </button>
                 </div>