diff --git a/UI/Templates/ContactsUI/UIxListEditor.wox b/UI/Templates/ContactsUI/UIxListEditor.wox
index e4842236e..edab0a3fb 100644
--- a/UI/Templates/ContactsUI/UIxListEditor.wox
+++ b/UI/Templates/ContactsUI/UIxListEditor.wox
@@ -18,7 +18,7 @@
       onsubmit="return validateListEditor();">
       <div id="listEditor">
         <h3><var:string label:value="List details" /></h3>
-        <table><tr><td><var:string label:value="List name:"/></td>
+        <table><tr><td width="20%"><var:string label:value="List name:"/></td>
             <td><input type="text" const:id="name" const:name="name"
                 var:value="name" class="textField" /></td></tr>
           <tr><td><var:string label:value="List nickname:"/></td>
diff --git a/UI/WebServerResources/UIxListEditor.css b/UI/WebServerResources/UIxListEditor.css
new file mode 100644
index 000000000..398707a85
--- /dev/null
+++ b/UI/WebServerResources/UIxListEditor.css
@@ -0,0 +1,57 @@
+TABLE#referenceList
+{ width: 100%; }
+
+TD.referenceListCell
+{ background: white; }
+
+DIV#referenceListWrapper
+{ background: white;
+  overflow: auto;
+  position: relative;
+  right: 0;
+  top: 0;
+  left: 0;
+  height: 33em;
+  margin: 2px; }
+
+TR.referenceListRow
+{ background: #FFFFFF;
+  height: 2.5em; }
+TR._selected
+{ background: #333333; }
+
+TD.referenceListCell
+{ -moz-user-select: none; }
+
+DIV#windowButtons
+{ position: fixed;
+  top: auto;
+  bottom: 5em;
+  left: 0px;
+  right: 25px;
+  height: 3.5em;
+  line-height: 2em;
+  vertical-align: middle;
+  text-align: right; }
+
+DIV#buttons
+{ position: fixed;
+  top: auto;
+  bottom: 0px;
+  left: 0px;
+  right: 25px;
+  height: 3.5em;
+  line-height: 2em;
+  vertical-align: middle;
+  text-align: right; }
+
+h3 {
+  margin-bottom: 2px !important;
+  margin-left: 5px !important;
+}
+
+INPUT.textField {
+  width: 250px;
+  position: relative;
+  right: 0px;
+}
diff --git a/UI/WebServerResources/UIxListEditor.js b/UI/WebServerResources/UIxListEditor.js
new file mode 100644
index 000000000..b051890ad
--- /dev/null
+++ b/UI/WebServerResources/UIxListEditor.js
@@ -0,0 +1,129 @@
+function validateListEditor () {
+    serializeReferences ();
+    return true;
+}
+
+function makeEditable (element) {
+    element.addClassName ("editing");
+    element.removeClassName ("referenceListCell");
+    var tmp = element.innerHTML;
+    element.innerHTML = "";
+    var textField = new Element ("input", {"type": "text", 
+                                           "width": "90%"});
+    textField.style.width = "90%";
+    textField.value = tmp.trim ();
+    textField.value = textField.value.replace (/&lt;/, "<");
+    textField.value = textField.value.replace (/&gt;/, ">");
+    textField.observe ("keydown", interceptEnter);
+    element.appendChild (textField);
+    textField.focus ();
+    textField.select ();
+}
+
+function interceptEnter (e) {
+    if (e.keyCode == Event.KEY_RETURN) {
+        endAllEditables (null);
+        preventDefault (e);
+        return false;
+    }
+    else {
+        onContactKeydown(e);
+    }
+}
+
+function endEditable (element) {
+    var tmp = "";
+    if (element.readAttribute ("card")) {
+        var tmp = element.childElements ().first ().value;
+        tmp = tmp.replace (/</, "&lt;");
+        tmp = tmp.replace (/>/, "&gt;");
+        element.innerHTML = tmp;
+        element.removeClassName ("editing");
+        element.addClassName ("referenceListCell");
+    }
+    else {
+        element.ancestors ().first ().remove ();
+    }
+}
+
+function endAllEditables (e) {
+    var r = $$("TABLE#referenceList tbody tr td");
+    for (var i=0; i<r.length; i++) {
+        if (r[i] != this && r[i].hasClassName ("editing"))
+            endEditable ($(r[i]));
+    }
+}
+
+function onNameEdit (e) {
+    endAllEditables ();
+    if (!this.hasClassName ("editing")) {
+        makeEditable (this);
+    }
+}
+
+function onReferenceAdd (e) {
+    var row = new Element ("tr");
+    var nametd = new Element ("td").update ("");
+
+    row.addClassName ("referenceListRow");
+    nametd.addClassName ("referenceListCell");
+
+    row.appendChild (nametd);
+    $("referenceList").tBodies[0].appendChild (row);
+    makeEditable (nametd);
+
+    resetTableActions ();
+}
+
+function onReferenceDelete (e) {
+    var list = $('referenceList').down("TBODY");;
+    var rows = list.getSelectedNodes();
+    var count = rows.length;
+
+    for (var i=0; i < count; i++) {
+        rows[i].remove ();
+    }
+}
+
+function serializeReferences (e) {
+    var r = $$("TABLE#referenceList tbody tr");
+    var cards = "{";
+
+    for (var i = 0; i < r.length; i++) {
+        var td = r[i].childElements ().first ();
+        var card = td.readAttribute ("card");
+        var name = td.readAttribute ("name");
+        var mail = td.readAttribute ("mail");
+        cards += "\"" + card + "\" = (\""+name+"\", \""+mail+"\");";
+    }
+    cards = cards + "}";
+
+    $("referencesValue").value = cards;
+}
+
+function resetTableActions () {
+    var r = $$("TABLE#referenceList tbody tr");
+    for (var i = 0; i < r.length; i++) {
+        var row = $(r[i]);
+        row.observe("mousedown", onRowClick);
+        var td = row.childElements().first ();
+        td.observe("mousedown", endAllEditables);
+        td.observe("dblclick", onNameEdit);
+    }
+}
+
+function onEditorCancelClick(event) {
+	preventDefault(event);
+	window.close();
+}
+
+function initListEditor () {
+    var table = $("referenceList");
+    table.multiselect = true;
+    resetTableActions ();
+    $("referenceAdd").observe ("click", onReferenceAdd);
+    $("referenceDelete").observe ("click", onReferenceDelete);
+    $("cancelButton").observe("click", onEditorCancelClick);
+}
+
+document.observe("dom:loaded", initListEditor);