=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties	2015-11-26 16:57:49 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties	2015-12-02 16:59:35 +0000
@@ -1,3 +1,4 @@
+tracker_capture=Tracker capture
 online_notification=You are online
 offline_notification=You are offline
 login_failed=Login failed, check your username and password and try again
@@ -379,4 +380,6 @@
 custom_form_has_invalid_attribute=Custom form has invalid attribute.
 custom_form_has_invalid_dataelement=Custom form has invalid data element.
 has_no_dataelements=has no dataelements.
-section=Section
\ No newline at end of file
+section=Section
+display_mode=Display mode
+tracker_capture_display_mode=Tracker capture display mode
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-11-22 20:50:10 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-12-02 16:59:35 +0000
@@ -84,7 +84,8 @@
         <script type="text/javascript" src="scripts/directives.js"></script>        
         <script type="text/javascript" src="scripts/controllers.js"></script>
         <script type="text/javascript" src="scripts/leftbar-menu-controller.js"></script>
-        <script type="text/javascript" src="scripts/report-types-controller.js"></script>        
+        <script type="text/javascript" src="scripts/report-types-controller.js"></script>
+        <script type="text/javascript" src="scripts/display-mode-controller.js"></script>
         <script type="text/javascript" src="scripts/ng-csv.js"></script>
         <script type="text/javascript" src="scripts/sticky.min.js"></script>
         <script type="text/javascript" src="components/dashboard/dashboard-controller.js"></script>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-11-30 11:05:20 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-12-02 16:59:35 +0000
@@ -28,6 +28,7 @@
                 TEIService) {  
     
     $scope.maxOptionSize = 30;
+    $scope.availablePrograms = {};
     
     //Selection
     $scope.ouModes = [{name: 'SELECTED'}, {name: 'CHILDREN'}, {name: 'DESCENDANTS'}, {name: 'ACCESSIBLE'}];         
@@ -97,6 +98,7 @@
             }
             
             //Labels
+            $scope.trackerCaptureLabel = $translate.instant('tracker_capture');
             $scope.orgUnitLabel = $translate.instant('org_unit');
             $scope.listAllLabel = $translate.instant('list_all');
             $scope.registerLabel = $translate.instant('register');
@@ -115,6 +117,7 @@
             $scope.showHideLabel = $translate.instant('show_hide_columns');
             $scope.listProgramsLabel = $translate.instant('list_programs');
             $scope.settingsLabel = $translate.instant('settings');
+            $scope.displayModeLabel = $translate.instant('display_mode');
             
             $scope.loadPrograms($scope.selectedOrgUnit);
         }
@@ -336,6 +339,17 @@
         }
     };    
     
+    $scope.showDisplayMode = function(){        
+        
+        var modalInstance = $modal.open({
+            templateUrl: 'views/display-mode-modal.html',
+            controller: 'DisplayModeController'           
+        });
+
+        modalInstance.result.then(function () {           
+        }, function () {});
+    };
+    
     $scope.showHideColumns = function(){
         $scope.hiddenGridColumns = 0;
         

=== added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/display-mode-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/display-mode-controller.js	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/display-mode-controller.js	2015-12-02 16:59:35 +0000
@@ -0,0 +1,8 @@
+//Controller for column show/hide
+trackerCapture.controller('DisplayModeController',
+        function($scope, $modalInstance) {
+    
+    $scope.close = function () {
+      $modalInstance.close($scope.gridColumns);
+    };
+});
\ No newline at end of file

=== added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/display-mode-modal.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/display-mode-modal.html	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/display-mode-modal.html	2015-12-02 16:59:35 +0000
@@ -0,0 +1,9 @@
+<div class="modal-header page">
+    <h3>{{'tracker_capture_display_mode'| translate}}</h3>
+</div>
+<div class="modal-body page">   
+      
+</div>
+<div class="modal-footer page">        
+    <button class="btn btn-default" data-ng-click="close()">{{'close'| translate}}</button>
+</div> 
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html	2015-10-23 08:08:54 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html	2015-12-02 16:59:35 +0000
@@ -56,32 +56,18 @@
     </div> 
 
     <div ng-show="selectedOrgUnit">
-
+        
         <!-- top bar begins -->
         <div class="row top-bar">        
-            <div class="col-sm-12">            
-                <span ng-if='!showRegistrationDiv'>
-                    {{selectedProgram.trackedEntity.name}} {{searchLabel}}                    
-                    <span class="btn-group horizonal-spacing" ng-show="selectedProgram">
-                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'ALL'" title="{{allEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("ALL")'><i class="fa fa-list mouse-pointer"></i></label>
-                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'ACTIVE'" title="{{activeEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("ACTIVE")'><i class="fa fa-circle-o mouse-pointer"></i></label>
-                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'COMPLETED'" title="{{completedEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("COMPLETED")'><i class="fa fa-check mouse-pointer"></i></label>
-                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'CANCELLED'" title="{{cancelledEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("CANCELLED")'><i class="fa fa-times mouse-pointer"></i></label>
-                    </span>
-                    <span class="small-horizonal-spacing" ng-if="teiFetched && pager.total">
-                        ({{'total'| translate}}:  {{pager.total}})
-                    </span>
-                </span>
-                <span ng-if='showRegistrationDiv'>
-                    {{selectedProgram.trackedEntity.name}} {{'register'| translate}}
-                </span>
+            <div class="col-sm-12">                
+                {{trackerCaptureLabel}}
                 <div class="pull-right hideInPrint">
                     <div class="btn-group" dropdown is-open="status.isopen">
                         <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle ng-disabled="trackedEntityList.rows.length <= 0">
                             <i class="fa fa-cog" title="{{settingsLabel}}"></i>
                         </button>
                         <ul class="dropdown-menu pull-right" role="menu">
-                            <li ng-if="trackedEntityList.rows.length > 0"><a href ng-click="showHideColumns()">{{showHideLabel}}</a></li>
+                            <li><a href ng-click="showDisplayMode()">{{displayModeLabel}}</a></li>
                         </ul>
                     </div>
                 </div>            
@@ -103,22 +89,19 @@
             </div>
         </div>
         <div class="row">
+            
             <!-- program selection begins -->
-            <div id="selectDropDownParent" class="input-group col-md-4">            
-                <button type="button" class="select-dropdown-button form-control" ng-show="programs.length > 0">{{selectedProgram ? selectedProgram.name : 'please_select_a_program'| translate}}</button>
-                <button type="button" class="select-dropdown-button form-control" ng-show="programs.length < 1" ng-disabled="true">{{programs.length > 0 ? 'please_select_a_program' : 'no_program_exists'| translate}}</button>
-                <div class="input-group-btn program-drop-down">
-                    <button class="btn btn-default select-dropdown-caret" type="button" title="{{listProgramsLabel}}" data-toggle="dropdown" ng-disabled="programs.length < 1"><i class="fa fa-caret-down"></i></button>
-                    <ul id="selectDropDown" class="dropdown-menu dropdown-menu-right">
-                        <li>
-                            <a href ng-click="getProgramAttributes(null)">{{programSelectLabel}}</a>
-                        </li>
-                        <li ng-repeat="program in programs| orderBy: 'name'">
-                            <a href ng-click="getProgramAttributes(program)">{{program.name}}</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+            <div class="col-md-4 small-vertical-spacing">
+                <ui-select ng-model="availablePrograms.selectedProgram" 
+                        theme="select2" 
+                        on-select="getProgramAttributes(availablePrograms.selectedProgram)"
+                        style="width:100%;">
+                    <ui-select-match allow-clear="true" class="form-control-ui-select" placeholder="{{'select_or_search' | translate}}">{{$select.selected.name  || $select.selected}}</ui-select-match>
+                    <ui-select-choices  repeat="program in programs | orderBy: 'name' | filter: $select.search | limitTo:maxOptionSize">
+                        <span ng-bind-html="program.name | highlight: $select.search"></span>
+                    </ui-select-choices>
+                </ui-select>
+            </div>            
             <!-- program selection ends -->
 
             <!-- simple/advanced search begins -->
@@ -176,7 +159,31 @@
         <!-- entity grid begins -->
         <i ng-if="!teiFetched && showTrackedEntityDiv" class="fa fa-spinner fa-spin fa-2x"></i>
         <div class="row">
-             <div class="col-sm-12" ng-if="!showRegistrationDiv" ng-include="'views/tei.html'"></div>
+            <div class="col-sm-12">
+                <span ng-if='!showRegistrationDiv'>
+                    <span class="btn-group" ng-show="selectedProgram">
+                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'ALL'" title="{{allEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("ALL")'><i class="fa fa-list mouse-pointer"></i></label>
+                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'ACTIVE'" title="{{activeEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("ACTIVE")'><i class="fa fa-circle-o mouse-pointer"></i></label>
+                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'COMPLETED'" title="{{completedEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("COMPLETED")'><i class="fa fa-check mouse-pointer"></i></label>
+                        <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'CANCELLED'" title="{{cancelledEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("CANCELLED")'><i class="fa fa-times mouse-pointer"></i></label>
+                    </span>
+                    <span ng-if="teiFetched && pager.total">
+                        {{'total'| translate}}:  {{pager.total}}
+                    </span>
+                </span>
+                
+                <div class="pull-right hideInPrint" ng-if="trackedEntityList.rows.length > 0 && !showRegistrationDiv">
+                    <button class="btn btn-info"
+                            type="button"                             
+                            ng-click="showHideColumns()">
+                        {{showHideLabel}}
+                    </button>                    
+                </div>
+                
+            </div>
+        </div>
+        <div class="row">            
+            <div class="col-sm-12" ng-if="!showRegistrationDiv" ng-include="'views/tei.html'"></div>
         </div>
         <!-- entity grid ends -->
     </div>