diff --git a/src/core/BaseDialog.coffee b/src/core/BaseDialog.coffee
index 8bd6f2b..fb550af 100644
--- a/src/core/BaseDialog.coffee
+++ b/src/core/BaseDialog.coffee
@@ -157,9 +157,9 @@ this.OS.register "CalendarDialog", CalendarDialog
 class ColorPickerDialog extends BasicDialog
     constructor: () ->
         super "ColorPickerDialog", {
-            tags: [{ tag: 'afx-color-picker' }],
+            tags: [{ tag: 'afx-color-picker' }, {tag:'div', att: 'data-height="5"' }],
             width: 313,
-            height: 220,
+            height: 250,
             resizable: false,
             buttons: [
                 {
diff --git a/src/core/tags/afx-nspinner.tag b/src/core/tags/afx-nspinner.tag
index 2cb80bb..0ccd5cd 100644
--- a/src/core/tags/afx-nspinner.tag
+++ b/src/core/tags/afx-nspinner.tag
@@ -7,6 +7,7 @@
 <script>
 
 this.value = eval(opts.value) || 0
+this.step = Number(opts.step) || 1
 this.onchange = opts.onchange
 var self = this
 this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
@@ -26,7 +27,7 @@ self.root.get = function(k)
 
 self._incr = function(e)
 {
-    self.value = self.value + 1;
+    self.value = self.value + self.step;
     self.update();
     if(self.onchange) self.onchange(self.value);
 }
@@ -37,8 +38,32 @@ self.on("mount", function(){
     var cl = function()
     {
         $(self.refs.holder).css("width", $(self.root).width() - 20 + "px" )
-        $(self.refs.holder).css("height", $(self.root).height() - 3 + "px" )
-        $(self.refs.spinner).css("height", $(self.root).height() - 5 + "px" )
+        $(self.refs.holder).css("height", $(self.root).height() + "px" )
+        $(self.refs.spinner)
+            .css("width","20px")
+            .css("height", $(self.root).height() + "px" )
+
+        $(self.refs.incr)
+            .css("height", $(self.root).height()/2 - 2 + "px")
+            .css("position", "relative")
+        $(self.refs.decr).css("height", $(self.root).height()/2 -2 + "px")
+            .css("position", "relative")
+        $(self.refs.spinner).find("li")
+            .css("display","block")
+            .css("text-align", "center")
+            .css("vertical-align", "middle")
+        $(self.refs.spinner).find("i")
+            .css("font-size", "16px")
+            .css("position", "absolute")
+        var fn = function(ie, pos)
+        {
+            var el = $(ie).find("i")
+            el
+            .css(pos,($(ie).height()-el.height()) /2 + "px" )
+            .css("left", ($(ie).width()-el.width())/2 + "px" )
+        }
+        fn(self.refs.decr, "bottom")
+        fn(self.refs.incr, "top")
     }
     cl()
     self.root.observable.on("calibrate", function(){
@@ -66,7 +91,7 @@ self.on("mount", function(){
 self._decr = function(e)
 {
     if(self.value == 0) return;
-    self.value = self.value - 1;
+    self.value = self.value - self.step;
     self.update();
     if(self.onchange) self.onchange(self.value);
 }
diff --git a/src/core/tags/afx-slider.tag b/src/core/tags/afx-slider.tag
index 4c06c40..fe580d6 100644
--- a/src/core/tags/afx-slider.tag
+++ b/src/core/tags/afx-slider.tag
@@ -69,6 +69,7 @@
             $(window).on("mouseup", function(e){
                 if(self.onchange) self.onchange(self.value)
                 $(window).unbind("mousemove", null)
+                $(window).unbind("mouseup", null)
             })
         })
     }
diff --git a/src/packages/AntOSDK/package.json b/src/packages/AntOSDK/package.json
index 4d0e74c..2840034 100644
--- a/src/packages/AntOSDK/package.json
+++ b/src/packages/AntOSDK/package.json
@@ -6,7 +6,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.0.4-a",
+    "version":"0.0.5-a",
     "category":"System",
     "iconclass":"fa fa-cubes",
     "mimes":[
diff --git a/src/packages/DummyApp/main.coffee b/src/packages/DummyApp/main.coffee
index 28e8a5c..5d4f2b2 100644
--- a/src/packages/DummyApp/main.coffee
+++ b/src/packages/DummyApp/main.coffee
@@ -24,7 +24,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
         self = @
         @on "btclick", (e)->
             #_GUI.pushService "Budgy"
-            #self.openDialog "ColorPickerDialog", (d) -> console.log d
+            self.openDialog "ColorPickerDialog", (d) -> console.log d
             self.addMenu()
             self.systemsetting.system.menu["test"] = 
                 text: 'Adding system menu'
diff --git a/src/packages/DummyApp/scheme.html b/src/packages/DummyApp/scheme.html
index b1c467e..d003681 100644
--- a/src/packages/DummyApp/scheme.html
+++ b/src/packages/DummyApp/scheme.html
@@ -9,6 +9,7 @@
         </afx-vbox>
         <afx-resizer data-width = "5" ></afx-resizer>
         <afx-vbox>
+            <afx-nspinner value = "10" data-height="50" data-id="spinner"></afx-nspinner>
             <afx-nspinner value = "10" data-height="30" data-id="spinner"></afx-nspinner>
             <afx-button data-height="30" toggle = "true" text="__(Read more)" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
             <afx-switch data-id="sw" enable= true data-height="30"></afx-switch>
diff --git a/src/themes/antos/afx-nspinner.css b/src/themes/antos/afx-nspinner.css
index 886a071..33e3950 100644
--- a/src/themes/antos/afx-nspinner.css
+++ b/src/themes/antos/afx-nspinner.css
@@ -7,38 +7,43 @@ afx-nspinner ul{
     margin: 0;
     list-style: none;
 }
+afx-nspinner input{
+    margin: 0;
+}
 afx-nspinner ul li{
     display: block;
     border: 1px solid #a6a6a6;
     width: 100%;
     padding:0;
     margin: 0;
-    height:45%;
-    border-radius: 3px;
     color: #414339;
-    position: relative;
 }
+
+afx-nspinner ul li.incr{
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+
+afx-nspinner ul li.decr{
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
 afx-nspinner ul li:hover{
     color:#116cD6;
 }
-afx-nspinner ul li i {
-    display: block;
-}
 afx-nspinner ul li.incr i:before{
     content: "\f0d8"; 
     font-family: "FontAwesome";
     font-size: 16px;
     font-style: normal;
-    position: absolute;
-    top:-6px;
-    left: 5px;
+
 }
 afx-nspinner ul li.decr i:before{
     content: "\f0d7"; 
     font-family: "FontAwesome";
     font-size: 16px;
     font-style: normal;
-    position: absolute;
-    bottom: -4px;
-    left: 5px;
+
 }
\ No newline at end of file