diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 8ad95381f1c..c822ce0d524 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1,3 +1,4 @@
+/*[fmt]1C20-1C0D-E*/
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -16,7 +17,6 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-/*[fmt]1C20-1C0D-E*/
 /*+clearfix {*/
 div.toolbar:after,
 .multi-wizard .progress ul li:after,
@@ -2543,6 +2543,7 @@ div.toolbar div.filters select {
 
 div.toolbar div.text-search {
   float: right;
+  position: relative;
 }
 
 div.toolbar div.text-search div.search-bar {
@@ -2677,6 +2678,120 @@ div.toolbar div.button.add span {
   border-right: 1px solid #43586B;
 }
 
+/*** Advanced search*/
+#advanced_search {
+  width: 15px;
+  position: absolute;
+  left: 139px;
+  top: 4px;
+  z-index: 4;
+  background: none;
+}
+
+#advanced_search .icon {
+  /*+opacity:56%;*/
+  filter: alpha(opacity=56);
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56);
+  -moz-opacity: 0.56;
+  opacity: 0.56;
+  background: url(../images/sprites.png) no-repeat -62px -162px;
+  padding: 10px;
+  position: absolute;
+  top: 1px;
+  left: -1px;
+  z-index: 10;
+}
+
+#advanced_search:hover .icon {
+  /*+opacity:100%;*/
+  filter: alpha(opacity=100);
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+}
+
+#advanced_search .form-container {
+  /*+opacity:91%;*/
+  filter: alpha(opacity=91);
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91);
+  -moz-opacity: 0.91;
+  opacity: 0.91;
+  /*+box-shadow:0px 5px 9px #B6B0B0;*/
+  -moz-box-shadow: 0px 5px 9px #B6B0B0;
+  -webkit-box-shadow: 0px 5px 9px #B6B0B0;
+  -o-box-shadow: 0px 5px 9px #B6B0B0;
+  box-shadow: 0px 5px 9px #B6B0B0;
+  border: 1px solid #808080;
+  /*+border-radius:0 0 4px 4px;*/
+  -moz-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0 0 4px 4px;
+  -khtml-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+  left: -290px;
+  top: 2px;
+  position: absolute;
+  display: inline-block;
+  background: #FFFFFF;
+  padding: 18px;
+  cursor: default;
+}
+
+#advanced_search .form-container .name {
+  width: 66px;
+  float: left;
+}
+
+#advanced_search .form-container .value {
+  width: 186px;
+  float: left;
+}
+
+#advanced_search .form-container .form-item {
+  width: 268px;
+  height: 40px;
+  margin-bottom: 15px;
+}
+
+#advanced_search .form-container .form-item input,
+#advanced_search .form-container .form-item select {
+  width: 97%;
+  padding: 3px;
+}
+
+#advanced_search input[type=submit] {
+  background: url(../images/bg-gradients.png) 0px -220px;
+  /*+box-shadow:0px 2px 5px #858585;*/
+  -moz-box-shadow: 0px 2px 5px #858585;
+  -webkit-box-shadow: 0px 2px 5px #858585;
+  -o-box-shadow: 0px 2px 5px #858585;
+  box-shadow: 0px 2px 5px #858585;
+  border: 1px solid #606060;
+  border-top: none;
+  color: #FFFFFF;
+  font-size: 12px;
+  font-weight: bold;
+  /*+text-shadow:0px 1px 1px #000000;*/
+  -moz-text-shadow: 0px 1px 1px #000000;
+  -webkit-text-shadow: 0px 1px 1px #000000;
+  -o-text-shadow: 0px 1px 1px #000000;
+  text-shadow: 0px 1px 1px #000000;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 8px 20px;
+}
+
+#advanced_search input[type=submit]:hover {
+  /*+box-shadow:inset 0px 2px 3px #000000;*/
+  -moz-box-shadow: inset 0px 2px 3px #000000;
+  -webkit-box-shadow: inset 0px 2px 3px #000000;
+  -o-box-shadow: inset 0px 2px 3px #000000;
+  box-shadow: inset 0px 2px 3px #000000;
+}
+
 /*** Panel controls*/
 #browser div.panel div.toolbar div.panel-controls {
   float: right;
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 0be908a344a..726a8a2ed9e 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -666,26 +666,26 @@
   var createFilters = function($toolbar, filters) {
     if (!filters) return false;
 
-    var $filters = $('<div></div>').addClass('filters reduced-hide');
-    $filters.append($('<label>').html(_l('label.filterBy')));
+      var $filters = $('<div></div>').addClass('filters reduced-hide');
+      $filters.append($('<label>').html(_l('label.filterBy')));
 
-    var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
+      var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
 
-    if (filters)
-      $.each(filters, function(key) {
-        if(this.preFilter != null && this.preFilter() == false) {
-          return true; //skip to next item in each loop
-        }
-        var $option = $('<option>').attr({
-          value: key
-        }).html(_l(this.label));
+      if (filters)
+        $.each(filters, function(key) {
+          if(this.preFilter != null && this.preFilter() == false) {
+            return true; //skip to next item in each loop
+          }
+          var $option = $('<option>').attr({
+            value: key
+          }).html(_l(this.label));
 
-        $option.appendTo($filterSelect);
+          $option.appendTo($filterSelect);
 
-        return true;
-      });
+          return true;
+        });
 
-    return $filters.appendTo($toolbar);
+        return $filters.appendTo($toolbar);
   };
 
   var createSearchBar = function($toolbar, listViewData) {
@@ -693,12 +693,19 @@
     var $searchBar = $('<div></div>').addClass('search-bar reduced hide').appendTo($search);
     $searchBar.append('<input type="text" />');
     $search.append('<div id="basic_search" class="button search"></div>');
-		
-		if(listViewData.advSearchFields != null)
-		  $search.append('<div id="advanced_search" class="button search"></div>'); 
-		
+
+    if (listViewData.advSearchFields != null) {
+      $search.append(
+        $('<div>').attr({
+        id: 'advanced_search'
+      })
+      .addClass('button search')
+      .append($('<div>').addClass('icon'))
+      );
+    }
+
     return $search.appendTo($toolbar);
-  };
+  }; 
 
   /**
    * Makes set of icons from data, in the for of a table cell
@@ -1527,9 +1534,20 @@
         }
       );
     };
-				
-    $listView.find('.button.search#advanced_search').bind('click', function(event) {	
-			cloudStack.dialog.createForm({
+
+    var closeAdvancedSearch = function() {
+      $('#advanced_search .form-container:visible').remove();
+    };
+
+    $listView.find('.button.search#advanced_search .icon').bind('click', function(event) {
+      if ($('#advanced_search .form-container:visible').size()) {
+        closeAdvancedSearch();
+
+        return false;
+      }
+      
+			var form = cloudStack.dialog.createForm({
+        noDialog: true,
 				form: {
 					title: 'Advanced Search',					
 					fields: listViewData.advSearchFields
@@ -1537,8 +1555,22 @@
 				after: function(args) {				  
 					advancedSearch(args);	
 					$listView.find('.button.search#basic_search').siblings('.search-bar').find('input').val(''); //clear basic search input field to avoid confusion of search result   
+          closeAdvancedSearch();
 				}
 			});
+      var $formContainer = form.$formContainer;
+      var $form = $formContainer.find('form');
+
+      $formContainer.hide().appendTo('#advanced_search').show();
+      $form.find('.form-item:first input').focus();
+      $form.find('input[type=submit]')
+        .show()
+        .appendTo($form)
+        .val('Search');
+
+      $form.submit(function() {
+        form.completeAction($formContainer);
+      });
 					
       return false;
     });