diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index c84e771..c4f366c 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -5650,8 +5650,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         type: 'line',
                         draggable: true,
-                        strokeStyle: 'black',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
                         rounded: true,
                         x1: $scope.offsetX1, y1: $scope.offsetY1,
                         x2: $scope.x, y2: $scope.y,
@@ -5712,12 +5712,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $('#canvas').addLayer({
                         layer: true,
                         name: 'Rect_' + $rootScope.resetRect,
-                        fillStyle: '#fff',
+                        fillStyle: $rootScope.shapestyleFillColor,
                         type: 'rectangle',
                         draggable: true,
-                        strokeStyle: 'black',
+                        strokeStyle: $rootScope.shapestyleborderColor,
                         opacity: $rootScope.shapestyleOpacity,
-                        strokeWidth: 2,
+                       strokeWidth: $rootScope.shapestyleborderWidth,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: $scope.x - $scope.offsetX1,
                         height: $scope.y - $scope.offsetY1,
@@ -5781,7 +5781,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     break;
 
                 case "Circle":
-
+                 //   alert($rootScope.shapestyleFillColor);
                     $rootScope.resetCircle = $rootScope.ObjectIndex++;
                     $('#canvas').addLayer({
                         layer: true,
@@ -5789,9 +5789,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         type: 'ellipse',
                         opacity: $rootScope.shapestyleOpacity,
                         draggable: true,
-                        strokeStyle: '#000',
-                        strokeWidth: 2,
-                        fillStyle: '#FFF',
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
+                        fillStyle: $rootScope.shapestyleFillColor,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
                         // Place a handle at each side and each corner
@@ -5855,8 +5855,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         name: 'Arrow_' + $rootScope.resetArrow,
                         draggable: true,
-                        strokeStyle: '#000',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
                         rounded: true,
                         startArrow: true,
                         arrowRadius: 7,
@@ -6058,8 +6058,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         name: "TextRect_" + $rootScope.resetTextRect,
                         dragGroups: ['shapes'],
                         opacity: $rootScope.shapestyleOpacity,
-                        strokeStyle: 'black',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
+                        fillStyle: $rootScope.shapestyleFillColor,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: $scope.x - $scope.offsetX1,
                         height: $scope.y - $scope.offsetY1,
@@ -6148,7 +6149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $rootScope.textArea = $("#text_area").val();
         $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
         $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
-      
+       // alert($rootScope.fontColor);
         $('#canvas').drawText({
             layer: true,
             draggable: true,
@@ -6184,8 +6185,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                   groups: ['TextArea_' + $rootScope.resetText],
                   dragGroups: ['TextArea_' + $rootScope.resetText],
                   opacity: $rootScope.shapestyleOpacity,
-                  strokeStyle: 'black',
-                  strokeWidth: 2,
+               //   strokeStyle: 'black',
+                 // strokeWidth: 2,
+                  strokeStyle: $rootScope.shapestyleborderColor,
+                  strokeWidth: $rootScope.shapestyleborderWidth,
+                 // fillStyle: $rootScope.shapestyleFillColor,
                   x: $scope.offsetX1, y: $scope.offsetY1,
                   width: $scope.x - $scope.offsetX1,
                   height: $scope.y - $scope.offsetY1,
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 8e9f8d7..9fbc95d 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -255,9 +255,28 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
         //opacity code
         $rootScope.shapestyleOpacity = 1;
+        $rootScope.shapestyleFillColor = "#fff";
+        $rootScope.shapestyleFillBorderColor = "black";
+        $rootScope.shapestyleborderWidth=2;
+
         $rootScope.shapestyle = function (id) {
 
             $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
+            $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
+            $rootScope.shapestyleFillBorderColor = $("#" + id).parent().css('border');
+            var a = $rootScope.shapestyleFillBorderColor;
+            var b = a.split("px");
+            //  alert(b);
+            $rootScope.shapestyleborderWidth = b[0];
+          
+         //  alert(b[0]);
+            //alert(b[1]);
+            var c = b[1].split("solid");
+          //  alert(c[1]);
+            $rootScope.shapestyleborderColor = c[1];
+
+
+            //     alert($rootScope.shapestyleFillColor);
             $('#editshapestyle').modal('hide');
         }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index b46e1a3..790a659 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -673,7 +673,7 @@
                                 <div class="col-sm-12">
                                     <div class="checkbox no-margin">
                                         <label>
-                                            <input type="checkbox" checked> Fill Option
+                                            <input id="fill-option" type="checkbox" checked> Fill Option
                                         </label>
                                     </div>
                                 </div>
@@ -692,7 +692,7 @@
                                           
                                             <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
                                                 <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 
-                                                <input type="text" class="form-control demo2" data-control="saturation" style="display:none;" value="#0088cc">
+                                                <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
                                             </div>
 
 
@@ -732,7 +732,7 @@
                                 <div class="col-sm-12">
                                     <div class="checkbox no-margin">
                                         <label>
-                                            <input type="checkbox" checked> Outline Option
+                                            <input id="Outline-Option" type="checkbox" checked> Outline Option
                                         </label>
                                     </div>
                                 </div>
@@ -744,7 +744,7 @@
 
                                         <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
 
-                                            <input type="text" class="form-control demo1" data-control="saturation" style="display:none;" value="#0088cc">
+                                            <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
                                         </div>
 
 
@@ -755,10 +755,10 @@
                                 <div class="col-sm-6">
                                     <div class="form-horizontal">
                                         <div class="form-group">
-                                            <label for="inputPassword" class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
+                                            <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
                                             <div class="col-sm-9 marginTop5">
-                                                <select class="form-control input-sm">
-                                                    <option value="1" selected>1</option>
+                                                <select id="borderWidthCanvasElement" class="form-control input-sm">
+                                                    <option value="1">1</option>
                                                     <option value="2">2</option>
                                                     <option value="3">3</option>
                                                     <option value="4">4</option>
@@ -1008,8 +1008,21 @@
 
     <script>
         $(document).ready(function () {
+            var borderWidth = 1;
+            var borderColor;
+            $("#borderWidthCanvasElement").change(function () {
+
+                borderWidth = $(this).val();
+         
+                if (borderColor != null) {
+                    $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
+                } else {
+                    $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
+                }
+            });
+            
 
-            $('.demo1').each(function () {
+            $('.borderColorCanvasPreview').each(function () {
              
                 $(this).minicolors({
                     control: $(this).attr('data-control') || 'hue',
@@ -1026,6 +1039,13 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
+                            console.log(borderWidth);
+                            // alert(borderWidth);
+                            
+                            borderColor = value;
+                            $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value);
+
+                         //   alert($("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value));
                         }
                     },
                     theme: 'bootstrap'
@@ -1035,7 +1055,7 @@
 
 
 
-            $('.demo2').each(function () {
+            $('.outerBackgroundColor').each(function () {
 
                 $(this).minicolors({
                     control: $(this).attr('data-control') || 'hue',
@@ -1052,6 +1072,8 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
+                            $("#imgOpacity").parent().css("background-color", value);
+                       
                         }
                     },
                     theme: 'bootstrap'