diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js
index 681d21df..768f59ef 100644
--- a/source/Ox.UI/js/Form/Ox.Filter.js
+++ b/source/Ox.UI/js/Form/Ox.Filter.js
@@ -16,7 +16,7 @@ Ox.Filter <f:Ox.Element> Filter Element
 Ox.Filter = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element({}, self)
+        that = Ox.Element({}, self)
             .defaults({
                 findKeys: [],
                 query: {
@@ -81,23 +81,23 @@ Ox.Filter = function(options, self) {
         }];
     }
 
-    self.$operator = new Ox.FormElementGroup({
+    self.$operator = Ox.FormElementGroup({
         elements: [
-            new Ox.Label({
+            Ox.Label({
                 title: 'Match',
                 overlap: 'right',
                 width: 48
             }),
-            new Ox.FormElementGroup({
+            Ox.FormElementGroup({
                 elements: [
-                    new Ox.Select({
+                    Ox.Select({
                             items: self.operators,
                             width: 48
                         })
                         .bindEvent({
                             change: changeOperator
                         }),
-                    new Ox.Label({
+                    Ox.Label({
                         overlap: 'left',
                         title: 'of the following conditions',
                         width: 160
@@ -115,17 +115,17 @@ Ox.Filter = function(options, self) {
         return constructCondition(condition, i);
     });
 
-    self.$limit = new Ox.InputGroup({
+    self.$limit = Ox.InputGroup({
         inputs: [
-            new Ox.Checkbox({
+            Ox.Checkbox({
                 width: 16
             }),
-            new Ox.FormElementGroup({
+            Ox.FormElementGroup({
                 elements: [
-                    new Ox.Input({
+                    Ox.Input({
                         width: 56
                     }),
-                    new Ox.Select({
+                    Ox.Select({
                         items: [
                             {id: 'items', title: 'items'},
                             {},
@@ -141,20 +141,20 @@ Ox.Filter = function(options, self) {
                 float: 'right',
                 width: 120
             }),
-            new Ox.Select({
+            Ox.Select({
                 items: self.options.sortKeys,
                 width: 128
             }),
-            new Ox.FormElementGroup({
+            Ox.FormElementGroup({
                 elements: [
-                    new Ox.Select({
+                    Ox.Select({
                         items: [
                             {id: 'ascending', title: 'ascending'},
                             {id: 'descending', title: 'descending'}
                         ],
                         width: 96
                     }),
-                    new Ox.Label({
+                    Ox.Label({
                         overlap: 'left',
                         title: 'order',
                         width: 72
@@ -171,12 +171,12 @@ Ox.Filter = function(options, self) {
         ]
     });
 
-    self.$view = new Ox.InputGroup({
+    self.$view = Ox.InputGroup({
         inputs: [
-            new Ox.Checkbox({
+            Ox.Checkbox({
                 width: 16
             }),
-            new Ox.Select({
+            Ox.Select({
                 items: self.options.viewKeys,
                 width: 128
             })
@@ -186,12 +186,12 @@ Ox.Filter = function(options, self) {
         ]
     });
 
-    self.$save = new Ox.InputGroup({
+    self.$save = Ox.InputGroup({
         inputs: [
-            new Ox.Checkbox({
+            Ox.Checkbox({
                 width: 16
             }),
-            new Ox.Input({
+            Ox.Input({
                 id: 'list',
                 width: 128
             })
@@ -201,27 +201,29 @@ Ox.Filter = function(options, self) {
         ]
     });
 
-    self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit, self.$view, self.$save]);
+    self.$items = Ox.merge([self.$operator], self.$conditions, [self.$limit, self.$view, self.$save]);
 
-    self.$form = new Ox.Form({
+    self.$form = Ox.Form({
         items: self.$items
     });
     that.$element = self.$form.$element;
 
-    function addCondition(pos) {
+    function addCondition(pos, isInGroup) {
         var key = self.options.findKeys[0];
         self.options.query.conditions.splice(pos, 0, {
             key: key.id,
             value: '',
             operator: self.conditionOperators[key.type][0].id
         });
-        self.$conditions.splice(pos, 0, constructCondition({}, pos));
+        self.$conditions.splice(pos, 0, constructCondition({}, pos, isInGroup));
         updateConditions();
         self.$form.addItem(pos + 1, self.$conditions[pos]);
     }
 
     function addGroup(pos) {
-        self.$form.addItem(pos + 1, constructGroup(pos))
+        self.$form.addItem(pos + 1, constructGroup(pos));
+        self.options.query.conditions.splice(pos + 1, 0, 'foobar');
+        addCondition(pos + 1, true);
     }
 
     function changeConditionKey(pos, key) {
@@ -252,11 +254,52 @@ Ox.Filter = function(options, self) {
         that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or');
     }
 
-    function constructCondition(condition, pos) {
-        var $condition;
-        return $condition = new Ox.FormElementGroup({
-            elements: [
-                new Ox.Select({
+    function constructButtons(isGroup, isInGroup) {
+        return Ox.merge([
+            new Ox.Button({
+                    disabled: self.options.query.conditions.length == 1,
+                    id: 'remove',
+                    title: 'remove',
+                    type: 'image'
+                })
+                .css({margin: '0 4px 0 ' + (isGroup ? '262px' : '8px')})
+                .bind({
+                    click: function() {
+                        removeCondition($(this).parent().data('position'));
+                    }
+                }),
+            Ox.Button({
+                    id: 'add',
+                    title: 'add',
+                    type: 'image'
+                })
+                .css({margin: '0 ' + (isInGroup ? '0' : '4px') + ' 0 4px'})
+                .bind({
+                    click: function() {
+                        Ox.print('add', $(this).parent().data('position'))
+                        addCondition($(this).parent().data('position') + 1)
+                    }
+                })
+        ], isInGroup ? [] : [
+            Ox.Button({
+                    id: 'addgroup',
+                    title: 'bracket',
+                    type: 'image'
+                })
+                .css({margin: '0 0 0 4px'})
+                .bind({
+                    click: function() {
+                        addGroup($(this).parent().data('position') + 1)
+                    }
+                })
+        ]);
+    }
+
+    function constructCondition(condition, pos, isInGroup) {
+        var $condition = {};
+        return $condition = Ox.FormElementGroup({
+            elements: Ox.merge([
+                Ox.Select({
                         items: $.map(self.options.findKeys, function(key) {
                             return {
                                 id: key.id,
@@ -274,51 +317,17 @@ Ox.Filter = function(options, self) {
                         }
                     }),
                 constructConditionOperator(pos),
-                new Ox.Input({
+                Ox.Input({
                     width: 256
-                }),
-                new Ox.Button({
-                        disabled: self.options.query.conditions.length == 1,
-                        id: 'remove',
-                        title: 'remove',
-                        type: 'image'
-                    })
-                    .css({margin: '0 4px 0 8px'})
-                    .bindEvent({
-                        click: function() {
-                            removeCondition($condition.data('position'));
-                        }
-                    }),
-                new Ox.Button({
-                        id: 'add',
-                        title: 'add',
-                        type: 'image'
-                    })
-                    .css({margin: '0 4px 0 4px'})
-                    .bindEvent({
-                        click: function() {
-                            Ox.print('add', $(this).parent().parent().data('position'))
-                            addCondition($condition.data('position') + 1)
-                        }
-                    }),
-                new Ox.Button({
-                        id: 'addgroup',
-                        title: 'bracket',
-                        type: 'image'
-                    })
-                    .css({margin: '0 0 0 4px'})
-                    .bindEvent({
-                        click: function() {
-                            addGroup($condition.data('position') + 1)
-                        }
-                    })
-            ]
+                })
+            ], constructButtons(false, isInGroup))
         })
+        .css({marginLeft: isInGroup ? '24px' : 0})
         .data({position: pos});
     }
 
     function constructConditionOperator(pos, selected) {
-        return new Ox.Select({
+        return Ox.Select({
             items: $.map(self.conditionOperators[getConditionType(
                 Ox.getObjectById(
                     self.options.findKeys,
@@ -343,16 +352,16 @@ Ox.Filter = function(options, self) {
 
     function constructGroup() {
         // fixme: duplicated
-        return new Ox.FormElementGroup({
+        return Ox.FormElementGroup({
             elements: [
-                new Ox.Label({
+                Ox.Label({
                     title: self.options.query.operator == '&' ? 'and' : 'or',
                     overlap: 'right',
                     width: 48
                 }).addClass('OxGroupLabel'),
-                new Ox.FormElementGroup({
-                    elements: [
-                        new Ox.Select({
+                Ox.FormElementGroup({
+                    elements: Ox.merge([
+                        Ox.Select({
                                 items: $.map(self.operators, function(operator) {
                                     return {
                                         checked: operator.id != self.options.query.operator,
@@ -368,12 +377,12 @@ Ox.Filter = function(options, self) {
                             .bindEvent({
                                 change: changeOperator
                             }),
-                        new Ox.Label({
+                        Ox.Label({
                             overlap: 'left',
                             title: 'of the following conditions',
                             width: 160
                         })
-                    ],
+                    ], constructButtons(true)),
                     float: 'right',
                     width: 208
                 })