diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 61eb3a2..c5b915a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -418,7 +418,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             document.getElementById('modeleditstyle').style.display = "none";
 
             $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
-            $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
+            $rootScope.shapestyleFillColor = $("#" + id).css('background-color');
             $rootScope.shapestyleborderColor = $("#" + id).parent().css("border-top-color");
             $rootScope.shapestyleborderWidthSeparatingPixel = $("#" + id).parent().css("border-top-width");
             var pixelSeparation = $rootScope.shapestyleborderWidthSeparatingPixel;
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/blank-shapes.png b/400-SOURCECODE/AIAHTML5.Web/content/images/blank-shapes.png
new file mode 100644
index 0000000..29f71f5
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/blank-shapes.png
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index aa48dd8..2eb8138 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -839,9 +839,14 @@
                 </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 class="well well-sm no-margin-btm blankshapediv">
+                                        <div class="outlinediv">
+                                                      <div id="imgOpacity" class="fullcolordiv imgopacity">
+                                                      </div>
+                                       </div>
+                     </div>
+
                 </div>
             </div>
             <div class="modal-footer">
@@ -1406,7 +1411,7 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
-                            $("#imgOpacity").parent().css("background-color", value);
+                            $("#imgOpacity").css("background-color", value);
 
                         }
                     },
@@ -1451,7 +1456,7 @@
                step: .1,
                slide: function (event, ui) {
                    
-                   $(".marginTopBtm10 img.imgopacity").css("opacity", ui.value);
+                   $(".marginTopBtm10 .imgopacity").css("opacity", ui.value);
                    //  $("#slider-value").html(ui.value);
 
                }
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 d6c4142..9c70dc9 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
@@ -876,4 +876,26 @@ cursor:pointer;
         pointer-events:none;
     opacity:0.6;   
     
-}
\ No newline at end of file
+}
+
+.blankshapediv
+{
+background-image: url("../../../../../content/images/blank-shapes.png");
+}
+.outlinediv
+{
+     border:1px solid black;
+  width: 72%;
+ margin-left: auto;
+ margin-right: auto;
+ height: 98px;
+ border-radius: 50%;
+ }
+.fullcolordiv
+ 	 {
+ 	  position:relative;
+ 	  width:100%;
+ 	 height:100%;
+  background:#fff;
+ 	  border-radius: 50%;
+ }
\ No newline at end of file