diff --git a/src/botPage/view/index.js b/src/botPage/view/index.js
index 3af24bcca7..4818f662c0 100644
--- a/src/botPage/view/index.js
+++ b/src/botPage/view/index.js
@@ -145,17 +145,18 @@ export default class View {
   }
   startTour() {
     const viewScope = this
-    $('#tours').on('change', function onChange() {
-      const value = $(this).val()
-      if (value === '') return
-      if (viewScope.activeTour) {
-        viewScope.activeTour.stop()
-      }
-      viewScope.activeTour = viewScope.tours[value]
-      viewScope.activeTour.start(() => {
-        viewScope.activeTour = null
-      })
-    })
+    $('#select-tour li:first')
+      .nextAll().click((e) => {
+         const value = $(e.target).attr('class')
+         if (value === '') return
+         if (viewScope.activeTour) {
+            viewScope.activeTour.stop()
+          }
+          viewScope.activeTour = viewScope.tours[value]
+          viewScope.activeTour.start(() => {
+            viewScope.activeTour = null
+          })
+       })
   }
   setFileBrowser() {
     const readFile = (f, dropEvent = {}) => {
@@ -263,6 +264,26 @@ export default class View {
     $('.panel .content')
       .mousedown(e => e.stopPropagation()) // prevent content to trigger draggable
 
+    $('.tours')
+      .click(e => {
+        e.stopPropagation()
+        if ($('#select-tour').css('display') === 'none') {
+          $('#select-tour')
+            .fadeIn(100)
+        } else {
+          $('#select-tour')
+            .fadeOut(100)
+        }
+      })
+
+    $('body')
+      .click(() => {
+        if ($('#select-tour').css('display') === 'block') {
+          $('#select-tour')
+            .fadeOut(100)
+        }
+      })
+
     ReactDOM.render(
       <SaveXml
       onSave={(filename, collection) => this.blockly.save(filename, collection)}
diff --git a/static/css/bot.css b/static/css/bot.css
index 3876e85d5a..7d1a1a0e83 100644
--- a/static/css/bot.css
+++ b/static/css/bot.css
@@ -354,6 +354,37 @@ select.tour-highlight {
 }
 
 .languages {
-  display: inline;
-	z-index: 999;
+  z-index: 999;
+}
+
+.tours {
+  z-index: 999;
+  position: relative;
+  margin-right: 240px;
+  font-size: 13px;
+}
+#display-tour, #select-tour {
+  position: absolute;
+  width: 116px;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+#select-tour {
+  background-color: #F2F2F2;
+  border: 1px solid #DEDEDE;
+  color: black;
+  display: none;
+}
+#select_language, #select-tour {
+  top: -3px;
+}
+#select-tour li {
+  cursor: pointer;
+  padding: 3px;
+  margin: 0;
+}
+#display-tour li, #display_language li {
+  cursor: pointer;
+  line-height: 0;
 }
diff --git a/templates/bot.mustache b/templates/bot.mustache
index 7af444e7a7..93d8d7256a 100644
--- a/templates/bot.mustache
+++ b/templates/bot.mustache
@@ -42,11 +42,24 @@
   {{> loading }}
   <div id="topbar">
 	  <div class="right-header">
-	    <select id="tours">
-        <option value="" data-i18n-text="Select a Tour"></option>
-	      <option value="welcome" data-i18n-text="Welcome!"></option>
-	      <option value="introduction" data-i18n-text="Introduction"></option>
-	    </select>
+      <div class="tours">
+        <ul id="display-tour">
+          <li>
+            <span class="tour">Select a Tour</span>
+            <div class="nav-caret"></div>
+          </li>
+        </ul>
+         <ul id="select-tour">
+           <li>
+            <span class="tour">Select a Tour</span>
+            <div class="nav-caret"></div>
+          </li>
+
+           <div class="separator-line-thin-gray"></div>
+          <li class="welcome">Welcome</li>
+          <li class="introduction">Introduction</li>
+        </ul>
+      </div>
 	    {{> language }}
 	  </div>
   </div>