diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 5b98832..5bcce26 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -402,7 +402,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
        // debugger;
         var bgArtJsonPath = '';
 
-       // if ($scope.voId == 9 || $scope.voId == 11) {
             bgArtJsonPath = '~/../content/data/json/da/da_dat_bgart.json';
 
             var bgartdata = DataService.getJson(bgArtJsonPath)
@@ -417,10 +416,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                    // handle errors here
                    console.log(' $scope.bgartData = ' + error.statusText);
                });
-        //}
-        //else
-          //$scope.CalculateImageCordinates($scope.viewOrientationId);
-    };
+          };
 
 
     //calculate coordinates for body region images
@@ -510,10 +506,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             else {
                 //Draw body region which don't have mirror image
 
-                //debugger;
-
-
-                
+                             
                     //0.Scaling as per default zoom                  
                     var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
 
@@ -944,6 +937,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         imgCanvas.style.position = "absolute";
         imgCanvas.style.left = x + "px";
         imgCanvas.style.top = y + "px";
+        
         if (isMaskImage == 'Y') {
             imgCanvas.style.visibility = 'hidden'
             imgCanvas.id = 'imageCanvas' + bodyRegionId + '_mci';
@@ -955,10 +949,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             imgCanvas.id = 'imageCanvas' + bodyRegionId;
             imgCanvas.style.visibility = 'visible'
 
+            if (bodyRegionId == 3) {
+                //set z index of hip canavs to fix the issue caused by overlapping of arm canavs on hip canavs.
+                imgCanvas.style.zIndex = "1000";
+            }
             if (bodyRegionId.match('modestyImg')) {
                 //added class to further access this canavs to show and hide leaf as per modesty seting
                 imgCanvas.className = 'modestyImg'
                 imgCanvas.style.visibility = 'hidden'
+                //set z index to make leaf canvas on top of hip canavs
+                imgCanvas.style.zIndex = "2000";
             }
         }
         imgCanvas.addEventListener('click', function (evt) {
@@ -1243,9 +1243,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
     $scope.createSpeechBubble = function (event, text, x, y) {
-
+        //set z index to make annoation speech buble on top others
         $('#canvasDiv').css('cursor', 'pointer');
-        $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <div class="">'
+        $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px; z-index:3000"> <div class="">'
             + '<div class="Bubble">'
             + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text + '</div><div class="bottomLeftArrow"></div>'
             //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>