diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
index 9ea57b8..17282b0 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
@@ -158,7 +158,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
     };
 
     $scope.loadAllCI = function () {
-
+        $('#ciSpinner').css('visibility', 'visible');
+        $('#ciSpinner').css('zIndex', '20000');
         var promise = DataService.getJson('~/../content/data/json/ci/ci_dat_contentlist.json')
         promise.then(
                   function (result) {
@@ -170,32 +171,41 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
                                                       .select();
 
                       // console.log($scope.selectedCIListViewData);
-                      $('#grid-view').empty();
-                      angular.forEach($scope.selectedCIListViewData, function (value, key) {
-                          $scope.imagePath = "~/../content/images/ci/thumbnails/" + value._ThumbnailImage;
+                      
 
-                          var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="openView($event)">'
+
+                      $('#grid-view').empty();
+                      var $e1 = $('<ul><li ng-repeat="value in selectedCIListViewData" ><div id="{{value._id}}" class="col-sm-3 col-md-2" title = "{{value._Title}}"  data-ng-click="openView($event)">'
                               + '<div class="thumbnail" >'
-                                         + '<img id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
-                                         + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
+                                         + '<img id="{{value._Title}}" ng-src="~/../content/images/ci/thumbnails/{{value._ThumbnailImage}}" >'//alt="{{value._Title}}" >'
+                                         + '<div class="caption"><p> {{value._Title}}</p></div></a></div></div></li></ul>').appendTo('#grid-view');
+                      $compile($e1)($scope);
+                      //angular.forEach($scope.selectedCIListViewData, function (value, key) {
+                      //    $scope.imagePath = "~/../content/images/ci/thumbnails/" + value._ThumbnailImage;
 
+                      //    var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="openView($event)">'
+                      //        + '<div class="thumbnail" >'
+                      //                   + '<img id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
+                      //                   + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
 
-                          $compile($el)($scope);
 
-                          $(".sidebar").mCustomScrollbar({
-                              autoHideScrollbar: true,
-                              //theme:"rounded"
-                          });
+                      //    $compile($el)($scope);
 
-                      });
+                      //    $(".sidebar").mCustomScrollbar({
+                      //        autoHideScrollbar: true,
+                      //        //theme:"rounded"
+                      //    });
 
+                      //});
+                      
+                      $timeout(function () { $('#ciSpinner').css('visibility', 'hidden'); }, 200);
                   },
                   function (error) {
                       // handle errors here
                       console.log(' $scope.IllustrationData = ' + error.statusText);
                   }
                );
-
+       
     }
 
     $scope.IsVisible = function () {