diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 1d5d6445..b8511b5b 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -194,23 +194,39 @@ Scrollbars
     width: 12px;
     height: 12px;
 }
+.OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement {
+    background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png);
+}
+.OxThemeModern ::-webkit-scrollbar-button:horizontal:increment {
+    background: url(../png/ox.ui.modern/scrollbarHorizontalIncrement.png);
+}
 .OxThemeModern ::-webkit-scrollbar-button:vertical:decrement {
     background: url(../png/ox.ui.modern/scrollbarVerticalDecrement.png);
 }
 .OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
     background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
 }
-.OxThemeModern ::-webkit-scrollbar-thumb:vertical {
+.OxThemeModern ::-webkit-scrollbar-thumb {
     border: 1px solid rgb(48, 48, 48);
-    background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
     -webkit-border-radius: 6px;
 }
+.OxThemeModern ::-webkit-scrollbar-thumb:horizontal {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+}
+.OxThemeModern ::-webkit-scrollbar-thumb:vertical {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+}
+.OxThemeModern ::-webkit-scrollbar-track {
+    border: 1px solid rgb(32, 32, 32);
+    -webkit-border-radius: 6px;
+}
+.OxThemeModern ::-webkit-scrollbar-track:horizontal {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
+}
 .OxThemeModern ::-webkit-scrollbar-track:vertical {
-    border: 1px solid rgb(32, 32, 32);
     background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
-    -webkit-border-radius: 6px;
 }
 .OxThemeModern ::-webkit-scrollbar:active,
-.OxThemeModern ::-webkit-scrollbar-thumb:vertical:active {
+.OxThemeModern ::-webkit-scrollbar-thumb:active {
     background: rgb(64, 64, 64);
 }
\ No newline at end of file
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 3e6526a1..812689b4 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -2417,10 +2417,10 @@ requires
             var arr,
                 len = self.$items.length;
             if (!isSelected(pos)) {
-                if (selected.length == 0) {
+                if (self.selected.length == 0) {
                     addToSelection(pos);
                 } else {
-                    if (Ox.min(selected) < pos) {
+                    if (Ox.min(self.selected) < pos) {
                          var arr = [pos];
                          for (var i = pos - 1; i >= 0; i--) {
                              if (isSelected(i)) {
@@ -2432,7 +2432,7 @@ requires
                              arr.push(i);
                          }
                     }
-                    if (Ox.max(selected) > pos) {
+                    if (Ox.max(self.selected) > pos) {
                         var arr = [pos];
                         for (var i = pos + 1; i < len; i++) {
                             if (isSelected(i)) {
@@ -2450,36 +2450,52 @@ requires
 
         function addToSelection(pos) {
             if (!isSelected(pos)) {
-                selected.push(pos);
+                self.selected.push(pos);
                 if (!Ox.isUndefined(self.$items[pos])) {
                     self.$items[pos].addClass("OxSelected");
                 }
                 Ox.Event.trigger("select_" + self.options.id, {
-                    items: selected.length
+                    items: self.selected.length
                 });
             }
         }
 
         function click(e) {
-            Ox.print("e.target", e.target);
+            var $element = $(e.target), pos;
+            while (!$element.hasClass("OxItem") && !$element.hasClass("OxPage")) {
+                $element = $element.parent();
+            }
+            if ($element.hasClass("OxItem")) {
+                Ox.print($element.attr("id"), $element.data("position"));
+                pos = $element.data("position");
+                if (e.shiftKey) {
+                    addAllToSelection(pos);
+                } else if (e.metaKey) {
+                    toggleSelection(pos);
+                } else {
+                    select(pos);
+                }
+            } else {
+                selectNone();
+            }
         }
 
         function deselect(pos) {
             if (isSelected(pos)) {
-                selected.splice(selected.indexOf(pos), 1);
+                self.selected.splice(self.selected.indexOf(pos), 1);
                 if (!Ox.isUndefined(self.$items[pos])) {
                     self.$items[pos].removeClass("OxSelected");
                 }
                 Ox.Event.trigger("select_" + self.options.id, {
-                    items: selected.length
+                    items: self.selected.length
                 });
             }
         }
 
         function getNext() {
             var pos = -1;
-            if (selected.length) {
-                var pos = Ox.max(selected) + 1;
+            if (self.selected.length) {
+                var pos = Ox.max(self.selected) + 1;
                 if (pos == self.$items.length) {
                     pos = -1;
                 }
@@ -2495,8 +2511,8 @@ requires
 
         function getPrevious() {
             var pos = -1;
-            if (selected.length) {
-                var pos = Ox.min(selected) - 1;
+            if (self.selected.length) {
+                var pos = Ox.min(self.selected) - 1;
             }
             return pos;
         }
@@ -2516,9 +2532,12 @@ requires
             if (page < 0 || page >= self.pages) {
                 return;
             }
-            var offset = page * self.pageLength,
+            var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys :
+                        $.merge(self.options.keys, ["id"]),
+                offset = page * self.pageLength,
                 range = [offset, offset + (page < self.pages - 1 ?
                         self.pageLength : self.listLength % self.pageLength)];
+            Ox.print("keys", keys)
             if (Ox.isUndefined(self.$pages[page])) {
                 self.requests.push(self.options.request({
                     callback: function(result) {
@@ -2537,7 +2556,7 @@ requires
                             self.$items[pos] = new Ox.ListItem({
                                 construct: self.options.construct,
                                 data: v,
-                                pos: pos
+                                position: pos
                             });
                             if (isSelected(pos)) {
                                 self.$items[pos].addClass("OxSelected");
@@ -2547,7 +2566,7 @@ requires
                         self.$pages[page].appendTo(that.$content);
                         Ox.print(page, "self.$pages", self.$pages)
                     },
-                    keys: self.options.keys,
+                    keys: keys,
                     range: range,
                     sort: self.options.sort
                 }));
@@ -2594,7 +2613,7 @@ requires
         }
 
         function select(pos) {
-            if (!isSelected(pos) || selected.length > 1) {
+            if (!isSelected(pos) || self.selected.length > 1) {
                 selectNone();
                 addToSelection(pos);
             }
@@ -2675,13 +2694,14 @@ requires
                 Ox.Request.cancel(v);
             });
             self.requests = [];
-            unloadPages(self.page);
+            //unloadPages(self.page);
             $.extend(self, {
                 $items: [],
                 $pages: [],
                 page: 0,
                 selected: []
             });
+            that.$content.empty();
             that.scrollTop(0);
             loadPages(self.page);
         }
@@ -2708,7 +2728,7 @@ requires
                 .defaults({
                     construct: function() {},
                     data: {},
-                    pos: 0
+                    position: 0
                 })
                 .options(options || {});
 
@@ -2716,12 +2736,11 @@ requires
             self.options.data[k] = $.isArray(v) ? v.join(", ") : v;
         });
 
-        that.$element = self.options.construct(self.options.data, self.options.pos);
-        /*
-        $.each(self.options.construct(self.options.data, self.options.pos).children(), function(i, v) {
-            that.append(v);
-        });
-        */
+        that.$element = self.options.construct(self.options.data)
+            .attr({
+                id: self.options.data.id
+            })
+            .data("position", self.options.position);
 
         return that;
 
@@ -2840,7 +2859,7 @@ requires
         that.$body = new Ox.List({
                 construct: constructItem,
                 itemHeight: 16,
-                itemWidth: Ox.sum(self.columnWidths),
+                itemWidth: getItemWidth(),
                 keys: $.map(self.visibleColumns, function(v, i) {
                     return v.id;
                 }),
@@ -2859,7 +2878,7 @@ requires
             })
             .appendTo(that);
         that.$body.$content.css({
-            width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px"
+            width: getItemWidth() + "px"
         });
 
         function addColumn(id) {
@@ -2876,13 +2895,12 @@ requires
             );
         }
 
-        function constructItem(data, pos) {
+        function constructItem(data) {
             var $item = $("<div>")
                     .addClass("OxItem")
                     .css({
                         width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px"
-                    })
-                    .data("pos", pos);
+                    });
             $.each(self.visibleColumns, function(i, v) {
                 var $cell = $("<div>")
                         .addClass("OxCell OxColumn" + Ox.toTitleCase(v.id))
@@ -2918,6 +2936,10 @@ requires
             return pos;
         }
 
+        function getItemWidth() {
+            return Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12)
+        }
+
         function moveColumn(id) {
             
         }
@@ -2941,10 +2963,10 @@ requires
                 width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px"
             });
             that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup?
-                width: Ox.sum(self.columnWidths) + "px"
+                width: getItemWidth() + "px"
             });
             that.$body.$content.css({
-                width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
+                width: getItemWidth() + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
             });
             $(".OxColumn" + Ox.toTitleCase(self.options.columns[i].id)).css({
                 width: (width - 9) + "px"
diff --git a/build/png/ox.ui.modern/loading.png b/build/png/ox.ui.modern/loading.png
new file mode 100644
index 00000000..702792f1
Binary files /dev/null and b/build/png/ox.ui.modern/loading.png differ
diff --git a/build/png/ox.ui.modern/scrollbarHorizontalDecrement.png b/build/png/ox.ui.modern/scrollbarHorizontalDecrement.png
new file mode 100644
index 00000000..3dfec1cb
Binary files /dev/null and b/build/png/ox.ui.modern/scrollbarHorizontalDecrement.png differ
diff --git a/build/png/ox.ui.modern/scrollbarHorizontalIncrement.png b/build/png/ox.ui.modern/scrollbarHorizontalIncrement.png
new file mode 100644
index 00000000..bb62a3b2
Binary files /dev/null and b/build/png/ox.ui.modern/scrollbarHorizontalIncrement.png differ
diff --git a/demos/test/list.html b/demos/test/list.html
index 68a64869..31b64222 100644
--- a/demos/test/list.html
+++ b/demos/test/list.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <title>oxjs List Demo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
         <script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
diff --git a/demos/test/list.js b/demos/test/list.js
index 461e1ff8..c764f1ab 100644
--- a/demos/test/list.js
+++ b/demos/test/list.js
@@ -81,6 +81,38 @@ $(function() {
                     title: "Runtime",
                     visible: true,
                     width: 80
+                },
+                {
+                    align: "left",
+                    id: "language",
+                    operator: "+",
+                    title: "Language",
+                    visible: true,
+                    width: 120
+                },
+                {
+                    align: "left",
+                    id: "genre",
+                    operator: "+",
+                    title: "Genre",
+                    visible: true,
+                    width: 120
+                },
+                {
+                    align: "right",
+                    id: "rating",
+                    operator: "-",
+                    title: "Rating",
+                    visible: false,
+                    width: 80
+                },
+                {
+                    align: "right",
+                    id: "votes",
+                    operator: "-",
+                    title: "Votes",
+                    visible: false,
+                    width: 80
                 }
             ],
             request: function(options) {