diff --git a/public/css/vc.css b/public/css/vc.css
index 0474e36..0b25c66 100644
--- a/public/css/vc.css
+++ b/public/css/vc.css
@@ -9,9 +9,10 @@
   background-color: #7ba400;
   color: white;
   font-family: tahoma, verdana, arial;
+  font-size: 10pt;
 }
 
-.vc span + span {
+.vc .doc > span + span {
   margin-left: 5pt;
 }
 
@@ -19,13 +20,18 @@
   position: relative;
   background-color: #7ba400;
   color: white;
-  margin-left: 2em;
   display: inline-block;
   border-radius: 10px;
-  border-width: 0 3px 0 3px;
   border-style: solid;
-  padding-left: 10px;
-  padding-right: 10px;
+
+  /* See margin-left in docGroup::before */
+  margin-left: 2.8em;
+  border-width: 0 3px 0 3px;
+  padding: .6em .5em;
+}
+
+.vc > .docGroup {
+  margin-left: 0;
 }
 
 .vc .operators {
@@ -36,13 +42,10 @@
   line-height: 0;
 }
 
-.vc .operators > span,
-.vc .docGroup::before {
+.vc .operators > span {
+  cursor: pointer;
   font-size: 9pt;
   line-height: 1.3em;
-}
-
-.vc .operators > span {
   padding: 0 4px;
   display: inline-block;
 }
@@ -52,6 +55,12 @@
   color: #7ba400;
 }
 
+.vc .doc > .operators > span.and {
+  border-radius: inherit;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .vc .operators > span.or {
   background-color: #ffa500;
   color: white;
@@ -63,23 +72,101 @@
   color: white;
 }
 
+.vc .doc > .operators > span.delete {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.vc .doc > .operators {
+  margin-left: 10px;
+}
+
+.vc .docGroup[data-operation=or] > .doc::before,
+.vc .docGroup[data-operation=or] > .docGroup::before {
+  content: "oder";
+}
+
+.vc .docGroup[data-operation=and] > .doc::before,
+.vc .docGroup[data-operation=and] > .docGroup::before {
+  content: "und";
+}
+
+.vc .docGroup[data-operation] > .doc:first-child::before,
+.vc .docGroup[data-operation] > .docGroup:first-child::before {
+  content: '';
+}
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+  display: inline-block;
+  text-align: right;
+  width: 2.2em;
+}
+
+
+.vc .docGroup[data-operation] > .doc::before {
+  padding-right: 1.2em;
+}
+
+.vc .docGroup[data-operation] > .docGroup::before {
+  position: absolute;
+}
+
+.vc .docGroup[data-operation] > .doc::before {
+  margin-right: .1em;
+}
+
+.vc .docGroup > .docGroup::before {
+  margin-left: -3.4em;
+}
+
+/*
 .vc .docGroup[data-operation=and]::before,
 .vc .docGroup[data-operation=and] .operators {
   background-color: white;
 }
+*/
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+  color: #496000;
+}
 
 .vc .docGroup[data-operation=or] {
   border-color: #ffa500;
 }
 
-.vc .docGroup[data-operation=or]::before,
-.vc .docGroup[data-operation=or] .operators {
+.vc .docGroup[data-operation=or] > .operators {
   border-color: #ffa500;
   background-color: #ffa500;
   color: white;
 }
 
-.vc .docGroup::before,
+.docGroup > .operators {
+  z-index: 30;
+}
+
+.docGroup .docGroup > .operators {
+  z-index: 31;
+}
+
+.docGroup .docGroup .docGroup > .operators {
+  z-index: 32;
+}
+
+.docGroup .docGroup .docGroup .docGroup > .operators {
+  z-index: 33;
+}
+
+.docGroup .docGroup .docGroup .docGroup .docGroup > .operators {
+  z-index: 34;
+}
+
+.vc .doc > span.key,
+.vc .doc > span.value {
+  font-weight: bold;
+}
+
 .vc .operators {
   color: #7ba400;
   border-color: white;
@@ -88,7 +175,6 @@
   border-style: solid;
 }
 
-.vc .docGroup::before,
 .vc .docGroup > .operators {
   position: absolute;
   display: block;
@@ -96,29 +182,9 @@
   vertical-align: middle;
 }
 
-
-
-.vc .docGroup::before {
-  width: 3em;
-  /* width */
-  left: -3em;
-  /* border sizes (own and reals) */
-  margin-left: -5px;
-  border-width: 2px 0 2px 2px;
-  border-top-left-radius: 7px;
-  border-bottom-left-radius: 7px;
-}
-
-.vc .docGroup[data-operation=and]::before {
-  content: "und";
-}
-
-.vc .docGroup[data-operation=or]::before {
-  content: "oder";
-}
-
 .vc .doc > .operators {
   display: inline-block;
+  border-color: #ffa500;
   border-width: 2px 2px 2px 2px;
   border-radius: 7px;
 }
@@ -129,6 +195,7 @@
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
   margin-left: 100%;
+  padding: 0;
 }
 
 .vc .docGroup:hover {
diff --git a/public/js/demo/vc.html b/public/js/demo/vc.html
index 6c306b0..d4924e4 100644
--- a/public/js/demo/vc.html
+++ b/public/js/demo/vc.html
@@ -29,6 +29,24 @@
               "key":"Veröffentlichungsort",
               "value":"hihi",
               "match":"match:eq"
+            },
+            {
+              "@type":"korap:docGroup",
+              "operation":"operation:or",
+              "operands":[
+                {
+                  "@type":"korap:doc",
+                  "key":"Titel",
+                  "value":"Baum",
+                  "match":"match:eq"
+                },
+                {
+                  "@type":"korap:doc",
+                  "key":"Veröffentlichungsort",
+                  "value":"hihi",
+                  "match":"match:eq"
+                }
+              ]
             }
           ]
         },
diff --git a/public/js/spec/vcSpec.js b/public/js/spec/vcSpec.js
index ce2ca4a..2010adf 100644
--- a/public/js/spec/vcSpec.js
+++ b/public/js/spec/vcSpec.js
@@ -631,7 +631,46 @@
   it('should be based on a nested docGroup', function () {
     var vc = KorAP.VirtualCollection.render({
       "@type" : "korap:docGroup",
-      "operation" : "operation:or",
+      "operation" : "operation:and",
+      "operands" : [
+	{
+	  "@type": 'korap:doc',
+	  "key": 'pubDate',
+	  "match": 'match:geq',
+	  "value": '2014-05-12',
+	  "type": 'type:date'
+	},
+	{
+	  "@type": 'korap:doc',
+	  "key": 'pubDate',
+	  "match": 'match:leq',
+	  "value": '2014-12-05',
+	  "type": 'type:date'
+	},
+	{
+	  "@type": 'korap:doc',
+	  "key": 'foo',
+	  "match": 'match:eq',
+	  "value": 'bar',
+	  "type": 'type:string'
+	}
+      ]
+    });
+
+    var docGroup = vc.root();
+    var doc = docGroup.getOperand(1);
+    expect(doc.key()).toEqual("pubDate");
+    expect(docGroup.delOperand(doc)).toEqual(true);
+    doc = docGroup.getOperand(1);
+    expect(doc.key()).toEqual("foo");
+  });    
+
+  it('should be modifiable', function () {
+    var vc = KorAP.VirtualCollection.render();
+
+    var vc = KorAP.VirtualCollection.render({
+      "@type" : "korap:docGroup",
+      "operation" : "operation:and",
       "operands" : [
 	{
 	  "@type": 'korap:doc',
@@ -641,37 +680,19 @@
 	  "type": 'type:string'
 	},
 	{
-	  "@type" : "korap:docGroup",
-	  "operation" : "operation:and",
-	  "operands" : [
-	    {
-	      "@type": 'korap:doc',
-	      "key": 'pubDate',
-	      "match": 'match:geq',
-	      "value": '2014-05-12',
-	      "type": 'type:date'
-	    },
-	    {
-	      "@type": 'korap:doc',
-	      "key": 'pubDate',
-	      "match": 'match:leq',
-	      "value": '2014-12-05',
-	      "type": 'type:date'
-	    }
-	  ]
+	  "@type": 'korap:doc',
+	  "key": 'pubDate',
+	  "match": 'match:eq',
+	  "value": '2014-12-05',
+	  "type": 'type:date'
 	}
       ]
     });
+
     expect(vc.element().getAttribute('class')).toEqual('vc');
-    expect(vc.element().firstChild.getAttribute('class')).toEqual('docGroup');
-    expect(vc.element().firstChild.children[0].getAttribute('class')).toEqual('doc');
-    var dg = vc.element().firstChild.children[1];
-    expect(dg.getAttribute('class')).toEqual('docGroup');
-    expect(dg.children[0].getAttribute('class')).toEqual('doc');
-    expect(dg.children[1].getAttribute('class')).toEqual('doc');
-    expect(dg.children[2].getAttribute('class')).toEqual('operators');
-    expect(vc.element().firstChild.children[2].getAttribute('class')).toEqual('operators');
-  });    
+    expect(vc.root().element().getAttribute('class')).toEqual('docGroup');
+    expect(vc.root().operation()).toEqual('and');
+  });
 });
 
 describe('KorAP.Operators', function () {
diff --git a/public/js/src/vc.js b/public/js/src/vc.js
index fe702a7..fbdc118 100644
--- a/public/js/src/vc.js
+++ b/public/js/src/vc.js
@@ -96,6 +96,20 @@
     }
   };
 
+  KorAP._or = function (e) {
+    var obj = this.parentNode.refTo;
+  };
+
+  KorAP._and = function (e) {
+    var obj = this.parentNode.refTo;
+  };
+
+  KorAP._delete = function (e) {
+    var obj = this.parentNode.refTo;
+    obj.parent().delOperand(obj);
+    // Todo: CLEAR ALL THE THINGS!
+  };
+
   /**
    * Operators for criteria
    */
@@ -115,6 +129,8 @@
 
       var op = this._element;
 
+      op.refTo = this.parent();
+
       // Remove everything underneath
       _removeChildren(op);
 
@@ -122,6 +138,7 @@
       if (this._and === true) {
 	var andE = document.createElement('span');
 	andE.setAttribute('class', 'and');
+	andE.addEventListener('click', KorAP._and, false);
 	andE.appendChild(document.createTextNode(KorAP.Locale.AND));
 	op.appendChild(andE);
       };
@@ -130,6 +147,7 @@
       if (this._or === true) {
 	var orE = document.createElement('span');
 	orE.setAttribute('class', 'or');
+	orE.addEventListener('click', KorAP._or, false);
 	orE.appendChild(document.createTextNode(KorAP.Locale.OR));
 	op.appendChild(orE);
       };
@@ -139,11 +157,19 @@
 	var delE = document.createElement('span');
 	delE.setAttribute('class', 'delete');
 	delE.appendChild(document.createTextNode(KorAP.Locale.DEL));
+	delE.addEventListener('click', KorAP._delete, false);
 	op.appendChild(delE);
       };
 
       return op;
     },
+
+    // Be aware! This may be cyclic
+    parent : function (obj) {
+      if (arguments.length === 1)
+	this._parent = obj;
+      return this._parent;
+    },
     element : function () {
 
       // Return existing element
@@ -208,7 +234,6 @@
 	op.element()
       );
 
-
       return this.element();
     },
     element : function () {
@@ -564,6 +589,21 @@
       return this._operands[index];
     },
 
+    // Delete operand from group
+    delOperand : function (obj) {
+      for (var i in this._operands) {
+	if (this._operands[i] === obj) {
+	  this._operands.splice(i,1);
+
+	  // Todo: Update has to check
+	  // that this may mean the group is empty etc.
+	  this.update();
+	  return true;
+	};
+      };
+      return false;
+    },
+
     // Deserialize from json
     fromJson : function (json) {
       if (json === undefined)
@@ -638,12 +678,15 @@
 	this._parent = obj;
       return this._parent;
     },
+
+    // Be aware! This may be cyclic
     operators : function (and, or, del) {
       if (arguments === 0)
 	return this._ops;
       this._ops = KorAP.Operators.create(
 	and, or, del
       );
+      this._ops.parent(this);
       return this._ops;
     },
     toJson : function () {