diff --git a/css/style.css b/css/style.css
index 98df338a..9386993e 100755
--- a/css/style.css
+++ b/css/style.css
@@ -55,4 +55,9 @@ float:left;
 	right:72px;
 	padding: 10px;
 	background-color: #ddd;
+}
+
+#invitee-list li{
+	padding: 5px 0 5px 20px;
+	background: url('%webroot%/core/img/actions/delete.svg') 0 50% no-repeat;
 }
\ No newline at end of file
diff --git a/js/office.js b/js/office.js
index 3a627003..49fcd0ee 100644
--- a/js/office.js
+++ b/js/office.js
@@ -149,6 +149,9 @@ $(document).ready(function() {
 	$('#odf_close').live('click', officeMain.onClose);
 	$('#odf_invite').live('click', officeMain.onInvite);
 	$('#invite-send').live('click', officeMain.sendInvite);
+	$('#invitee-list li').live('click', function(){
+		$(this).remove();
+	});
 	
 	$('#inivite-input').autocomplete({
 		minLength: 1,
@@ -163,15 +166,18 @@ $(document).ready(function() {
 			});
 		},
 		select: function(event, el) {
-			var item = $(
-					'<li>'
+			event.preventDefault();
+			var item = $( 
+					'<li title="'
+					+ t('office', 'Remove from the list')
+					+ '" >'
 					+ el.item.label
 					+ '<input type="hidden" name="invitee[]" value="'
 					+ el.item.value
 					+ '" />'
 					+ '</li>'
 					);
-			$('#invitee-list').append(item);
+			$('#invitee-list').prepend(item);
 		}
 	});
 	
diff --git a/templates/documents.php b/templates/documents.php
index 15581ab4..bf2feb46 100755
--- a/templates/documents.php
+++ b/templates/documents.php
@@ -1,7 +1,7 @@
 <div id="controls">
 	<div id="invite-block" style="display:none">
 		<input id="inivite-input" type="text" />
-		<div id="invitee-list"></div>
+		<ul id="invitee-list"></ul>
 		<button id="invite-send"><?php p('Send Invitation') ?></button>
 	</div>
 </div>