diff --git a/src/core/gui.coffee b/src/core/gui.coffee
index 200e8bb..4a6eb5a 100644
--- a/src/core/gui.coffee
+++ b/src/core/gui.coffee
@@ -217,7 +217,7 @@ self.OS.GUI =
         wp = _OS.setting.appearance.wp
         $("body").css("background-image", "url(#{_API.handler.get}/#{wp.url})" )
             .css("background-size", wp.size)
-            .css("ackground-repeat", wp.repeat)
+            .css("background-repeat", wp.repeat)
 
     initDM: ->
         ($ document).on 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', ()->
diff --git a/src/core/settings.coffee b/src/core/settings.coffee
index 95eecc2..dad719d 100644
--- a/src/core/settings.coffee
+++ b/src/core/settings.coffee
@@ -3,7 +3,7 @@
     _OS.setting.applications = conf.applications if conf.applications
     _OS.setting.appearance = conf.appearance if conf.appearance
     _OS.setting.appearance.wp = {
-        url: "os://resources/themes/system/wp/wp2.png",
+        url: "os://resources/themes/system/wp/wp2.jpg",
         size: "cover",
         repeat: "repeat"
     } unless _OS.setting.appearance.wp
diff --git a/src/core/tags/afx-list-view.tag b/src/core/tags/afx-list-view.tag
index 1e3e709..93a3ac0 100644
--- a/src/core/tags/afx-list-view.tag
+++ b/src/core/tags/afx-list-view.tag
@@ -1,6 +1,6 @@
 <afx-list-view class = {dropdown: opts.dropdown == "true"}>
     <div class = "list-container" ref = "container">
-    <div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":"min-width:150px;"}  onclick = {show_list}>
+    <div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":""}  onclick = {show_list}>
     </div>
     <ul  ref = "mlist">
         <li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onclick = {parent._select} oncontextmenu = {parent._select}>
@@ -113,8 +113,12 @@
         
         this.on("mount", function(){
             self.root.observable = opts.observable || (self.parent && self.parent.root && self.parent.root.observable) || riot.observable()
+            
             if(opts.dropdown == "true")
             {
+                self.root.observable.on("calibrate", function(){
+                    $(self.refs.container).css("width", $(self.root).width() + "px" )
+                })
                 $(document).click(function(event) { 
                     if(!$(event.target).closest(self.refs.container).length) {
                         $(self.refs.mlist).hide()
diff --git a/src/core/tags/afx-tab-container.tag b/src/core/tags/afx-tab-container.tag
index d1e201c..f6df6ef 100644
--- a/src/core/tags/afx-tab-container.tag
+++ b/src/core/tags/afx-tab-container.tag
@@ -32,7 +32,7 @@
                     $(this).hide()
                 })
                 $(e.data.scheme).show()
-                e.data.f()
+                e.data.handler.render()
                 calibrate()
             })
             self.root.observable.on("resize", function(){
@@ -46,7 +46,9 @@
             el.scheme = sch
             riot.mount(sch, {observable: self.root.observable})
             $(sch).hide()
-            el.f()
+            el.handler = el.handler(sch[0])
+            //console.log(el.handler)
+            //el.handler.render()
             self.root.observable.trigger("tabrendered")
             //self.root.observable.trigger("calibrate")
         }
diff --git a/src/packages/Setting/AppearanceHandler.coffee b/src/packages/Setting/AppearanceHandler.coffee
new file mode 100644
index 0000000..99d0480
--- /dev/null
+++ b/src/packages/Setting/AppearanceHandler.coffee
@@ -0,0 +1,48 @@
+class AppearanceHandler extends SettingHandler
+    constructor:(scheme, parent) ->
+        super(scheme, parent)
+        me = @
+        @wplist = @find "wplist"
+        @wpreview = @find "wp-preview"
+        @wpsize = @find "wpsize"
+        @wprepeat = @find "wprepeat"
+        @themelist = @find "theme-list"
+        @wpsize.set "onlistselect", (e)->
+            me.parent.systemsetting.appearance.wp.size = e.data.text
+            me.parent._gui.wallpaper()
+
+        sizes = [
+            { text: "cover", selected: me.parent.systemsetting.appearance.wp.size is "cover" },
+            { text: "auto", selected: me.parent.systemsetting.appearance.wp.size is "auto" },
+            { text: "contain", selected: me.parent.systemsetting.appearance.wp.size is "contain" }
+        ]
+        @wpsize.set "items", sizes
+        @wplist.set "onlistselect", (e) ->
+            $(me.wpreview).css("background-image", "url(#{me.parent._api.handler.get}/#{e.data.path})" )
+            .css("background-size", "cover")
+            me.parent.systemsetting.appearance.wp.url = e.data.path
+            me.parent._gui.wallpaper()
+        
+
+        repeats = [
+            { text: "repeat", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat" },
+            { text: "repeat-x", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat-x" },
+            { text: "repeat-y", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat-y" },
+            { text: "no-repeat", selected: me.parent.systemsetting.appearance.wp.repeat is "no-repeat" }
+        ]
+        @wprepeat.set "items", repeats
+        @wprepeat.set "onlistselect", (e) ->
+            me.parent.systemsetting.appearance.wp.repeat = e.data.text
+            me.parent._gui.wallpaper()
+
+        @themelist.set "items" , [{ text: "antos", selected: true }]
+    render: () ->
+        me = @
+        path = "os://resources/themes/system/wp"
+        path.asFileHandler().read (d) ->
+            me.parent.error __("Cannot read wallpaper list from {0}", path) if d.error
+            for v in d.result
+                v.text = v.filename
+                v.selected = true if v.path is me.parent.systemsetting.appearance.wp.url
+                v.iconclass = "fa fa-file-image-o"
+            me.wplist.set "items", d.result
\ No newline at end of file
diff --git a/src/packages/Setting/Makefile b/src/packages/Setting/Makefile
index 608ed0a..588d34b 100644
--- a/src/packages/Setting/Makefile
+++ b/src/packages/Setting/Makefile
@@ -1,4 +1,4 @@
-coffee_files = main.coffee
+coffee_files = main.coffee AppearanceHandler.coffee
 
 jsfiles = 
 
diff --git a/src/packages/Setting/main.coffee b/src/packages/Setting/main.coffee
index a9cd94e..d1be4f5 100644
--- a/src/packages/Setting/main.coffee
+++ b/src/packages/Setting/main.coffee
@@ -1,3 +1,12 @@
+class SettingHandler
+    constructor:(@scheme, @parent) ->
+
+    find: (id) -> ($ "[data-id='#{id}']", @scheme)[0] if @scheme
+
+    render: () ->
+
+
+
 class Setting extends this.OS.GUI.BaseApplication
     constructor: (args) ->
         super "Setting", args
@@ -7,18 +16,21 @@ class Setting extends this.OS.GUI.BaseApplication
         @container = @find "container"
         @container.setTabs [ 
             {
-                text: "Appearance", 
-                iconclass: "fa fa-paint-brush", 
-                url: "#{@path()}/schemes/appearance.html", 
-                f: () ->
-                    console.log "finish init appearance"
+                text: "Appearance",
+                iconclass: "fa fa-paint-brush",
+                url: "#{@path()}/schemes/appearance.html",
+                handler: (sch) ->
+                    me.appearance = new AppearanceHandler(sch, me)
+                    me.appearance
             },
             {
                 text: "VFS",
                 iconclass: "fa fa-inbox" ,
                 url: "#{@path()}/schemes/vfs.html" ,
-                f: () ->
-                    console.log "finish init VFS"
+                handler: (sch) ->
+                    render: () ->
+                        console.log "finish init VFS"
+                    
             }
         ]
 Setting.singleton = true
diff --git a/src/packages/Setting/main.css b/src/packages/Setting/main.css
index 1eb5e66..28b4d47 100644
--- a/src/packages/Setting/main.css
+++ b/src/packages/Setting/main.css
@@ -8,4 +8,24 @@ afx-app-window[data-id = "setting-window"] afx-tab-container afx-tab-bar afx-lis
 }
 afx-app-window[data-id = "setting-window"] afx-tab-container  div[data-ref="container"]{
     border-left: 1px solid #cbcbcb;
+}
+
+afx-app-window[data-id = "setting-window"] afx-label.header{
+    font-weight: bold;
+}
+
+/*APPEARANCE*/
+afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] div[data-id = "wp-preview"]{
+    display: block;
+    border:1px solid #cbcbcb;
+    border-radius: 10px;
+}
+
+afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-list-view[data-id="wplist"]
+{
+    border:1px solid #cbcbcb;
+}
+afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-resizer{
+    border:0;
+    background-color: transparent;
 }
\ No newline at end of file
diff --git a/src/packages/Setting/schemes/appearance.html b/src/packages/Setting/schemes/appearance.html
index 0eb3fb1..a342f38 100644
--- a/src/packages/Setting/schemes/appearance.html
+++ b/src/packages/Setting/schemes/appearance.html
@@ -1,14 +1,31 @@
-<afx-vbox>
-    <afx-label text = "__(Wallpaper)" class = "header" data-height="30"></afx-label>
+<afx-vbox data-id="appearance">
+    <div data-height="5"></div>
     <afx-hbox>
-        <afx-list-view data-width="120"></afx-list-view>
-        <div>
-        </div>
+        <div data-width="10"></div>
+        <afx-vbox>
+            <afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="23"></afx-label>
+            <afx-hbox>
+                <afx-list-view data-width="120" data-id="wplist"></afx-list-view>
+                <afx-resizer data-width="5"></afx-resizer>
+                <div data-id = "wp-preview"></div>
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="30">
+                <afx-button data-width="130" text= "__(Add)"></afx-button>
+                <afx-list-view data-id = "wpsize"  dropdown="true"></afx-list-view>
+                <div data-width="5"></div>
+                <afx-list-view data-id = "wprepeat"  dropdown="true"></afx-list-view>
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="23"></afx-label>
+            <afx-list-view data-height="30" data-id="theme-list" dropdown="true"></afx-list-view>
+            <div data-height="5"></div>
+        </afx-vbox>
+        <div data-width="10"></div>
     </afx-hbox>
-    <afx-label text = "__(Theme)" class = "header" data-height="30"></afx-label>
-    <afx-list-view data-height="50" dropdown="true"></afx-list-view>
     <afx-hbox data-height="30" >
-            <div></div>
-            <afx-button text="__(Save)" iconclass="fa fa-save" data-width="50"></afx-button>
+            <div style="text-align:right;"><afx-button text="__(Save)" iconclass="fa fa-save"></afx-button></div>
+            <div data-width="10"></div>
     </afx-hbox>
+    <div data-height="5"></div>
 </afx-vbox>
\ No newline at end of file
diff --git a/src/packages/pkg.mk b/src/packages/pkg.mk
index ca20e9c..4858d2a 100644
--- a/src/packages/pkg.mk
+++ b/src/packages/pkg.mk
@@ -9,9 +9,11 @@ title:
 
 coffee:
 	- mkdir build
-	for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
-	for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
-	- rm build/*.coffee.js
+	for f in $(coffee_files); do (cat "$${f}"; echo) >>"build/main.coffee";done
+	coffee --compile build/main.coffee
+	#for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
+	#for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
+	- rm build/*.coffee
 
 js: coffee
 	for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
diff --git a/src/themes/antos/afx-list-view.css b/src/themes/antos/afx-list-view.css
index 804b0d0..849a3b1 100644
--- a/src/themes/antos/afx-list-view.css
+++ b/src/themes/antos/afx-list-view.css
@@ -90,6 +90,7 @@ afx-list-view.dropdown > div.list-container > ul{
     border-radius: 3px;
     padding:2px;
     border-top-left-radius: 0px;
+    z-index: 10;
 }
 afx-list-view.dropdown > div.list-container > ul > li{
     display: inline-block;
diff --git a/src/themes/antos/antos.css b/src/themes/antos/antos.css
index 374987a..b4e347f 100644
--- a/src/themes/antos/antos.css
+++ b/src/themes/antos/antos.css
@@ -5,9 +5,6 @@ html,body{
     font-size: 13px;
     width: 100%;
     height: 100%;
-    background-image: url(wp2.jpg);
-    background-size: cover;
-    background-repeat: repeat;
     overflow: hidden;
 }
 #wrapper{