=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2014-04-04 11:55:55 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2014-04-07 11:43:43 +0000
@@ -8,6 +8,7 @@
     "list_all_entities": "List All Entities",
     "list": "List",
     "search": "Search",
+    "advanced_search": "Advanced search",
     "search_for": "Search for",
     "registered_entities": "Registered Entities",
     "empty_entity_list": "There are no reigstered entities",
@@ -32,6 +33,8 @@
     "create_new_event": "Create new event",
     "close_search": "Close search",
     "search_attributes": "Search attributes",
+    "available_search_attributes": "Available search attributes",
+    "selected_search_attributes": "Selected search attributes",
     "search_for_dashboard": "Search for dashboard items",
     "dashboard": "Dashboard",
     "home": "Home",
@@ -41,6 +44,10 @@
     "notes": "Notes",
     "dataentry": "Data Entry",
     "current_selections": "Current selections",
+    "org_unit_mode": "Searching org unit",
+    "use_selected": "Use selected",
+    "use_immediate_children": "Use immdiate children",
+    "use_all_children": "Use all children",
     "data_element": "Data element",
     "value": "Value",
     "show_hide_widgets": "Show/Hide widgets",
@@ -49,5 +56,7 @@
     "program_stage": "Program stage",
     "scheduled_date": "Scheduled date",
     "scheduling": "Scheduling",
-    "enroll": "Enroll"
+    "enroll": "Enroll",
+    "like": "LIKE",
+    "not_like": "NOT LIKE"
 }
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2014-04-04 11:55:55 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2014-04-07 11:43:43 +0000
@@ -17,6 +17,7 @@
     //Selection
     $scope.selectedOrgUnit = '';
     $scope.selectedProgram = '';
+    $scope.ouMode = 'SELECTED';
     
     //Filtering
     $scope.reverse = false;
@@ -49,7 +50,7 @@
         
         $scope.searchField.isOpen = false;
         
-        $scope.trackedEntityList = [];
+        $scope.trackedEntityList = null;
         
         $scope.gridColumns = AttributesFactory.getForListing();
 
@@ -69,17 +70,21 @@
     };
     
     $scope.clearEntities = function(){
-        $scope.trackedEntityList = [];
+        $scope.trackedEntityList = null;
     };
     
     $scope.showRegistration = function(){
         
     };  
     
-    $scope.showSearch = function(){
+    $scope.showSearch = function(){        
         $scope.showSearchDiv = !$scope.showSearchDiv;
     };
     
+    $scope.hideSearch = function(){        
+        $scope.showSearchDiv = false;
+    };
+    
     $scope.closeSearch = function(){
         $scope.showSearchDiv = !$scope.showSearchDiv;
     };   
@@ -118,6 +123,7 @@
     
     $scope.search = function(){       
         console.log('the search is:  ', $scope.attributes);
+        console.log('the mode is:  ', $scope.ouMode);
     };
        
     $scope.getHelpContent = function(){
@@ -125,6 +131,143 @@
     };    
 })
 
+//Controller for the search section
+.controller('SearchController',
+        function($scope,                
+                storage,
+                TranslationService) {
+
+    TranslationService.translate();
+    
+    //search attibutes
+    $scope.attributes = storage.get('ATTRIBUTES');     
+    $scope.availableAttributes = [];
+    $scope.selectedAttributes = [];
+    $scope.showAdvancedSearchDiv = false;
+    
+    angular.forEach($scope.attributes, function(attribute){
+        $scope.availableAttributes.push(attribute);
+    });
+    
+    $scope.moveToSelected = function(attribute, fromView){  
+        
+        if(attribute){
+            
+            if(fromView){
+                attribute = attribute[0];
+            }
+
+            if(angular.isObject(attribute)) {            
+                if($scope.selectedAttributes.indexOf(attribute) === -1){       
+
+                    var filter = {operands: [], operand: '', values: [], value: ''};
+
+                    if(attribute.valueType === 'number' || attribute.valueType === 'date'){
+                        filter.operands = ['=', '>','>=', '<', '<=', '!=' ];
+                        filter.operand = filter.operands[0];
+                    }
+
+                    else if(attribute.valueType === 'bool'){
+                        filter.operands = ['One of'];
+                        filter.operand = filter.operands[0];
+                        filter.values = ['No', 'Yes'];
+                        filter.value = filter.values[0];
+                    }
+
+                    else if(attribute.valueType === 'combo'){
+                        filter.operands = ['One of'];
+                        filter.operand = filter.operands[0];
+                        filter.values = attribute.optionSet.options;
+                        filter.value = filter.values[0];
+                    }
+                    else{
+                        filter.operands = ['like', 'not_like' ];
+                        filter.operand = filter.operands[0];
+                    }
+
+                    attribute.filters = [filter];
+                    $scope.selectedAttributes.push(attribute);
+                    var index = $scope.availableAttributes.indexOf(attribute);
+                    $scope.availableAttributes.splice(index, 1);
+                }
+            }            
+        }         
+    };
+    
+    $scope.moveAllToSelected = function(){     
+        for(var i=0; i<$scope.availableAttributes.length;)
+        angular.forEach($scope.availableAttributes, function(attribute){
+            //$scope.selectedAttributes.push(attribute);            
+            $scope.moveToSelected(attribute, false);
+        });        
+        
+        $scope.availableAttributes = [];
+    };
+    
+    $scope.addFilter = function(attribute){
+        
+        var filter = {operands: [], operand: '', values: [], value: ''};
+                    
+        if(attribute.valueType === 'number' || attribute.valueType === 'date'){
+            filter.operands = ['=', '>','>=', '<', '<=', '!=' ];
+            filter.operand = filter.operands[0];
+        }
+
+        else if(attribute.valueType === 'bool'){
+            filter.operands = ['One of'];
+            filter.operand = filter.operands[0];
+            filter.values = ['No', 'Yes'];
+            filter.value = filter.values[0];
+        }
+
+        else if(attribute.valueType === 'combo'){
+            filter.operands = ['One of'];
+            filter.operand = filter.operands[0];
+            filter.values = attribute.optionSet.options;
+            filter.value = filter.values[0];
+        }
+        else{
+            filter.operands = ['like', 'not_like' ];
+            filter.operand = filter.operands[0];
+        }
+
+        attribute.filters.push(filter);
+
+        //console.log('I am going to add filter for dataElement:  ', dataElement);  
+    };
+    
+    $scope.removeFilter = function(filter, attribute){
+        
+        var index = attribute.filters.indexOf(filter);        
+        attribute.filters.splice(index, 1);
+        
+        console.log();
+        if(attribute.filters.length === 0 || angular.isUndefined(attribute.filters.length)){
+            index = $scope.selectedAttributes.indexOf(attribute);
+            $scope.selectedAttributes.splice(index, 1);
+            $scope.availableAttributes.push(attribute);
+        }
+        
+    };
+    
+    $scope.showAdvancedSearch = function(){        
+        $scope.showAdvancedSearchDiv = !$scope.showAdvancedSearchDiv;
+    };
+    
+    $scope.hideAdvancedSearch = function(){        
+        $scope.showAdvancedSearchDiv = false;
+    };
+    
+    $scope.closeAdvancedSearch = function(){
+        $scope.showAdvancedSearchDiv = !$scope.showAdvancedSearchDiv;
+    }; 
+    
+    $scope.search = function(){
+        console.log($scope.attributes);
+    };
+    
+})
+
 //Controller for dashboard
 .controller('DashboardController',
         function($rootScope,

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2014-04-04 11:55:55 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2014-04-07 11:43:43 +0000
@@ -389,6 +389,11 @@
     margin: 0;
 }
 
+.big-button {
+    padding-left: 40px;
+    padding-right: 40px;
+}
+
 .max-column-width {
     max-width:200px !important; 
     word-wrap:break-word; 
@@ -418,6 +423,11 @@
     border-top: none;
     background-color: #ebf0f6;
 }
+.dhis2-table-striped-border {
+    width: 100%;
+    border-collapse: collapse;
+    cursor: pointer;
+}
 
 .dhis2-table-striped-border tr th {
     border: 1px solid #cad5e5;
@@ -437,8 +447,7 @@
 .dhis2-table-striped>thead>tr, 
 .dhis2-table-striped>tbody>tr, 
 .dhis2-table-striped>tfoot>tr {
-    border-bottom: 1px solid #cad5e5;
-    //border: none;
+    border-bottom: 1px solid #cad5e5;    
 }
 
 .dhis2-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
@@ -549,7 +558,8 @@
 }
 
 .vertial-spacing {
-    margin-top: 10px;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 /*----------------------------------------------------------------------------*/
@@ -675,13 +685,96 @@
     }
 }
 
-.form-control {
+/*.form-control {
     height: 30px;
     font-size: 12px;
     color: #555;
-}
+}*/
 
 input[type=number] {
     border: 1px solid #aaa;
     padding: 4px 1px;
+}
+
+/*----------------------------------------------------------------------------*/
+/* Search filters
+/*----------------------------------------------------------------------------*/
+
+.panel-heading {
+    padding: 5px 10px;	
+}
+
+.panel {
+    margin-top: 2px;	
+}
+
+.selected-data-item-list {
+    width: 100%;
+    display: inline-block;
+    color: #000;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    overflow-y: auto;   
+    white-space: nowrap;    
+    word-wrap: break-word;
+    font-size: 14px;
+    color: #555;
+}
+
+.selected-data-item {
+    margin: 5px;
+    display: block;
+    white-space: nowrap;    
+    word-wrap: break-word;
+}
+
+.dataelement-filter{
+    width: 100%;
+    display: block;
+}
+
+.filter-name {
+    color: red;
+}
+
+.filter-operand {
+    width: 20%;
+    float: left;
+}
+
+.filter-value {
+    width: 70%;
+    float: left;
+}
+
+.filter-add {
+    width: 5%;
+    float: left;
+    padding-top: 5px;
+    padding-left: 5px;
+}
+.filter-remove {
+    width: 5%;
+    float: left;
+    padding-top: 5px;
+    padding-left: 5px;
+}
+
+.input-field {
+    border: 1px solid #aaa;
+    padding: 4px 1px;
+    display: block;
+    width: 100%;	    
+    color: #555;
+    vertical-align: middle;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
+        
 }
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/search.html'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/search.html	2014-03-17 15:59:31 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/search.html	2014-04-07 11:43:43 +0000
@@ -1,48 +1,184 @@
-<accordion>
-    <accordion-group is-open="searchField.isOpen">
-        <accordion-heading>
-            {{searchField.label| translate}}
-            <span class="right">
-                <a href ng-click="closeSearch()" title="{{'close'| translate}}"><span class="black"><i class="fa fa-times"></i></span></a>
-            </span>
-        </accordion-heading>
-        <table>
-            <tr ng-repeat="attribute in attributes">
-                <td>
-                    {{attribute.name}}
-                </td>
-                <td>
-                    <div ng-switch="attribute.valueType">
-                        <div ng-switch-when="date">
-                            <input type="text" ng-date ng-model="attribute.value" />
-                        </div>
-                        <div ng-switch-when="trueOnly">
-                            <input type="checkbox" ng-model="attribute.value" />
-                        </div>
-                        <div ng-switch-when="bool">
-                            <select ng-model="attribute.value" />
-                            <option value="">{{'please_select'| translate}}</option>                        
-                            <option value="0">{{'no'| translate}}</option>
-                            <option value="1">{{'yes'| translate}}</option>
-                            </select>
-                        </div>
-                        <div ng-switch-when="combo">
-                            <input type="text" 
-                                   ng-model="attribute.value"                                                 
-                                   typeahead="option.name for option in attribute.personAttributeOptions | filter:$viewValue | limitTo:20" 
-                                   typeahead-open-on-focus 
-                                   />
-                        </div>
-                        <div ng-switch-when="number">
-                            <input type="number" ng-model="attribute.value" />
-                        </div>
-                        <div ng-switch-default>
-                            <input type="text" ng-model="attribute.value" />                                        
-                        </div>
-                    </div>                                                                
-                </td>
-            </tr>
-        </table>
-        <button ng-click="search()">{{'search'| translate}}</button>
-    </accordion-group>
-</accordion>                    
\ No newline at end of file
+<div class="bordered-div">    
+    <div class="vertial-spacing">
+        <span>
+            <a href ng-click="showAdvancedSearch()" title="{{'advanced_search'| translate}}"><span class='black'><i class="fa fa-search-plus"></i></span></a>            
+        </span>
+        <span class="pull-right">
+            <a href ng-click="closeSearch()" title="{{'close'| translate}}"><span class='black'><i class="fa fa-times"></i></span></a>            
+        </span>
+    </div>
+    <div class="vertial-spacing">
+        <div ng-switch="showAdvancedSearchDiv">
+            <div ng-switch-when=true>
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        {{'available_search_attributes'| translate}} |
+                        <span ng-show="availableAttributes.length > 0">                                        
+                            <a href ng-click="moveToSelected(selectedAttribute, true)" title="{{'move_to_selected'| translate}}"><i class="fa fa-angle-down"></i></a>                                        
+                            <a href ng-click="moveAllToSelected()" title="{{'move_all_to_selected'| translate}}"><i class="fa fa-angle-double-down"></i></a>                                        
+                        </span>                        
+                    </div>                                
+                    <select class="form-control" multiple ng-model="selectedAttribute" ng-options="attribute as attribute.name for attribute in availableAttributes | orderBy:'name'" ng-dblclick="moveToSelected(selectedAttribute, true)">                                        
+                    </select>
+                </div>
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        {{'selected_search_attributes'| translate}}                                   
+                    </div>
+                    <div class="selected-data-item-list">
+                        <div class="selected-data-item" ng-show="selectedAttributes.length > 0" ng-repeat="attribute in selectedAttributes">
+                            <div class="filter-name">
+                                {{attribute.name}}                                         
+                            </div>
+                            <div>
+                                <div ng-switch="attribute.valueType">
+                                    <div ng-switch-when="number">
+                                        <div class="dataelement-filter" ng-repeat="filter in attribute.filters">
+                                            <div class="filter-operand">
+                                                <select ng-model="filter.operand" class="input-field" ng-options="operand for operand in filter.operands">
+                                                </select>
+                                            </div>
+                                            <div class="filter-value">
+                                                <input type="number" ng-model="filter.value" class="input-field">
+                                            </div>
+                                            <div class="filter-add">
+                                                <a href ng-click="addFilter(attribute)" title="{{'add_new_filter'| translate}}"><span class="black"><i class="fa fa-plus"></i></span></a> 
+                                            </div>
+                                            <div class="filter-remove">
+                                                <a href ng-click="removeFilter(filter, attribute)" title="{{'remove_filter'| translate}}"><span class="black"><i class="fa fa-trash-o"></i></span></a>
+                                            </div>
+                                        </div>                        
+                                    </div>
+                                    <div ng-switch-when="combo">
+                                        <div class="dataelement-filter" ng-repeat="filter in attribute.filters">
+                                            <div class="filter-operand">
+                                                <select ng-model="filter.operand" class="input-field" ng-options="operand for operand in filter.operands">
+                                                </select>
+                                            </div>
+                                            <div class="filter-value">
+                                                <select ng-model="filter.value" class="input-field" ng-options="value for value in filter.values">
+                                                </select>                                                            
+                                            </div>
+                                            <div class="filter-add">
+                                                <a ng-show="attribute.filters.length < filter.values.length" href ng-click="addFilter(attribute)" title="{{'add_new_filter'| translate}}"><span class="black"><i class="fa fa-plus"></i></span></a> 
+                                            </div>
+                                            <div class="filter-remove">
+                                                <a href ng-click="removeFilter(filter, attribute)" title="{{'remove_filter'| translate}}"><span class="black"><i class="fa fa-trash-o"></i></span></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div ng-switch-when="bool">
+                                        <div class="dataelement-filter" ng-repeat="filter in attribute.filters">
+                                            <div class="filter-operand">
+                                                <select ng-model="filter.operand" class="input-field" ng-options="operand for operand in filter.operands">
+                                                </select>
+                                            </div>
+                                            <div class="filter-value">
+                                                <select ng-model="filter.value" class="input-field" ng-options="value for value in filter.values">
+                                                </select>                                                            
+                                            </div>
+                                            <div class="filter-add">
+                                                <a ng-show="attribute.filters.length < filter.values.length" href ng-click="addFilter(attribute)" title="{{'add_new_filter'| translate}}"><span class="black"><i class="fa fa-plus"></i></span></a> 
+                                            </div>
+                                            <div class="filter-remove">
+                                                <a href ng-click="removeFilter(filter, attribute)" title="{{'remove_filter'| translate}}"><span class="black"><i class="fa fa-trash-o"></i></span></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div ng-switch-when="date">
+                                        <div class="dataelement-filter" ng-repeat="filter in attribute.filters">
+                                            <div class="filter-operand">
+                                                <select ng-model="filter.operand" class="input-field" ng-options="operand for operand in filter.operands">
+                                                </select>
+                                            </div>
+                                            <div class="filter-value">
+                                                <input type="text" ng-date ng-model="filter.value" class="input-field">
+                                            </div>
+                                            <div class="filter-add">
+                                                <a href ng-click="addFilter(attribute)" title="{{'add_new_filter'| translate}}"><span class="black"><i class="fa fa-plus"></i></span></a> 
+                                            </div>
+                                            <div class="filter-remove">
+                                                <a href ng-click="removeFilter(filter, attribute)" title="{{'remove_filter'| translate}}"><span class="black"><i class="fa fa-trash-o"></i></span></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div ng-switch-default>
+                                        <div class="dataelement-filter" ng-repeat="filter in attribute.filters">
+                                            <div class="filter-operand">
+                                                <select ng-model="filter.operand" class="input-field" ng-options="operand for operand in filter.operands">
+                                                </select>
+                                            </div>
+                                            <div class="filter-value">
+                                                <input type="text" ng-model="filter.value" class="input-field">
+                                            </div>
+                                            <div class="filter-add">
+                                                <a href ng-click="addFilter(attribute)" title="{{'add_new_filter'| translate}}"><span class="black"><i class="fa fa-plus"></i></span></a> 
+                                            </div>
+                                            <div class="filter-remove">
+                                                <a href ng-click="removeFilter(filter, attribute)" title="{{'remove_filter'| translate}}"><span class="black"><i class="fa fa-trash-o"></i></span></a>
+                                            </div>
+                                        </div> 
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="clearfix"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div ng-switch-when="false">
+                <table class="dhis2-list-table-striped dhis2-table-hover">
+                    <tr ng-repeat="attribute in attributes">
+                        <td>
+                            {{attribute.name}}
+                        </td>
+                        <td>
+                            <div ng-switch="attribute.valueType">
+                                <div ng-switch-when="date">
+                                    <input type="text" class="form-control" ng-date ng-model="attribute.value" />
+                                </div>
+                                <div ng-switch-when="trueOnly">
+                                    <input type="checkbox" class="form-control" ng-model="attribute.value" />
+                                </div>
+                                <div ng-switch-when="bool">
+                                    <select ng-model="attribute.value" class="form-control">
+                                        <option value="">{{'please_select'| translate}}</option>                        
+                                        <option value="0">{{'no'| translate}}</option>
+                                        <option value="1">{{'yes'| translate}}</option>
+                                    </select>
+                                </div>
+                                <div ng-switch-when="combo">
+                                    <input type="text" 
+                                           class="form-control"
+                                           ng-model="attribute.value"                                                 
+                                           typeahead="option for option in attribute.optionSet.options | filter:$viewValue | limitTo:20" 
+                                           typeahead-open-on-focus 
+                                           />
+                                </div>
+                                <div ng-switch-when="number">
+                                    <input type="number" class="form-control" ng-model="attribute.value"/>
+                                </div>
+                                <div ng-switch-default>
+                                    <input type="text" class="form-control" ng-model="attribute.value" />                                        
+                                </div>
+                            </div>                                                                                                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{'org_unit_mode'| translate}}</td>
+                        <td>
+                            <input type='radio' ng-model='ouMode' value='SELECTED'>{{'use_selected'| translate}}<br/>
+                            <input type='radio' ng-model='ouMode' value='CHILDREN'>{{'use_immediate_children'| translate}}<br/>
+                            <input type='radio' ng-model='ouMode' value='DESCENDANTS'>{{'use_all_children'| translate}}
+                        </td>
+                    </tr>        
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <button type="button" class="btn big-button" title="{{'search'| translate}}" ng-click="search()">                    
+        <i class="fa fa-search"></i>
+    </button> 
+</div>
+

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/selection.html'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/selection.html	2014-04-04 11:55:55 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/selection.html	2014-04-07 11:43:43 +0000
@@ -21,176 +21,112 @@
         <a href ng-click="getHelpContent()" title="{{'help'| translate}}"><i class="fa fa-question-circle"></i></a>
     </h1>
 
-    <!-- selection begins-->
-    <div>
-        <table>
-            <tr>
-                <td>{{'registering_unit'| translate}}</td>
-                <td><input type="text" class="fixed-text-width" selected-org-unit ng-model="selectedOrgUnit.name" value="{{selectedOrgUnit.name|| 'please_select'| translate}}" disabled=""></td>                           
-                <td style='padding-left: 5px;'>
-                    <button class="button"
-                            ng-show="selectedOrgUnit" 
-                            ng-click="loadTrackedEntities()">
-                        {{'list_all_entities'| translate}}
-                    </button>  
-                </td>
-                <td style='padding-left: 5px;'>
-                    <button class="button"
-                            ng-show="selectedOrgUnit" 
-                            ng-click="showSearch()">
-                        {{'search'| translate}}
-                    </button>  
-                </td>
-                <td style='padding-left: 5px;'>
-                    <button class="button"
-                            ng-disabled="!selectedOrgUnit" 
-                            ng-click="showRegisteration()">
-                        {{'add_new'| translate}}
-                    </button>                                
-                </td>
-            </tr>
-            <tr ng-show="showSearchDiv">
-                <td colspan="5">
-                    <!-- search begins -->
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            {{'search_attributes'| translate}}
-                            <span class="pull-right">
-                                <a href ng-click="closeSearch()" title="{{'remove'| translate}}"><span class='black'><i class="fa fa-times-circle"></i></span></a>            
-                            </span>        
-                        </div>
-                        <div class="form-group">
-                            <div class="row" ng-repeat="attribute in attributes">
-                                <div class="col-sm-6">
-                                    {{attribute.name}}
-                                </div>
-                                <div class="col-sm-6">
-                                    <div ng-switch="attribute.valueType">
-                                        <div ng-switch-when="date">
-                                            <input type="text" class="form-control" ng-date ng-model="attribute.value" />
-                                        </div>
-                                        <div ng-switch-when="trueOnly">
-                                            <input type="checkbox" class="form-control" ng-model="attribute.value" />
-                                        </div>
-                                        <div ng-switch-when="bool">
-                                            <select ng-model="attribute.value" class="form-control">
-                                                <option value="">{{'please_select'| translate}}</option>                        
-                                                <option value="0">{{'no'| translate}}</option>
-                                                <option value="1">{{'yes'| translate}}</option>
-                                            </select>
-                                        </div>
-                                        <div ng-switch-when="combo">
-                                            <input type="text" 
-                                                   class="form-control"
-                                                   ng-model="attribute.value"                                                 
-                                                   typeahead="option.name for option in attribute.personAttributeOptions | filter:$viewValue | limitTo:20" 
-                                                   typeahead-open-on-focus 
-                                                   />
-                                        </div>
-                                        <div ng-switch-when="number">
-                                            <input type="number" class="form-control" ng-model="attribute.value"/>
-                                        </div>
-                                        <div ng-switch-default>
-                                            <input type="text" class="form-control" ng-model="attribute.value" />                                        
-                                        </div>
-                                    </div>                                                                                                    
-                                </div>
-                            </div>
-                        </div>
-                        <div class="vertial-spacing">
-                            <button ng-click="search()">{{'search'| translate}}</button>
-                        </div>
-                    </div>                        
-                    <!-- search ends -->
-                </td>
-            </tr>
-        </table>                    
-    </div>                
-    <!-- selection ends -->
+    <div class="row">
+        <input type="text" selected-org-unit ng-model="selectedOrgUnit.name" ng-hide=true>
+        <div class="input-group col-md-6">
+            <input type="text" class="form-control" ng-focus="hideSearch()">
+            <span class="input-group-btn">
+                <button class="btn btn-default" type="button" ng-click="showSearch()"><i class="fa fa-caret-down"></i></button>
+            </span>                
+        </div>
+        <div class="btn-group col-md-6">
+            <button type="button" class="btn btn-default">{{'search'| translate}}</button>
+            <button type="button" class="btn btn-default" ng-click="loadTrackedEntities()">{{'list_all_entities'| translate}}</button>
+            <button type="button" class="btn btn-default" ng-click="showRegisteration()">{{'add_new'| translate}}</button>
+        </div>
+    </div>
+    <div class="row" ng-show="showSearchDiv">
+        <div class="col-md-6">
+            <div ng-include="'views/search.html'" ng-controller='SearchController'></div>             
+        </div>
+    </div>
+
 
     <!-- entity grid begins -->
-    <div id="listDiv" ng-switch="trackedEntityList">                    
-        <div ng-switch-when=""></div>
-        <div ng-switch-default>
-            <h2>
-                {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}
-            </h2>
-            <div ng-switch="trackedEntityList.rows.length">
-                <div ng-switch-when="undefined">
-                    <p>
-                        {{'empty'| translate}} {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}                        
-                    </p>
-                </div>
-                <div ng-switch-when="0">
-                    <p>
-                        {{'empty'| translate}} {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}
-                    </p>
-                </div>
-                <div ng-switch-default>
-
-                    <!-- entity begins -->
-                    <table class="listTable dhis2-table-striped-border dhis2-table-hover">                    
-                        <thead>                        
-                            <tr>
-                                <th ng-show="!gridColumn.hide" 
-                                    class="max-column-width"                                                
-                                    ng-repeat="gridColumn in gridColumns">
-
-                                    <!-- sort icon begins -->
-                                    <span ng-hide="gridColumn.showFilter" class="bold" ng-click="sortGrid(gridColumn)">
-                                        <i ng-show="sortHeader == gridColumn.id && !reverse" class="fa fa-sort-desc"></i>
-                                        <i ng-show="sortHeader == gridColumn.id && reverse" class="fa fa-sort-asc"></i>
-                                        {{gridColumn.name}}
-                                    </span>
-                                    <!-- sort icon ends -->
-
-                                    <!-- filter icon begins -->
-                                    <span class='pull-right'>
-                                        <span ng-show="gridColumn.type !== 'date'">
-                                            <a href ng-click="filterInGrid(gridColumn)" title="{{'filter'| translate}}"><span ng-class="{true: 'filter - without - content', false: 'filter - with - content'} [filterText[gridColumn.id] == undefined || filterText[gridColumn.id] == '']"><i class="fa fa-filter"></i></span></a>
-                                        </span>
-                                        <span ng-show="gridColumn.type === 'date'">
-                                            <a href ng-click="filterInGrid(gridColumn)" title="{{'filter'| translate}}"><span ng-class="{true: 'filter - without - content', false: 'filter - with - content'} [(filterText[gridColumn.id].start == 'undefined' || filterText[gridColumn.id].start == '') && (filterText[gridColumn.id].end == 'undefined' || filterText[gridColumn.id].end == '')]"><i class="fa fa-filter"></i></span></a>
-                                        </span>                                                    
-                                    </span>
-                                    <!-- filter icon ends -->
-
-                                    <!-- filter input field begins -->
-                                    <div ng-show="gridColumn.showFilter">
-                                        <span ng-show="gridColumn.type !== 'date'">
-                                            <input type="text" ng-model="filterText[gridColumn.id]" ng-blur="filterInGrid(gridColumn)">
-                                        </span>                                                    
-                                        <span ng-show="gridColumn.type === 'date'">
-                                            <input placeholder="{{'start_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].start" data-ng-date readonly="readonly">
-                                            <span ng-hide="filterText[gridColumn.id].start == 'undefined' || filterText[gridColumn.id].start == ''">
-                                                <a href ng-click='removeStartFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
-                                            </span>
-                                            <input placeholder="{{'end_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].end" data-ng-date readonly="readonly">
-                                            <span ng-hide="filterText[gridColumn.id].end == 'undefined' || filterText[gridColumn.id].end == ''">
-                                                <a href ng-click='removeEndFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
-                                            </span>
-                                        </span>
-                                    </div>
-                                    <!-- filter input field ends -->
-                                </th>                                    
-                            </tr>                        
-                        </thead>
-                        <tbody id="list">
-                            <tr ng-repeat="trackedEntity in trackedEntityList.rows| paginate:rowsPerPage | orderBy:sortHeader:reverse | gridFilter:filterText:currentFilter" 
-                                ng-click="showDashboard(trackedEntity)">
-                                <td class="max-column-width"                                              
-                                    ng-repeat="gridColumn in gridColumns">                                                
-                                    {{trackedEntity[gridColumn.id]}}                                                
-                                </td>
-                            </tr>
-                        </tbody>        
-                    </table>
-                    <paginator></paginator>
-                    <!-- entity ends -->                            
-                </div>
-            </div>                        
-        </div>
-    </div> 
+    <div ng-show="trackedEntityList">
+        <div id="listDiv" ng-switch="trackedEntityList">                    
+            <div ng-switch-when=""></div>
+            <div ng-switch-default>
+                <h2>
+                    {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}
+                </h2>
+                <div ng-switch="trackedEntityList.rows.length">
+                    <div ng-switch-when="undefined">
+                        <p>
+                            {{'empty'| translate}} {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}                        
+                        </p>
+                    </div>
+                    <div ng-switch-when="0">
+                        <p>
+                            {{'empty'| translate}} {{selectedProgram.trackedEntity.name|| 'entity' | translate}} {{'list'| translate}}
+                        </p>
+                    </div>
+                    <div ng-switch-default>
+
+                        <!-- entity begins -->
+                        <table class="listTable dhis2-table-striped-border dhis2-table-hover">                    
+                            <thead>                        
+                                <tr>
+                                    <th ng-show="!gridColumn.hide" 
+                                        class="max-column-width"                                                
+                                        ng-repeat="gridColumn in gridColumns">
+
+                                        <!-- sort icon begins -->
+                                        <span ng-hide="gridColumn.showFilter" class="bold" ng-click="sortGrid(gridColumn)">
+                                            <i ng-show="sortHeader == gridColumn.id && !reverse" class="fa fa-sort-desc"></i>
+                                            <i ng-show="sortHeader == gridColumn.id && reverse" class="fa fa-sort-asc"></i>
+                                            {{gridColumn.name}}
+                                        </span>
+                                        <!-- sort icon ends -->
+
+                                        <!-- filter icon begins -->
+                                        <span class='pull-right'>
+                                            <span ng-show="gridColumn.type !== 'date'">
+                                                <a href ng-click="filterInGrid(gridColumn)" title="{{'filter'| translate}}"><span ng-class="{true: 'filter - without - content', false: 'filter - with - content'} [filterText[gridColumn.id] == undefined || filterText[gridColumn.id] == '']"><i class="fa fa-filter"></i></span></a>
+                                            </span>
+                                            <span ng-show="gridColumn.type === 'date'">
+                                                <a href ng-click="filterInGrid(gridColumn)" title="{{'filter'| translate}}"><span ng-class="{true: 'filter - without - content', false: 'filter - with - content'} [(filterText[gridColumn.id].start == 'undefined' || filterText[gridColumn.id].start == '') && (filterText[gridColumn.id].end == 'undefined' || filterText[gridColumn.id].end == '')]"><i class="fa fa-filter"></i></span></a>
+                                            </span>                                                    
+                                        </span>
+                                        <!-- filter icon ends -->
+
+                                        <!-- filter input field begins -->
+                                        <div ng-show="gridColumn.showFilter">
+                                            <span ng-show="gridColumn.type !== 'date'">
+                                                <input type="text" ng-model="filterText[gridColumn.id]" ng-blur="filterInGrid(gridColumn)">
+                                            </span>                                                    
+                                            <span ng-show="gridColumn.type === 'date'">
+                                                <input placeholder="{{'start_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].start" data-ng-date readonly="readonly">
+                                                <span ng-hide="filterText[gridColumn.id].start == 'undefined' || filterText[gridColumn.id].start == ''">
+                                                    <a href ng-click='removeStartFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
+                                                </span>
+                                                <input placeholder="{{'end_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].end" data-ng-date readonly="readonly">
+                                                <span ng-hide="filterText[gridColumn.id].end == 'undefined' || filterText[gridColumn.id].end == ''">
+                                                    <a href ng-click='removeEndFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
+                                                </span>
+                                            </span>
+                                        </div>
+                                        <!-- filter input field ends -->
+                                    </th>                                    
+                                </tr>                        
+                            </thead>
+                            <tbody id="list">
+                                <tr ng-repeat="trackedEntity in trackedEntityList.rows| paginate:rowsPerPage | orderBy:sortHeader:reverse | gridFilter:filterText:currentFilter" 
+                                    ng-click="showDashboard(trackedEntity)">
+                                    <td class="max-column-width"                                              
+                                        ng-repeat="gridColumn in gridColumns">                                                
+                                        {{trackedEntity[gridColumn.id]}}                                                
+                                    </td>
+                                </tr>
+                            </tbody>        
+                        </table>
+                        <paginator></paginator>
+                        <!-- entity ends -->                            
+                    </div>
+                </div>                        
+            </div>
+        </div> 
+    </div>
     <!-- entity grid ends -->
 </div>