diff --git a/public/css/main.css b/public/css/main.css
index f5ae181..711a830 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -337,3 +337,50 @@ div[class="tooltip-inner"] {
   background: transparent;
   float: right;
 }
+
+/* Scrollable dropdown menus */
+.dropdown-menu-scrollable {
+  max-height: 50vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Search container inside dropdown */
+.dropdown-search-container {
+  padding: 5px 10px;
+}
+
+.dropdown-search-container .navbar-form {
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-search-container .input-group {
+  width: 100%;
+}
+
+.dropdown-search-container .input-group-addon {
+  background-color: #fff;
+  border-right: none;
+}
+
+.dropdown-search-container input.typeahead {
+  border-left: none;
+  box-shadow: none;
+}
+
+.dropdown-search-container input.typeahead:focus {
+  border-color: #ccc;
+  box-shadow: none;
+}
+
+/* Loading indicator in dropdowns */
+.dropdown-loading {
+  padding: 10px 20px;
+  color: #999;
+  text-align: center;
+}
+
+.dropdown-loading .fa-spinner {
+  margin-right: 5px;
+}
diff --git a/public/js/main.js b/public/js/main.js
index 2109259..85ac3c5 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -60,6 +60,8 @@ function set_machine_types() {
 
 function populate_machine_type_menus(machine_types) {
     var run_filter_list = $('#menu-machine-type').parent().find('ul');
+    // Remove loading indicator
+    run_filter_list.find('.dropdown-loading').remove();
     if (run_filter_list.children().length == 0) {
         var items = [];
         $.each(machine_types, function(i) {
@@ -97,6 +99,8 @@ function set_suites() {
 
 function populate_suite_menus(suite_names) {
     var suite_list = $('#menu-suites').parent().find('ul');
+    // Remove loading indicator
+    suite_list.find('.dropdown-loading').remove();
     if (suite_list.children().length == 0) {
             var items = [];
             $.each(suite_names, function(i) {
@@ -279,6 +283,10 @@ $( document ).ready(function() {
         name: 'branches',
         prefetch: '/_paddles/branches/',
         ttl: 30000,
+    }).on('typeahead:loading', function() {
+        $(this).closest('.input-group').find('.input-group-addon').html('<i class="fa fa-spinner fa-spin"></i>');
+    }).on('typeahead:loaded', function() {
+        $(this).closest('.input-group').find('.input-group-addon').html('<i class="fa fa-search"></i>');
     });
 
     $('#search-branches').keypress(function(e) {
diff --git a/pulpito/templates/layout.html b/pulpito/templates/layout.html
index 53dd884..27a222e 100644
--- a/pulpito/templates/layout.html
+++ b/pulpito/templates/layout.html
@@ -53,29 +53,35 @@
                     <a href="#" class="dropdown-toggle" id="menu-branches" data-toggle="dropdown">By Branch
                         <b class="caret"></b>
                     </a>
-                    <ul class="dropdown-menu">
-                        {% for branch in ['main', 'tentacle', 'squid', 'reef'] %}
-                        <li><a onclick="stack_filter('branch', '{{ branch }}')" href="#">{{ branch }}</a></li>
-                        {% endfor %}
-                        <li>
+                    <ul class="dropdown-menu dropdown-menu-scrollable">
+                        <li class="dropdown-search-container">
                             <form class="navbar-form">
-                                <input id="search-branches" class='typeahead' type="text" placeholder='search...'>
+                                <div class="input-group">
+                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
+                                    <input id="search-branches" class='typeahead form-control' type="text" placeholder='search branches...'>
+                                </div>
                             </form>
                         </li>
+                        <li class="divider"></li>
+                        {% for branch in ['main', 'tentacle', 'squid', 'reef'] %}
+                        <li><a onclick="stack_filter('branch', '{{ branch }}')" href="#">{{ branch }}</a></li>
+                        {% endfor %}
                     </ul>
                 </li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" id="menu-suites" data-toggle="dropdown">By Suite
                         <b class="caret"></b>
                     </a>
-                    <ul class="dropdown-menu">
+                    <ul class="dropdown-menu dropdown-menu-scrollable">
+                        <li class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i> Loading...</li>
                     </ul>
                 </li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" id="menu-machine-type" data-toggle="dropdown">By Machine Type
                         <b class="caret"></b>
                     </a>
-                    <ul class="dropdown-menu">
+                    <ul class="dropdown-menu dropdown-menu-scrollable">
+                        <li class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i> Loading...</li>
                     </ul>
                 </li>
             </ul>