diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/AIController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/AIController.js
index 3b9a02b..37b2cf8 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/AIController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/AIController.js
@@ -223,6 +223,9 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
 
     $scope.ApplySearch = function (SearchText) {
 
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+
 
         $scope.filterstring = true;
 
@@ -260,7 +263,7 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
                           var selectimg = true;
                           //var count = 0;
                           if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
-                              var posbodyregion = value._Title.indexOf(SearchText);
+                              var posbodyregion = value._Title.toLowerCase().indexOf(SearchText.toLowerCase());
                               if (posbodyregion > -1) {
                                   selectimg = true;
                                   //count = count + 1;
@@ -276,12 +279,13 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
                           if (selectimg === true) {
                               $scope.imagePath = "~/../content/images/ai/thumbnails/" + value._ThumbnailImage;
 
-                              var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="OpenAdamImage($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');
+                              var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="AdamDetail($event)">'
+                                    + '<div style="width:auto;height:auto;" class="thumbnail" >'
+                                               + '<img style="height:150px" 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,
@@ -310,6 +314,9 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
 
                           $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
                       }
+                      $rootScope.isLoading = false;
+                      $('#spinner').css('visibility', 'hidden');
+
                   },
                   function (error) {
                       // handle errors here
@@ -319,6 +326,113 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
     }
 
 
+
+        $scope.ApplySearchByAlphabet = function (SearchText) {
+
+            $rootScope.isLoading = true;
+            $('#spinner').css('visibility', 'visible');
+
+            $scope.filterstring = true;
+
+            while ($scope.searchAIListViewData.length) {
+                $scope.searchAIListViewData.pop();
+            }
+
+
+
+
+            if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
+
+                localStorage.setItem("AIImageId", SearchText);
+
+            }
+            else {
+                localStorage.setItem("AIImageId", '');
+
+            }
+
+            var promise = DataService.getJson('~/../content/data/json/ai/ai_dat_contentlist.json')
+            promise.then(
+                      function (result) {
+                          $scope.IllustrationData = result;
+
+                          $scope.selectedAIListViewData = new jinqJs()
+                                                          .from($scope.IllustrationData.root.AIData)
+                                                          .orderBy([{ field: '_Title', sort: 'asc' }])
+                                                          .select();
+
+                          $('#grid-view').empty();
+
+                          angular.forEach($scope.selectedAIListViewData, function (value, key) {
+
+                              var selectimg = true;
+                              //var count = 0;
+                              if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
+
+                                  var firstChar = value._Title[0];
+
+                                  if (firstChar == SearchText) {
+                                      selectimg = true;
+                                      //count = count + 1;
+
+                                  }
+                                  else {
+                                      selectimg = false;
+                                      //count = count - 1;
+                                  }
+
+                              }
+
+                              if (selectimg === true) {
+                                  $scope.imagePath = "~/../content/images/ai/thumbnails/" + value._ThumbnailImage;
+
+                                  var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="AdamDetail($event)">'
+                                        + '<div style="width:auto;height:auto;" class="thumbnail" >'
+                                                   + '<img style="height:150px" 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"
+                                  });
+
+
+                                  $scope.searchAIListViewData.push(
+                                  {
+                                      "_id": value._id,
+                                      //"_ImageId": value._ImageId,
+                                      "_Title": value._Title,
+                                      "_contentImage": value._contentImage,
+                                      "_ThumbnailImage": value._ThumbnailImage,
+
+
+                                  });
+                              }
+                          });
+                          $('table > #ListViewDiv > #searchItem').remove();
+                          //Show Error Message in case of gridview if no data is found
+                          if ($scope.searchAIListViewData.length == 0) {
+                              var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
+                              $compile($el)($scope);
+                              $('table > #ListViewDiv > #searchItem').remove();
+
+                              $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
+                          }
+                          $rootScope.isLoading = false;
+                          $('#spinner').css('visibility', 'hidden');
+
+                      },
+                      function (error) {
+                          // handle errors here
+                          console.log(' $scope.IllustrationData = ' + error.statusText);
+                      }
+                   );
+        }
+
+
     $scope.scroll = function () {
         $("html,body").scrollTop(0);
     }
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/ai/ai-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/ai/ai-view.html
index 6b8c6cb..c252b82 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/ai/ai-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/ai/ai-view.html
@@ -16,32 +16,32 @@
                         </form>
                         <nav>
                             <ul class="pagination pagination-sm no-margin">
-                                <li><a href="#" ng-click="ApplySearch('A')">A</a></li>
-                                <li><a href="#" ng-click="ApplySearch('B')">B</a></li>
-                                <li><a href="#" ng-click="ApplySearch('C')">C</a></li>
-                                <li><a href="#" ng-click="ApplySearch('D')">D</a></li>
-                                <li><a href="#" ng-click="ApplySearch('E')">E</a></li>
-                                <li><a href="#" ng-click="ApplySearch('F')">F</a></li>
-                                <li><a href="#" ng-click="ApplySearch('G')">G</a></li>
-                                <li><a href="#" ng-click="ApplySearch('H')">H</a></li>
-                                <li><a href="#" ng-click="ApplySearch('I')">I</a></li>
-                                <li><a href="#" ng-click="ApplySearch('J')">J</a></li>
-                                <li><a href="#" ng-click="ApplySearch('K')">K</a></li>
-                                <li><a href="#" ng-click="ApplySearch('L')">L</a></li>
-                                <li><a href="#" ng-click="ApplySearch('M')">M</a></li>
-                                <li><a href="#" ng-click="ApplySearch('N')">N</a></li>
-                                <li><a href="#" ng-click="ApplySearch('O')">O</a></li>
-                                <li><a href="#" ng-click="ApplySearch('P')">P</a></li>
-                                <li><a href="#" ng-click="ApplySearch('Q')">Q</a></li>
-                                <li><a href="#" ng-click="ApplySearch('R')">R</a></li>
-                                <li><a href="#" ng-click="ApplySearch('S')">S</a></li>
-                                <li><a href="#" ng-click="ApplySearch('T')">T</a></li>
-                                <li><a href="#" ng-click="ApplySearch('U')">U</a></li>
-                                <li><a href="#" ng-click="ApplySearch('V')">V</a></li>
-                                <li><a href="#" ng-click="ApplySearch('W')">W</a></li>
-                                <li><a href="#" ng-click="ApplySearch('X')">X</a></li>
-                                <li><a href="#" ng-click="ApplySearch('Y')">Y</a></li>
-                                <li><a href="#" ng-click="ApplySearch('Z')">Z</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('A')">A</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('B')">B</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('C')">C</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('D')">D</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('E')">E</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('F')">F</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('G')">G</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('H')">H</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('I')">I</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('J')">J</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('K')">K</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('L')">L</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('M')">M</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('N')">N</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('O')">O</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('P')">P</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('Q')">Q</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('R')">R</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('S')">S</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('T')">T</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('U')">U</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('V')">V</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('W')">W</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('X')">X</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('Y')">Y</a></li>
+                                <li><a href="#" ng-click="ApplySearchByAlphabet('Z')">Z</a></li>
                             </ul>
                             <button type="button" class="btn btn-primary btn-sm" ng-click="Reset(query)" style = "margin-bottom:23px"><i class="fa fa-eye"></i>Show All</button>
                         </nav>