diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 0f5de1d..51acf95 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -154,6 +154,80 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
 
         $(document).ready(function () {
             getUserDetails();
+
+
+            $(function () {
+                var colpick = $('.demo').each(function () {
+
+                    $(this).minicolors({
+                        control: $(this).attr('data-control') || 'hue',
+                        inline: $(this).attr('data-inline') === 'true',
+                        letterCase: 'lowercase',
+                        opacity: false,
+                        change: function (hex, opacity) {
+                            $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
+                            if (!hex) return;
+                            if (opacity) hex += ', ' + opacity;
+                            try {
+                                console.log(hex);
+                                $("#text_area").css("color", hex);
+                            } catch (e) { }
+                            $(this).select();
+                        },
+                        theme: 'bootstrap'
+                    });
+                });
+
+                var $inlinehex = $('#inlinecolorhex h3 small');
+                //alert($inlinehex);
+                $('#inlinecolors').minicolors({
+                    inline: true,
+                    theme: 'bootstrap',
+                    change: function (hex) {
+                        if (!hex) return;
+
+                        $inlinehex.html(hex);
+                    }
+                });
+            });
+            
+        
+                   $(function () {
+                       var colpick = $('.drawTextBG').each(function () {
+                           $(this).minicolors({
+                               control: $(this).attr('data-control') || 'hue',
+                               inline: $(this).attr('data-inline') === 'true',
+                               letterCase: 'lowercase',
+                               opacity: false,
+                               change: function (hex, opacity) {
+                                   $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
+                                   if (!hex) return;
+                                   if (opacity) hex += ', ' + opacity;
+                                   try {
+                                       console.log(hex);
+                                       // $("#text_area").css("background-color", hex);
+                                   } catch (e) { }
+                                   $(this).select();
+                               },
+                               theme: 'bootstrap'
+                           });
+                       });
+                       var $inlinehex = $('#inlinecolorhex h3 small');
+                       //alert($inlinehex);
+                       $('#inlinecolors').minicolors({
+                           inline: true,
+                           theme: 'bootstrap',
+                           change: function (hex) {
+            
+                               if (!hex) return;
+                               $inlinehex.html(hex);
+                           }
+                       });
+                   });
+
+                   $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
+                   $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#ffffff" });
+            
         });
 
         $rootScope.$on("$locationChangeSuccess", function () {
@@ -1592,6 +1666,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
         $rootScope.saveText = function () {
 
             document.getElementById('modelbackground').style.display = "none";
+            $rootScope.selectedBGColorForTextArea = $("#drawTextBGColorpicker span.minicolors-swatch-color").css('background-color');
+          
             // this part will work first time when save button will be clicked
             if ($rootScope.IsTextAlreadySave == false) {
                 // getting textarea style properties
@@ -1609,31 +1685,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
                 // Text After Saving in Rectangle 
                 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
-                $('#canvas').drawText({
-                    layer: true,
-                    draggable: true,
-                    name: 'TextAreaNew_' + $rootScope.resetTextRect,
-                    groups: ['TextAreaNew_' + $rootScope.resetTextRect],
-                    dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
-                    fillStyle: $rootScope.fontColor,
-                    fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
-                    fontSize: $rootScope.fontSizes,
-                    fromCenter: false,
-                    fontFamily: $rootScope.fontFamily,
-                    align: $rootScope.textAlignmt,
-                    strokeWidth: 0,
-                    text: $rootScope.textArea,
-                    x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
-                    maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
-                    maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
-                    add: function (layer) {
-
-                        //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
-                        $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
-                    }
-                })
-                      // Draw rectangle  
-                      .drawRect({
+                
+                $('#canvas').drawRect({
                           name: 'TextArea1_' + $rootScope.resetTextRect,
                           layer: true,
                           draggable: true,
@@ -1642,6 +1695,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                           opacity: $rootScope.shapestyleOpacity,
                           strokeStyle: $rootScope.shapestyleborderColor,
                           strokeWidth: $rootScope.shapestyleborderWidth,
+                          fillStyle: $rootScope.selectedBGColorForTextArea,
                           fromCenter: false,
                           x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
                           width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
@@ -1858,7 +1912,29 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                                   layer.draggable = false;
                               }
                           }
-                      });
+                }).drawText({
+                    layer: true,
+                    draggable: true,
+                    name: 'TextAreaNew_' + $rootScope.resetTextRect,
+                    groups: ['TextAreaNew_' + $rootScope.resetTextRect],
+                    dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
+                    fillStyle: $rootScope.fontColor,
+                    fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
+                    fontSize: $rootScope.fontSizes,
+                    fromCenter: false,
+                    fontFamily: $rootScope.fontFamily,
+                    align: $rootScope.textAlignmt,
+                    strokeWidth: 0,
+                    text: $rootScope.textArea,
+                    x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
+                    maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
+                    maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
+                    add: function (layer) {
+
+                        //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
+                        $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
+                    }
+                });
                 $("#text_area").val('');
                 $("#text_area").css({ " font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
 
@@ -1910,27 +1986,9 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                 $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;
 
                 // generating new text area 
-                $('#canvas').drawText({
-                    layer: true,
-                    draggable: true,
-                    name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
-                    groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
-                    dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
-                    fillStyle: _modifiedFontColor,
-                    fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
-                    fontSize: _modifiedFontSize,
-                    fontFamily: _modifiedFontFamily,
-                    align: _modifiedTextAlign,
-                    strokeWidth: 0,
-                    fromCenter: false,
-                    text: _modifiedText,
-                    x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
-                    maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
-                    maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
-
-                })
+                $('#canvas')
                       // Draw rect as wide as the text
-                      .drawRect({
+                $('#canvas').drawRect({
                           name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave,
                           layer: true,
                           draggable: true,
@@ -1940,6 +1998,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                           fromCenter: false,
                           strokeStyle: $rootScope.shapestyleborderColor,
                           strokeWidth: $rootScope.shapestyleborderWidth,
+                          fillStyle: $rootScope.selectedBGColorForTextArea,
                           x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
                           width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
                           height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
@@ -2113,7 +2172,25 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                               }
                           }
 
-                      });
+                }).drawText({
+                    layer: true,
+                    draggable: true,
+                    name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
+                    groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
+                    dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
+                    fillStyle: _modifiedFontColor,
+                    fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
+                    fontSize: _modifiedFontSize,
+                    fontFamily: _modifiedFontFamily,
+                    align: _modifiedTextAlign,
+                    strokeWidth: 0,
+                    fromCenter: false,
+                    text: _modifiedText,
+                    x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
+                    maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
+                    maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
+
+                });
 
             }
         }
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index cfeb3dc..b8f4f1f 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -689,6 +689,9 @@
 
                                     <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
                                 </div>
+                                <div class="form-group" id="drawTextBGColorpicker" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
+                                    <input type="text" id="saturation-demo-background" class="form-control drawTextBG" data-control="saturation" style="display:none;" value="#0088cc">
+                                </div>
 
                                 <span style="vertical-align:middle;">
                                     <span id="text-left" class="Edittext-btn-css">
@@ -1404,42 +1407,7 @@
                 });
             </script>
 
-            <script type="text/javascript">
-                $(function () {
-                    var colpick = $('.demo').each(function () {
-
-                        $(this).minicolors({
-                            control: $(this).attr('data-control') || 'hue',
-                            inline: $(this).attr('data-inline') === 'true',
-                            letterCase: 'lowercase',
-                            opacity: false,
-                            change: function (hex, opacity) {
-                                $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
-                                if (!hex) return;
-                                if (opacity) hex += ', ' + opacity;
-                                try {
-                                    console.log(hex);
-                                    $("#text_area").css("color", hex);
-                                } catch (e) { }
-                                $(this).select();
-                            },
-                            theme: 'bootstrap'
-                        });
-                    });
-
-                    var $inlinehex = $('#inlinecolorhex h3 small');
-                    //alert($inlinehex);
-                    $('#inlinecolors').minicolors({
-                        inline: true,
-                        theme: 'bootstrap',
-                        change: function (hex) {
-                            if (!hex) return;
-
-                            $inlinehex.html(hex);
-                        }
-                    });
-                });
-            </script>
+            
 
 
             <script type="text/javascript">
@@ -1549,7 +1517,7 @@
             <script>
                 $(document).ready(function () {
                     //  $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
-                    $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
+                  
                     var borderWidth = 1;
                     var borderColor = "#000";
                     $("#borderWidthCanvasElement").change(function () {