diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index ad5c07a..a62431a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -264,6 +264,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         $rootScope.shapestyle = function (id) {
 
             document.getElementById('modelbackground').style.display = "none";
+            document.getElementById('modeleditstyle').style.display = "none";
 
             $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
             $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
@@ -275,19 +276,21 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $rootScope.shapestyleborderWidth = intPart[0];
             $rootScope.shapestyleborderStyles = "solid";
 
-            $('#editshapestyle').modal('hide');
+           // $('#editshapestyle').modal('hide');
         }
 
         $rootScope.enableAnnotationToolBar = function () {
 
             document.getElementById('modelbackground').style.display = "block";
-            $("#editshapestyle").modal('show');
+          //  $("#editshapestyle").modal('show');
+            document.getElementById('modeleditstyle').style.display = "block";
 
         }
 
         $rootScope.disableAnnotationToolBar = function () {
 
             document.getElementById('modelbackground').style.display = "none";
+            document.getElementById('modeleditstyle').style.display = "none";
 
         }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index d02ccc4..186a81f 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -662,7 +662,131 @@
 
 
     <!--Edit Shape Modal-->
-    <div class="modal fade" id="editshapestyle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" style="z-index:1000000000;width:302px;margin-left:auto;margin-right:auto;overflow:hidden;height:460px;">
+
+
+    <div class="modeleditstyle" id="modeleditstyle" style="z-index: 1000000000; background: white; height: 433px; width: 302px;position:absolute;left:40%;top:70px;">
+        <div class="modal-content">
+            <div class="modal-header annotation-modal-header">
+                <h4 class="modal-title" id="myModalLabel33">Edit Shape Style</h4>
+            </div>
+            <div class="modal-body">
+                <div class="marginTopBtm10">
+                    <div class="well well-sm no-margin-btm">
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="checkbox no-margin">
+                                    <label>
+                                        <input id="fill-option" type="checkbox" checked onclick="enableDisableFillOption()"> Fill Option
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 enableDisableOpacity">
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="filloption" id="filloption1" value="filloption1">
+                                        <span class="">Texture</span>
+                                        <img id="editstyleTexture" src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
+                                    </label>
+                                </div>
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
+
+
+                                        <div id="editstylebackgroundcolor" 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 outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
+                                        </div>
+
+
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 no-padding marginTop10 enableDisableOpacity">
+                                <div class="row">
+                                    <label class="pull-left" style="font-weight:normal;">Scale</label>
+                                    <div id="edit-slider-3" class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
+                                        <div id="slider-range-min-3"></div>
+                                    </div>
+                                </div>
+
+                                <div class="row">
+                                    <label class="pull-left" style="font-weight:normal;">Opacity</label>
+                                    <div id="edit-slider-4" class="pull-left" style="width:53%; margin-left:3%; margin-top:2%;">
+                                        <div id="slider-range-min-4"></div>
+                                    </div>
+                                </div>
+
+                                <div class="clearfix"></div>
+
+
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="marginTopBtm10">
+                    <div class="well well-sm no-margin-btm">
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="checkbox no-margin">
+                                    <label>
+                                        <input id="Outline-Option" onclick="enableDisableOutline()" type="checkbox" checked> Outline Option
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 setEnableDisableForEditShapeStyle">
+                                <label class="marginTop5">
+                                    <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
+                                    <div class="form-group" id="outlineColor" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
+
+                                        <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
+                                    </div>
+
+
+                                </label>
+                            </div>
+
+                            <div class="col-sm-6 setEnableDisableForEditShapeStyle">
+                                <div class="form-horizontal">
+                                    <div class="form-group">
+                                        <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
+                                        <div class="col-sm-9 marginTop5">
+                                            <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>
+                                                <option value="5">5</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div class="marginTopBtm10">
+                    <div class="well well-sm no-margin-btm">
+                        <img id="imgOpacity" class="img-rounded img-responsive imgopacity" alt="..." src="content/images/blank-shape.jpg">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
+                    OK
+                </button>
+                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="disableAnnotationToolBar()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!--<div class="modal fade" id="editshapestyle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" style="z-index:1000000000;width:302px;margin-left:auto;margin-right:auto;overflow:hidden;height:460px;">
         <div class="modal-dialog modal-sm" role="document">
             <div class="modal-content">
                 <div class="modal-header annotation-modal-header">
@@ -698,9 +822,7 @@
                                             </div>
 
 
-                                            <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">-->
-                                            <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>-->
-                                            <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
+                                          
                                         </label>
                                     </div>
                                 </div>
@@ -709,7 +831,7 @@
                                         <label class="pull-left" style="font-weight:normal;">Scale</label>
                                         <div id="edit-slider-3" class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
                                             <div id="slider-range-min-3"></div>
-                                            <!--<p>Your slider has a value of <span id="slider-value"></span></p>-->
+                                          
                                         </div>
                                     </div>
 
@@ -741,14 +863,12 @@
                                 <div class="col-sm-6 setEnableDisableForEditShapeStyle">
                                     <label class="marginTop5">
                                         <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
-                                        <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>-->
                                         <div class="form-group" id="outlineColor" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
 
                                             <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
                                         </div>
 
 
-                                        <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
                                     </label>
                                 </div>
 
@@ -787,7 +907,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div>-->
 
     <script>
         function enableDisableFillOption()
@@ -977,6 +1097,7 @@
         $(function () {
             $(".modal").draggable();
             $(".annotationTollbar").draggable();
+            $(".modeleditstyle").draggable();
         });
     </script>
 
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 27dede1..94b8ef9 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
@@ -842,4 +842,10 @@ cursor:pointer;
     height:100%;
   
     filter: Alpha(opacity=50); / IE8 and earlier /
+}
+
+	
+.modeleditstyle
+ {
+    display:none;
 }
\ No newline at end of file