diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view-list.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view-list.html
index c4b25ca..5f4ffc1 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view-list.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view-list.html
@@ -28,17 +28,7 @@
 
     <script>
         $(function () {
-            $("#slider-range-min-2").slider({
-                range: "min",
-                min: 1,
-                max: 60,
-                value: 10,
-                slide: function (event, ui) {
-                    $("#amount-2").val(ui.value);
-                }
-            });
-            $("#amount-2").val($("#slider-vertical-2").slider("value"));
-
+           
             $(function () {
                 $('[data-toggle="tooltip"]').tooltip();
             })
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
index b8cbee8..928ca8a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
@@ -514,16 +514,7 @@
 
 
 
-        $("#slider-range-min-2").slider({
-            range: "min",
-            min: 1,
-            max: 60,
-            value: 10,
-            slide: function (event, ui) {
-                $("#amount-2").val(ui.value);
-            }
-        });
-        $("#amount-2").val($("#slider-vertical-2").slider("value"));
+       
     });
 </script>
 <script>
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/widget/MainMenu.html b/400-SOURCECODE/AIAHTML5.Web/app/widget/MainMenu.html
index 5debb16..a469c23 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/widget/MainMenu.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/widget/MainMenu.html
@@ -59,17 +59,7 @@
 
 <script>
     $(function () {
-        $("#slider-range-min-2").slider({
-            range: "min",
-            min: 1,
-            max: 60,
-            value: 10,
-            slide: function (event, ui) {
-                $("#amount-2").val(ui.value);
-            }
-        });
-        $("#amount-2").val($("#slider-vertical-2").slider("value"));
-
+       
         $(function () {
             $('[data-toggle="tooltip"]').tooltip();
         })
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index d4f04bf..c15603b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -520,7 +520,26 @@
                                     <div>
                                         <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" id="paintLine" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="paintBrush()"><i class="fa fa-paint-brush"></i></button>
                                         <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
-                                        <div class="marginL2 pull-left"><input type="number" id="amount-2" step="1" style="width:60px;height:21px;" min="1" max="60" oninput="Brushsize(this)"></div>&nbsp;
+                                        <div style="width: 80px; margin: 0px 0px 0px 4px; display: inline-block;float:left;">
+                                            <div style="width: 58px; float: left;">
+                                                <input type="text" id="btnBrushSize" class="form-control" value="1" style="height:32px;border-radius:0;" oninput="Brushsize(this)">
+                                            </div>
+                                            <div style="width: 22px; float: left;">
+                                                <div style="width: 100%; float: left; height: 16px;">
+                                                    <button type="button" id="btnBrushSizeIncrement" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
+
+                                                        <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-up.png">
+                                                    </button>
+                                                </div>
+                                                <div style="width: 100%; float: left; height: 16px;">
+                                                    <button type="button" id="btnBrushSizeDecrease" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
+                                                        <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-down.png">
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
                                         <div class="pull-left" style="width:45%; margin-left:2%;margin-top:5px;">
                                             <div id="slider-range-min-2"></div>
                                         </div>
@@ -1074,22 +1093,19 @@
     <script>
         function Brushsize(object) {
 
-                if (parseInt(object.value) == 0) {
-                    //object.value = 0;
-                    object.value = object.value.slice(0, 0);
-
-                }
-
-            if (parseInt(object.value) <= parseInt(object.max)) {
-
+            object.value = object.value.replace(/[^0-9]/g, '');
+            if (parseInt(object.value) <= 0) {
+                object.value =1;
+            }
+            if (parseInt(object.value)>=1 && parseInt(object.value) <= 60) {
                 object.value = object.value;
-
-
             }
-            else {
+            if(parseInt(object.value) > 60)
+            {
                 object.value = object.value.slice(0, 1);
-
+              
             }
+  
         }
     </script>
 
@@ -1153,11 +1169,10 @@
                 range: "min",
                 min: 1,
                 max: 60,
-                value: 10,
+                value: 1,
                 slide: function (event, ui) {
 
-                    $("#amount-2").val(ui.value);
-
+                    $("#btnBrushSize").val(ui.value);
 
                 },
                 stop: function (event, ui) {
@@ -1167,6 +1182,44 @@
                 }
 
             });
+
+
+            $("#btnBrushSize").keydown(function () {
+                var brushSizevalue = this.value;
+                $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
+            });
+            $("#btnBrushSize").keyup(function () {
+                var brushSizevalue = this.value;
+                $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
+            });
+            $("#btnBrushSizeIncrement").click(function () {
+                var brushIncrementVar = $("#btnBrushSize").val();
+                if (brushIncrementVar >= 60) {
+                    $("#slider-range-min-2").slider("value", 60);
+                }
+                else {
+                    var brushIncrementedValue = parseInt(brushIncrementVar) + 1;
+                    $("#btnBrushSize").val(brushIncrementedValue);
+                    $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
+                }
+            });
+            $("#btnBrushSizeDecrease").click(function () { 
+                var brushDecreaseVar = $("#btnBrushSize").val();
+                if (brushDecreaseVar <= 1) {
+                    $("#slider-range-min-2").slider("value", 1);
+                }
+                else {
+                    var brushDecrementedValue = parseInt(brushDecreaseVar) - 1;
+                    $("#btnBrushSize").val(brushDecrementedValue);
+                    $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
+                }
+            });
+            $("#btnBrushSize").val($("#slider-range-min-2").slider("value"));
+
+
+
+
+
             //$("#slider-range-min-2").on("slidestart", function (event, ui) {
 
             //    $('.btnCursor').trigger('click');
@@ -1178,7 +1231,6 @@
             //});
             //  $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); });
 
-            $("#amount-2").val($("#slider-vertical-2").slider("value"));
 
             $(function () {
                 $('[data-toggle="tooltip"]').tooltip();