diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index c4fbb45e..51098f1c 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -139,6 +139,10 @@ input[type=submit] {
 input:focus {
     outline: none;
 }
+input.OxSelect {
+    text-align: left;
+}
+/*
 input.OxXlarge {
     height: 26px;
     font-size: 19px;
@@ -153,21 +157,22 @@ input.OxLarge {
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
 }
-input.OxMedium {
+*/
+input.OxLarge {
     height: 18px;
     font-size: 13px;
     padding: 0 8px 0 8px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
 }
-input.OxSmall {
+input.OxMedium {
     height: 14px;
     padding: 0 6px 0 6px;
     font-size: 11px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
-input.OxXsmall {
+input.OxSmall {
     height: 10px;
     padding: 0 4px 0 4px;
     font-size: 8px;
@@ -179,15 +184,20 @@ input[type=image] {
     -moz-user-select: none;
     -webkit-user-select: none;
 }
+/*
 input[type=image].OxLarge {
     width: 22px;
 }
-input[type=image].OxMedium {
+*/
+input[type=image].OxLarge {
     width: 18px;
 }
-input[type=image].OxSmall {
+input[type=image].OxMedium {
     width: 14px;
 }
+input[type=image].OxSmall {
+    width: 10px;
+}
 input::-moz-focus-inner {
     border: none;
 }
@@ -298,7 +308,27 @@ OxRange
 .OxRange > .OxTrack > .OxThumb:first-child {
     margin-top: -1px;
 }
+/*
+--------------------------------------------------------------------------------
+OxSelect
+--------------------------------------------------------------------------------
+*/
+.OxSelect.OxMedium {
 
+}
+.OxSelect > .OxButton {
+    text-align: left;
+}
+.OxSelect > .OxSymbol {
+    text-align: right;
+    cursor: pointer;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+.OxSelect.OxMedium > .OxSymbol {
+    margin-left: 8px;
+    margin-top: -16px;
+}
 /*
 ================================================================================
 Menus
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 0911734f..0219ded0 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -830,6 +830,7 @@ requires
                 } else {
                     Ox.Event.bind(that.id, arguments[0], arguments[1]);
                 }
+                return that;
             };
             that.defaults = function(defaults) {
                 /*
@@ -873,8 +874,8 @@ requires
                     // otherwise, extend options
                     self.options = $.extend(
                         self.options || self.defaults, args);
-                    $.each(args, function(k, v) {
-                        self.onChange(k, v);
+                    $.each(args, function(key, value) {
+                        self.onChange(key, value);
                     });
                     ret = that;                            
                 }
@@ -883,6 +884,7 @@ requires
             that.remove = function() {
                 that.$element.remove();
                 delete elements[that.ox];
+                return that;
             }
             that.unbindEvent = function() {
                 /*
@@ -895,6 +897,7 @@ requires
                 } else {
                     Ox.Event.unbind(that.id, arguments[0], arguments[1]);
                 }
+                return that;
             }
 
             // return
@@ -1278,12 +1281,12 @@ requires
             that = new Ox.Element("input", self)
                 .defaults({
                     buttonId: null,
-                    click: function() {},
+                    //click: function() {},
                     disabled: false,
                     groupId: null,
                     selectable: false,
                     selected: false,
-                    size: "small",
+                    size: "medium",
                     style: "", // can be symbol or tab
                     type: "text",
                     value: "",
@@ -1294,16 +1297,17 @@ requires
                         options.value[0] : options.value,
                     values: $.makeArray(options.value)
                 }));
-        that.attr({
-                disabled: self.options.disabled ? "disabled" : "",
-                type: self.options.type == "text" ? "button" : "image"
-            })
-            .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
-                (self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
-                (self.options.disabled ? " OxDisabled": "") +
-                (self.options.selected ? " OxSelected": ""))
-            .mousedown(mousedown)
-            .click(click);
+            console.log("!!", self.options)
+                that.attr({
+                    disabled: self.options.disabled ? "disabled" : "",
+                    type: self.options.type == "text" ? "button" : "image"
+                })
+                .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
+                    (self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
+                    (self.options.disabled ? " OxDisabled": "") +
+                    (self.options.selected ? " OxSelected": ""))
+                .mousedown(mousedown)
+                .click(click);
         //console.log(self.options.value, self.options.disabled)
         /*
         that.bind("OxElement" + that.id + "SetOptions", function(e, data) {
@@ -1334,6 +1338,7 @@ requires
             if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
                 that.toggleSelected();
             }
+            Ox.print(self.options);
             if (self.options.values.length == 2) {
                 console.log("2 values")
                 that.options({
@@ -1341,16 +1346,17 @@ requires
                         self.options.values[1] : self.options.values[0]
                 }); 
             }
-            self.options.click();
+            //self.options.click();
         }
-        self.onChange = function(option, value) {
+        self.onChange = function(key, value) {
             //console.log("setOption", option, value)
-            if (option == "selected") {
+            Ox.print("OxButton onChange", key, value)
+            if (key == "selected") {
                 if (value != that.hasClass("OxSelected")) {
                     that.toggleClass("OxSelected");
                 }
-            }
-            if (option == "value") {
+            } else if (key == "value") {
+                Ox.print("OxButton onChange value", value)
                 if (self.options.type == "image") {
                     that.attr({
                         src: oxui.path + "png/ox.ui." + Ox.theme() +
@@ -1389,7 +1395,7 @@ requires
                     groupId: Ox.uid(),
                     selectable: false,
                     selected: -1,
-                    size: "small",
+                    size: "medium",
                     style: "",
                     type: "text",
                     values: []
@@ -1436,7 +1442,7 @@ requires
             that = new Ox.Element("input", self)
                 .defaults({
                     placeholder: "",
-                    size: "small",
+                    size: "medium",
                     type: "text"
                 })
                 .options(options || {});
@@ -1701,31 +1707,73 @@ requires
     Ox.Select = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Button({}, self)
+            that = new Ox.Element("div", self)
                 .defaults({
                     id: "",
-                    items: []
+                    items: [],
+                    size: "medium"
                 })
                 .options(options)
-                .click(click),
-            items;
+                .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)),
+            selected;
 
         $.each(self.options.items, function(i, item) {
-            items.push({
-                checked: false,
+            self.options.items[i] = $.extend(self.options.items[i], {
+                checked: item.checked || false,
                 group: self.options.id,
-                title: item.title
-            })
+            });
+            if (item.checked) {
+                selected = i;
+            }
         })
 
+        that.$button = new Ox.Button($.extend(self.options, {
+                type: "text", // fixme: this shouldn't be necessary
+                value: self.options.items[selected].title
+            }), {})
+            .click(clickButton)
+            .bindEvent("OxClickMenu." + self.options.id, clickMenu)
+            .appendTo(that);
+
+        that.$symbol = $("<div>", {
+                "class": "OxSymbol",
+                html: oxui.symbols.select
+            })
+            .click(function() {
+                that.$button.trigger("click");
+            })
+            .appendTo(that.$element);
+
         that.$menu = new Ox.Menu({
-            
-        })
+            element: that.$button,
+            id: self.options.id,
+            items: self.options.items,
+            side: "bottom",
+            size: self.options.size
+        });
 
-        function click() {
-            
+        function clickButton() {
+            that.$menu.toggleMenu();
         }
 
+        function clickMenu(event, data) {
+            that.$button.options({
+                value: data.value
+            });
+        }
+
+        self.onChange = function(key, value) {
+            
+        };
+
+        that.width = function(val) {
+            // fixme: silly hack, and won't work for css()
+            that.$element.width(val);
+            that.$button.width(val);
+            that.$symbol.width(val);
+            return that;
+        };
+
         return that;
 
     }
@@ -2216,9 +2264,9 @@ requires
                     if (self.options.title.length == 2) {
                         that.toggleTitle();
                     }
-                    Ox.Event.trigger("OxClickMenu", {
+                    Ox.Event.trigger("OxClickMenu." + self.options.menu.options("id"), {
                         id: self.options.id,
-                        value: self.options.title // fixme: value or title?
+                        value: self.options.title[0] // fixme: value or title?
                     });
                 }
             }
@@ -2359,7 +2407,6 @@ requires
                 .dblclick(dblclickTitlebar)
                 .appendTo(that),
             $switch = new Ox.Button({
-                    size: "small",
                     style: "symbol",
                     type: "image",
                     value: value,
diff --git a/demos/test/index.html b/demos/test/index.html
index 2625d7f7..fd42da87 100644
--- a/demos/test/index.html
+++ b/demos/test/index.html
@@ -35,7 +35,7 @@
         <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
         <script>
             $(function() {
-                var size = window.location.hash.substr(1) || "small",
+                var size = window.location.hash.substr(1) || "medium",
                     $body = $("body"),
                     $toolbars = [];
 
@@ -121,7 +121,7 @@
                 $toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
 
                 Ox.Button({
-                    size: "medium",
+                    size: "large",
                     type: "text",
                     value: "Switch Theme"
                 }).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
@@ -132,7 +132,7 @@
                 }).addClass("margin").appendTo($toolbars[1]);
                 ///*
                 Ox.Button({
-                    size: "xsmall",
+                    size: "small",
                     type: "text",
                     value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
                 }).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
@@ -174,7 +174,7 @@
                 Ox.ButtonGroup({
                     selectable: true,
                     selected: 0,
-                    size: "small",
+                    size: "medium",
                     type: "image",
                     values: ["close", "add", "remove"]
                 }).addClass("padding").appendTo($toolbars[2]);
@@ -197,7 +197,7 @@
                     .css({
                         width: "32px"
                     })
-                    .subscribe("change." + range.id, update)
+                    .bindEvent("change." + range.id, update)
                     .appendTo($toolbars[4]);
                 function update() {
                     //console.log("update", range.options("value"))
@@ -227,6 +227,24 @@
                     type: "text",
                     value: "Foo"
                 }).addClass("margin").appendTo(mainPanel);
+                Ox.Select({
+                    id: "select",
+                    items: [
+                        {
+                            checked: true,
+                            id: "one",
+                            title: "One"
+                        },
+                        {
+                            id: "two",
+                            title: "Two"
+                        },
+                        {
+                            id: "three",
+                            title: "Three"
+                        }
+                    ]
+                }).addClass("margin").width(96).appendTo(mainPanel);
                 //*/
                 function switchTheme() {
                     if (Ox.theme() == "classic") {