diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index b44383a..c919bd6 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -4030,7 +4030,7 @@ AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$l
         }
 
         $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
-            var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div style='z-index:60000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);width:35px;left:" + (x - 6) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
+            var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div class='multiLineAnnotation' style='z-index:60000;left:" + (x - 6) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
             //Issue #7286 :Undefined annotation should not appear
             for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                 var annotation = $scope.MultiLanguageAnnationArray[i];
@@ -4085,7 +4085,7 @@ AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$l
 
 
 
-            var sppechBubbleDotHTML = '<div id="dot" style="position:absolute;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
+            var sppechBubbleDotHTML = '<div id="dot" class="singleLineAnnotation" style="z-index:10000"></div>'
                       + '<div id="sppeachBubble" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                       + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                       + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
@@ -4177,7 +4177,7 @@ AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$l
         }
         $scope.createSpeechBubbleBasedOnTransparencyWithCtrl = function (pointClicked_annotation, Exists_annotation, x, y, sub_id_annotation) {
 
-            var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div style='z-index:59000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);width:35px;left:" + (x - 6) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.j + "'></div><div data=" + $scope.j + " id=" + sub_id_annotation + " class='appendDragg_annotation' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:59000;' id='bord_annotation" + $scope.j + "'></div></div>";
+            var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div class='multiLineAnnotation' style='z-index:59000;left:" + (x - 6) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.j + "'></div><div data=" + $scope.j + " id=" + sub_id_annotation + " class='appendDragg_annotation' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:59000;' id='bord_annotation" + $scope.j + "'></div></div>";
             if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
                 if (Exists_annotation == 0) {
                     $("#canvasDiv").append(sppechBubbleHTML_annotation);
@@ -4272,7 +4272,7 @@ AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$l
             $("#bord_annotation").remove();
             $("#sppeachBubble_annotation").remove();
             $("#dot_annotation").remove();
-            var sppechBubbleDotHTML_annotation = '<div id="dot_annotation" style="position:absolute;width:35px;display:none;z-index:59000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
+            var sppechBubbleDotHTML_annotation = '<div id="dot_annotation" class="singleLineAnnotation" style="z-index:59000"></div>'
                      + '<div id="sppeachBubble_annotation" style="height:auto!important;z-index:60000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;font-weight:bold;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                      + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                      + '<img class="crossDiv_temp_annotation" style="width:18px" src=' + $rootScope.path + '></span></div>'
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 0f411ef..31a2af4 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -1189,7 +1189,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             $scope.isAnnotationDivAlreadyPresent = true;
         }
         if ($scope.isAnnotationDivAlreadyPresent == true) {
-            var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;width:35px;display:none;z-index:13000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
+            var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" class="singleLineAnnotation" style="z-index:13000"></div>'
                       + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                       + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                       + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
diff --git a/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css b/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
index 1a76ff6..627b43c 100644
--- a/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
+++ b/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
@@ -1319,4 +1319,26 @@ footer .browserIcons
 #emailToHelpBlock
 {
      display:none;
+}
+
+.singleLineAnnotation {
+	position:absolute;
+	width:35px;
+	display:none;
+	border-top:2px solid #000;
+	transform:rotate(40deg);
+	-moz-transform:rotate(40deg);
+	-o-transform:rotate(40deg);
+	-ms-transform:rotate(40deg);
+	-webkit-transform:rotate(40deg);
+}
+.multiLineAnnotation {
+	position:absolute;
+	width:35px;
+	border-top:2px solid #000;
+	transform:rotate(40deg);
+	-moz-transform:rotate(40deg);
+	-o-transform:rotate(40deg);
+	-ms-transform:rotate(40deg);
+	-webkit-transform:rotate(40deg);
 }
\ No newline at end of file