diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 9a69c4e..cf4850a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -461,9 +461,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             //$rootScope.switchCanvasToPaintCanvas();
         }
 
-
+        $rootScope.isShapeSyleOkBtnClicked = false;
         $rootScope.setPropertiesForShapes = function (id) {
-        
+            $rootScope.isShapeSyleOkBtnClicked = true;
             
             if ((document.getElementById('fill-option').checked == false) && (document.getElementById('Outline-Option').checked == false)) {
               //  $('#btnShapeStyle').attr('disabled', 'disabled');
@@ -532,9 +532,34 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
 
         $rootScope.disableAnnotationToolBar = function () {
-           
-            $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)");
-            $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)");
+            if ($rootScope.isShapeSyleOkBtnClicked == false) {
+                $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)");
+                $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)");
+                var previewBorderColor = $("#outlineColor span.minicolors-swatch-color").css('background-color');
+                $(".marginTopBtm10 div.outlinediv").css("border-color", previewBorderColor);
+                var previewBgColor = $("#editstylebackgroundcolor span.minicolors-swatch-color").css('background-color');
+                $("#imgOpacity").css("background-color", previewBgColor);
+                $('#borderWidthCanvasElement').val(1);
+                $('.marginTopBtm10 div.outlinediv').css("border-width", 1);
+                $("#imgOpacity").css("opacity", 1);
+                $(".marginTopBtm10 div.outlinediv").css("opacity", 1);
+                //$("#borderWidthCanvasElement").change(function () {
+                //    $(".marginTopBtm10 div.outlinediv").css("border-color", x);
+                //});
+            } else {
+                var previewBgColor = $("#shapeStyleDiv").css('background-color');
+                var previewBorderColor = $('#previewBorder').css('border-color');
+                var previewBorderWidth = $('#previewBorder').css('border-width');
+                var previewOpacity = $('#previewBorder').css('opacity');
+                $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", previewBgColor);
+                $("#imgOpacity").css("background-color", previewBgColor);
+                $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", previewBorderColor);
+                $(".marginTopBtm10 div.outlinediv").css("border-color", previewBorderColor);
+                $('.marginTopBtm10 div.outlinediv').css("border-width", previewBorderWidth);
+                $('#borderWidthCanvasElement').val(previewBorderWidth.split("px"));
+                $("#imgOpacity").css("opacity", previewOpacity);
+                $(".marginTopBtm10 div.outlinediv").css("opacity", previewOpacity);
+            }
             document.getElementById('modelbackground').style.display = "none";
             document.getElementById('modeleditstyle').style.display = "none";
             //Edit Shape Style popup should open at it's default position
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index e3bf9ff..4109392 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -524,7 +524,7 @@
                                 <!--#7931-->
 
                                 <div id="edit-block" style="display: none; font-size: 13px;">Edit Shape Style</div>
-                                <div class="outlinediv" ng-mouseover="mouseMoveToolTip(170, 170, 120, 'Edit Style')" ng-mouseleave="mouseOutToolTip()">
+                                <div id="previewBorder" class="outlinediv" ng-mouseover="mouseMoveToolTip(170, 170, 120, 'Edit Style')" ng-mouseleave="mouseOutToolTip()">
                                     <div id="shapeStyleDiv" class="fullcolordiv" ng-click="disableAnnotationtoolOnListManager||enableAnnotationToolBar()">
 
                                     </div>
@@ -1436,9 +1436,9 @@
             var borderWidth = 1;
             var borderColor = "#000";
             $("#borderWidthCanvasElement").change(function () {
-
                 borderWidth = $(this).val();
-
+                borderColor = $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color");
+             
                 if (borderColor != null) {
                     document.getElementById("imgOpacity").parentNode.style.border = borderWidth + "px" + " " + "solid" + " " + borderColor;
                     //$("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);